To add an image to a store in Store Locator, please follow these steps:
- From Shopify's admin, select Apps.
- Select Store Locator.
- Select Stores.
- Select Manage Locations.
- Select Edit next to the store to add the image.
-
Paste this code into the Name field before the name:
<img class="result_image" src="####"/>
- Replace #### with the URL to your image.
- Select Save.
- Select Settings.
- Select Display Settings.
-
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.
- Select Save.
That's it!
Comments
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.
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!
Cheers,
Brendin
Knowledge Centre Manager
Please sign in to leave a comment.