Installing Stockist Store Locator on Square

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

Note: The steps here are for the Square website builder. For Squarespace, see this article.

Adding Stockist to your Square site

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

  1. In your Stockist dashboard, open Installation > Embed code  and copy the HTML snippet there
  2. Sign into your Square Dashboard and go to Online
  3. Select Website > Edit site
  4. Open or create the page where you want to add Stockist.
  5. Select +Add > Section and select the Embed code section
  6. In the editing panel, select Embed code and paste the code from step 1 into the box
  7. Publish your site to see the changes live

Here's a screenshot of where to paste the your map code in the Embed code section:

Square has more details on embedding third-party content like Stockist in this article.

Adjusting the font and text color

Stockist normally inherits the font and text color from your website automatically. However, Square places your locator into a special container called an iframe that prevents the font from flowing through automatically.

You can change the font and text color by adding some custom CSS code to your Stockist dashboard under Settings > Appearance > Advanced settings > Custom CSS:

#stockist-widget {
    /* Update '#333333' below to any hex color code to change the text color */
    color: #333333; 

    /* Uses a basic sans-serif font across all platforms  */
    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
}

If you run into any trouble, feel free to get in touch and we're happy to assist!

Related Articles