Compatibility: Dawn version 2.5 below only
I have several request to make a vertical slider for Dawn 2.5 and below. If you have Dawn 2.5 and above, please refer to this link instead.
You can reposition the slider from left to right and vice versa.
Check DEMO store here 💻. Password: made4uo
What is a Vertical Product Image Slider for Shopify Dawn Theme 2.5 and below?
A vertical slider (or carousel) displays content in a vertical scrolling or sliding format. Instead of moving horizontally, the content transitions up or down, creating a dynamic and space-saving way to showcase multiple items.
Why Use a Vertical Product Image Slider for Shopify Dawn Theme 2.5 and below?
- Space Optimization: Vertical sliders are great for maximizing space, especially on mobile devices where horizontal space is limited.
- Engaging Presentation: The vertical scrolling motion can be more engaging than static displays, capturing visitors' attention.
- Showcase Multiple Items: Display a selection of products or other content in a compact and visually appealing way.
- Modern Look: Vertical sliders can give your store a modern and up-to-date feel.
- Improved Mobile Experience: Vertical scrolling is a natural gesture on mobile devices, making vertical sliders particularly well-suited for mobile users.
Additional Considerations:
- Content Length: Keep the content within each slide concise and easy to digest.
- Visual Appeal: Design the slider to be visually appealing and consistent with your brand.
- Mobile Responsiveness: Ensure the slider works well on mobile devices.
- Speed and Transitions: Choose appropriate slider speed and transition effects.
- Navigation: Provide clear navigation (arrows or dots) if needed.
What you are buying:
- Vertical slider
- Zoom in hover available in desktop view
- Works with variant changes
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 2.5 and below
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. Open the Sections folder
And look for "main-product.liquid". Replace the existing code with the code below.
Step #3. Add CSS Code
Next, we need to have the CSS. Open the Asset folder, then "create a new asset." Name it "product-slider." Open the file, then place the code below.
Step #4. Still in the Asset folder
Open the global.js. Then place the code below at the very bottom.
Step #5. Find the "VariantSelect",
Under it find the updateMedia function. Before the window.setTimeout, insert the code below. Please refer to the image for placement.
Step #6. 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.
That's it (",). If you have questions, feel free to contact me by using the "Chat with us."
Conclusion
Implementing a vertical slider in Shopify, particularly for Dawn theme versions 2.5 and below, offers a compelling way to showcase products or other content in a visually engaging and space-saving manner. By utilizing a vertical scrolling format, you can maximize the use of screen real estate, especially on mobile devices, and capture visitors' attention with dynamic transitions. While custom coding is possible, leveraging a JavaScript library like Slick or Swiper is highly recommended for ease of implementation and access to pre-built features. Remember to prioritize mobile responsiveness, visual appeal, and smooth transitions to create a seamless and effective vertical slider that enhances the user experience and contributes to a more modern and engaging online store.
Copied!
3 comments
Hi @XJ,
Sorry I do not get the question.
Hi @Melissa,
Please message me at “Chat with us”, I need your website to be able to assist you
When a variant is selected (the header link has a variant id), and then go to refresh, the attribute is black and the image is red.
Hi, I was able to successfully create a vertical product slider thanks to your help! However, I was wondering if there’s a way to make the height of all of the product images the same, so that when I scroll through them on my phone, they don’t vary so much in height?