Compatibility: Only works in Dawn version 5.0 and Shopify 2.0 FREE themes.
For people who have used Debut theme, how we wish to have the hover effect in Dawn theme as well. This is possible without an APP or external library. Just follow the steps below.
What you are buying:
- Product image zoom when hovered in product page
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
1. Go to your Admin store > Online Store > Themes > Actions > Edit code.
2. Open the main-product.liquid file under the Sections folder.
3. We need to enhance the slider-component. To do that we need to replace the first <slider-component> to <product-zoom>. Also the closing tag </slider-component> to </product-zoom>.
4. Next, we will need to add a little CSS code for the zoom effect to work. Open the Asset folder and find the 'section-main-product.css.' Then add the code below.
5. Last thing to add is the script code. Open the global.js, still at the Asset folder. Then add the code below.
That is it (",)