HI there,
I was wondering if anyone can help me replace product image thumbnails on the Dawn theme to a dotted slider.
Hello @Ali123
Can you share your website URL so that I can check and provide you with the solution to replace the image thumbnails with a slider?
This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.
Regard your concern to replace product image thumbnails on the Dawn theme to a dotted slider. Please help me to follow these steps below
Making a backup 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.
Downloading the files
Download the files by clicking here. (live preview)
Step 1: adding the “top” code- From your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code.
-
Type the following on the search bar:
main-product.liquid
And open the file that is found.
-
Inside the .zip you downloaded, there will be a file called top.txt. Copy all the code inside of this file.
-
Paste the code at the beginning of your main-product.liquid file, as the image indicates.
Before:
After:
Step 2: adding the “bottom” code- Still inside the “main-product.liquid” file, press CTRL + F (or CMD + F on Mac) and search for:
{% schema
Make sure you include the space after %.
-
Now, delete everything below the {% schema %} line, including the {% schema %}.
-
Inside the .zip you downloaded, there will be a file called bottom.txt.
Copy all the code inside of this file and paste it at the very bottom of the file.
-
That is it!
Final step: activating and customizing the slider- From your Shopify admin, navigate to Online Store > Themes >Customize. Choose the theme that you just added the code to.
-
At the top, from the dropdown options, select Products> default product.
-
Once this page loads, click on Product Information on the left.
-
Scroll down to Media and activate whatever option you’d like. In this case, we’ll enable the vertical thumbnails:
If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.
Best regards,
PageFly
This is paid option, wish there was a free option or codes available.