Vertical Slider for Product Page - Dawn Theme

Vertical Slider for Product Page - Dawn Theme

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.

Compatability: Dawn version 2.5 and above, other Shopify 2.0 FREE themes

Dawn theme just had an update on December 2021, and added thumbnail sliders to desktop. I want to make it personalized and did a vertical slider instead with zoom feature. I tried to make the instructions simple and easy to follow.

If you have version Dawn 2.5 and lower, please refer on this link

What you are buying:

  • Responsive code and IOS friendly
  • Product page section only
  • Well written code with NO external library being use
  • No APP being use

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 main-product.liquid under the Sections folder and replace the code below. 

<

  3. We have to add a css file just for our slider. Open the "section-main-product.css" under the Assets folder and replace the code with 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.

<


Please skip step #5 in the video regarding vertical-media-gallery.js.

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

Update 2/2/22: When store owners added another section that contains a component slider, the code that we have here is being replace. So I just fix the naming convention to fix it. 

Update 3/23/22: I added the icons in the collapsible component that was added in Dawn 4.0 version. I made major change actually. If you notice, the original Dawn code does not really look good with IOS devices. I was able to make this slider somewhat decent in the IOS users. 

Update 6/30/22: Update the code so the zoom still function even with one image

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