Vertical slider for product page image

Vertical Product Image Slider for Shopify Dawn Theme with Zoom in Hover

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Dawn version 9 to 12, and other Shopify 2.0 FREE themes only

Welcome to our latest tutorial, designed specifically for users of the Dawn theme (versions 9 to 12) and other Shopify 2.0 free themes. As of December 2021, Dawn introduced an exciting thumbnail slider feature for desktop users. But what if you want to take your product display a step further? Our guide is here to help you create a custom vertical slider, complete with scrolling and zoom capabilities, to showcase your products in a style that's uniquely yours.

 

Key Features of Our Enhanced Slider

Compatibility and Version Support:


User-Friendly Design:
    • Our tutorial provides straightforward, step-by-step instructions.
    • We've included a major code update to ensure seamless integration with the latest version of Dawn.
    • View the accompanying image to see the stunning end result.

 

    Setting Up Your Slider: Make sure to configure your Shopify theme editor to use the "thumbnail carousel" layout for desktop displays and  to have "hide thumbnails" on mobile layout. This settings are crucial for the proper functioning of our enhanced slider. 

    We had a major code change to make this work with the latest version. We have removed the section settings as shown on the video. Please check the image below to see how it looks like.

     

    Vertical Product Slider preview

    You can also view the demo store here. Password: made4uo

    What you are buying:

    • A fully responsive code that enhances your product page.
    • A product page section designed exclusively for this feature.
    • Efficient, well-structured code that operates without external libraries.
    • An innovative product image zoom feature that activates on hover.
    • A stand-alone solution that requires no additional apps.

    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. We have to go to our code editor. Shopify admin store > Themes > Edit code.

    2. Look for the product-media-gallery.liquoid under the Snippet folder and replace the code below. 

     

    3. We have to add a css file for our slider. Open the Assets folder, and "Add a new asset", name it "main-product-verticaland place the code below. 



    4. Next, we have to add our own Javascript code. Open the global.js under the Assets folder and paste the code at the very bottom of the file.

     

    Conclusion: By following our guide, you'll add a touch of sophistication and functionality to your Shopify store, making your product pages more interactive and engaging for your customers. If you have any questions or need further assistance, feel free to Shopify's Chat with us or visit our Contact page. Let's transform your product display into an immersive shopping experience!

    That's it. I hope it didn't make you sweat. (",)

    Copied!
    Back to blog

    10 comments

    I am not able to zoom in, also i am not able to scroll to the left or right on the thumbnails

    mandeep

    Hi,

    I added the version for 2.5.

    @chad. Please post the question to the corresponding page. Thank you

    Made4uo

    I see selecting a variant swatch changes to the assigned image. Likewise does changing image select the photo’s associated variant so that variant selection+its thumbnail are always in sync?

    Chad

    How to make a horizontal slider with thumbnails at the bottom in 2.5? Thank you

    Ivan

    Could you tell me how to install HORIZONTAL slider in the 2.5?

    Yutaka

    Leave a comment