Enable mobile thumbnails for product pages on the Impulse Theme
The impulse theme by Archetype Themes, by default, does not come with an option to show thumbnails on mobile devices. With some minor custom coding it's possible to achieve that, though.
This code was tested on Impulse version 3.4.0.
Safety first: making a backup copy of your theme
Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.
Showing the thumbnails on mobile
- In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
- Find the file named product-images.liquid
- Press CTRL + F (or CMD + F if you are on Mac) and search for small–hide
- You should find only one occurrence of this. Make sure you delete the word and click on save.
Editing the javascript file
- Find the file named theme.js
- Press CTRL + F (or CMD + F if you are on Mac) and search for this:
initSliders:
Don't forget to include the colon on your search (the two dots on top of each): : - Again, you'll find only one occurrence, like the image below shows.
- Delete everything below the line you found (initSliders) until this symbol: },
It should look like this: - Open this link and copy the code.
- Paste it below below the line you found (initSliders) and click save. It should look like this:
The final, quick step
- From your Shopify admin, go to Online Store > Themes > Customize
- Navigate to Product Pages > Product Pages
- Make sure thumbnails position is below media
- Now save and you're ready to go!
Was this article helpful?