Compatibility: Only works in Dawn version 5.0 and any Shopify 2.0 FREE themes
Elevate your product page with an eye-catching hover zoom effect for your product images. If you've used the Debut theme before, you're likely familiar with the impressive hover effect it offers. Now, you can bring that same level of visual appeal to your product page in the Dawn theme - and the best part? You don't need to install any external apps or libraries to do it!
With just a few simple steps, you can add the hover zoom effect to your product images in the Dawn theme. Your customers will love being able to see your products up close and in detail, making it easier for them to make informed purchasing decisions.
So, why settle for a basic product page when you can add an engaging hover zoom effect? Follow the steps below and transform your product page today!
Experience this product firsthand by checking out our DEMO store! Use the password "made4uo" to enter.
What you are buying:
- Product image zoom when hovered in product page
- Script written in javascript, no jquery.
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.
To start:
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>. If you have Dawn version 8.0 and above, please go to the Snippet folder, and open the product-media-gallery.liquid to find the <slider-component>
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 (",)
Copied!