Add Images to Each Store in the Results Section


To add an image to a store in Store Locator, please follow these steps:

  1. From Shopify's admin, select Apps.

    Select Apps

  2. Select Store Locator.

    Select Store Locator

  3. Select Stores.

    select stores

  4. Select Manage Locations.

    select manage locations

  5. Select Edit next to the store to add the image.

    Edit Locations

  6. Paste this code into the Name field before the name:

    <img class="result_image" src="####"/>

    paste this code in the name field

  7. Replace #### with the URL to your image.

    replace #### with the URL to the image

  8. Select Save.

    select save

  9. Select Settings.

    select settings

  10. Select Display Settings.

    select display settings

  11. Copy and paste this code into the "Page Header HTML" box:

    <style> .result_image { float: left; margin-right: 10px; height: 100px; width: 100px; } </style>

    Note: This CSS will cause the image to be a 100 px x 100 px square image, you can adjust the numbers to change the dimensions.

    Insert Page Header HTML

  12. Select Save.


That's it!

Next Steps:

Blog Posts:

0 out of 1 found this helpful


  • Hi, this is cool functionality, however, Step 11 isn't working for me. When I add the tag .result_image { float:left; margin-right: 10px; height: 100px width: 100px } into the Header HTML, the header renders ".result_image { float:left; margin-right: 10px; height: 100px width: 100px }" and doesn't treat it as code. What am I doing wrong? Thank you.

    Comment actions Permalink
  • Hey Bill!

    Thanks so much for reaching out :) I had one of our agents take a deeper look at your site to investigate what was going on. It appears as though there were some tags in this section of your admin that were preventing this code from rendering properly. Your Store Locator widget should now be displaying correctly on the storefront.

    Please let us know through your email ticket if you have any further questions from here and we'll be more than happy to assist!

    Knowledge Centre Manager

    Comment actions Permalink

Please sign in to leave a comment.