Installing Stockist Store Locator on Wix

Stockist works with Wix, and offers a simple way to add a store locator to your Wix website.

Adding Stockist to your Wix site

To add your store locator to a page on your site, follow these steps:

  1. In Wix, open the site editor, and then open the page where you'd like to add your store locator

  2. In the Wix editor, click on the page section where you'd like to add your map. The section should be highlighted with a border:

  3. In the Wix editor, click the Add elements button to add a new item to your site:

  4. Choose the Embed Code category, and then next to Embed HTML click Add to Site:

  5. Move and resize the HTML element however you'd like, then click on the element and click Enter Code:

  6. In your Stockist Store Locator dashboard, open the Installation > Embed code page and copy the HTML snippet shown there.

  7. Back in the Wix editor, paste the snippet into the code box, then click Update:

  8. Click Save, then click Publish when you're ready to make the changes live.

Adjusting the font

Unlike other website platforms, Wix doesn’t allow you to add HTML code directly into your page. Instead, embedded apps like Stockist can only be added inside a container called an "iframe".

This limitation prevents Stockist from automatically using the styles from the rest of your site like the font and text color. As a result, your locator may use your browser’s default text styles, which don’t fit with your site.
This can be fixed by adding a custom style rule in your Stockist account to change the font. To use a nicer font, you can paste the following code into the Custom CSS box on the Settings > Appearance page of the app dashboard: 
#stockist-widget {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}