Vertical Slider for Product Page with Zoom in Hover
Wow Shopify with AI
files/Channels_-_Growth_Social_Static_Affiliates_Affiliates-Merchants__320x480_7724dbcb-6bd4-46ed-8a59-93eb2012e8b0.png

Vertical Slider for Product Page with Zoom in Hover

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.

Please note that the code may not be compatible with any currently installed apps.

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

Recently, the Dawn theme had an update in December 2021 that added thumbnail sliders to the desktop version. However, if you're looking to create a more personalized slider with vertical scrolling and zoom features, you're in the right place! In this tutorial, we'll provide you with simple and easy-to-follow instructions for creating a featured product collection slider that fits your unique style and needs.

If you're using version Dawn 2.5 or lower, you can refer to vertical slider for product page.

What you are buying:

  • Responsive code and IOS friendly
  • Product page section only
  • Well written code with NO external library being use
  • Product image zoom in hover
  • 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.

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

Update 04/18/23: Updated to work with newer version (version 9.0) of Dawn 

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

Checkout The FREE SHopify Tools

Shopify FREE tools