Vertical Slider for Dawn 2.5 and below

Vertical Slider for Dawn 2.5 and below

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.

One Time Purchase!

$39.99
$39.99
Only
Please refresh page after a purchase

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 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. 

To start:

1. You have to go to your Admin store > Themes > Actions > Edit code. 

2. Open the Sections folder, and look for "main-product.liquid".

3. Replace the existing code with the code below. 

<

 

4. Next, we need to have the CSS. Open the Asset folder, then "create a new asset." Name it "product-slider." 

5. Open the file, then place the code below. 

<

 6. Still in the Asset folder, open the global.js. Then place the code below at the very bottom. 

<

 

7. Lastly, we need to find the "VariantSelect", under it find the updateMedia function. Before the window.setTimeout, insert the code below. Please refer to the image for placement.

<

 

update media

 That's it (",). If you have questions, feel free to contact me by using the "Chat with us."

Copied!
Back to blog

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

Made4Uo

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.

xj

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?

Melissa

Leave a comment