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 13, 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 is a Vertical Product Image Slider for Shopify Dawn Theme with Zoom in Hover?

    A vertical slider on a product page displays additional product images or related products in a vertical scrolling or sliding format. This allows you to showcase different angles, details, or complementary items without cluttering the main product image area.

    Why Use a Vertical Product Image Slider for Shopify Dawn Theme with Zoom in Hover?

    • Enhanced Product Presentation: Showcase multiple product images (different angles, close-ups, lifestyle shots) without overwhelming the main product image area.
    • Improved User Experience: Provides a more engaging and interactive way for customers to explore product details.
    • Increased Upselling/Cross-selling Opportunities: Highlight related products or complementary items to encourage additional purchases.
    • Space Optimization: Maximize the use of space on the product page, especially beneficial for mobile devices.
    • Modern Look and Feel: Adds a touch of modern design to your product pages.

    Additional Considerations:

    Beyond the basic implementation, these additional considerations will help you create a more polished and effective vertical slider:

    • Image Optimization: Optimize all images used in the slider for web performance. Large, unoptimized images can significantly slow down page load times.
    • Number of Slides: Carefully consider the number of slides to include. Too many slides can make the slider feel overwhelming, while too few might not be enough to showcase the product or related items effectively.
    • Navigation Controls: Provide clear and intuitive navigation controls (arrows or dots) so users can easily browse through the slides. Consider making these controls responsive and easy to use on mobile devices.
    • Auto-Play and Pause: If you use auto-play, include a pause button so users can stop the rotation if they want to examine a particular slide more closely.
    • Looping: Decide whether you want the slider to loop continuously or stop at the last slide. Looping is often preferred for a seamless user experience.
    • Transition Effects: Choose smooth and subtle transition effects. Avoid anything too jarring or distracting.

    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. 

     

    Steps on how to add Vertical Product Image Slider for Shopify Dawn Theme with Zoom in Hover

    Step #1. Open your code editor

    From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code.

    Step #2. Find the product-media-gallery.liquid

    Under the Snippet folder and replace the code below. 

     

    Step #3. Add a CSS file for slider

    Open the Assets folder, and "Add a new asset", name it "main-product-verticaland place the code below. 


    Step #4. Add Javascript code.

    Open the global.js under the Assets folder and paste the code at the very bottom of the file.

     

    Step #5. Open the main-product.liquid

    Under the Section folder. At the very buttom, look for the last square bracket. Above it, place the code below. See image for placement

     

    Placement:

    vertical slider position schema

    Step #6. Still at the main-product.liquid

    Scroll all the way up and find the code {% style %}. Under it, place the code below. Make sure to save.

     

    Placement:

    vertical slider position css

    Step #3. Save the changes

    Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

    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

    @Max Be aware that with the new version of Dawn, a thumbnail slider is already available, that is the reason I only created a vertical slider

    Made4Uo

    Hi there!
    Is it possible to also have a horizontal slider unter the picture?
    Because vertical doesn’t look well for my page.
    Kind regards
    Max

    Max

    Hi, why vertical-media-gallery.js is not included/referenced in main-product.liquid? also on iOS devices, after implementing the code, I was not able to swipe up and down on product pages. Dawn version 4.0.0

    Sophia

    Can you tell me how can we make them Fade effect on slides?

    Muhammad Naveed

    Please make sure you are copying the code. The javascript is responsible for buttons to work. If this doesn’t work then you are missing that code or might have an error.

    Made4uo

    Leave a comment