6. I see that the component-slider.css is also being use for multi-column section, therefore, we have to create a new .css file. Go to Asset folder, click 'create new asset', create blank. Name the file 'product-slider'. File should show like below
7. Now open, the created CSS folder and paste the code below.
8. Next, go back to the main-product.liquid. At the top part, comment out this code. You can also just delete it. To comment it out, place (<!-- ) before the code and (--->) after. Just like we did in the slider-component. Code should look like this.
9. We need to go to the Asset folder again, and open global.js. Find the slider-component. Since slider component is a global code, meaning, some section also uses the same code. We have to add an if statement. Please disregard the video regarding this section in global.js.
At the SliderComponent constructor add the code below.
That's it! You just transform the product page of Dawn theme. Let me know if you have questions or having issues with the code so we can fix it and have an updated code. (",)
Update 09/22/21: I end up changing the the code in the Asset/global.js so we do not break the slider component if we use it in the other section
I change the CSS code and remove the resize observer. Large-image will be the same height with the large-image-item.
Update 09/23/21: Issues of having two large image and slider missing fixed. Updated code to use feature hide_variants
Update 09/25/21: Fix the issue with thumbnail disappears when adding a section that uses a slider-component. Updated the code in the step #4.
Update 09/26/21: Added a video play button when thumbnail image is a video
Update 09/30/21: Fix the issue regarding the video button. Reposition the codes for the video-btn and added some css codes
Update 10/03/21: Added overflow: hidden to large-image css. I would recommend not to have product images with extreme height as your first variant image. Also added some CSS so when active, thumbnail image will have border box and opacity is 1. See code in green.Thumbnail border color is dependent on your var(--gradient-base-accent-1).
Update 10/04/21: Change the v-btn in the product-slider.css file due to issue when having a mobile video
Update 10/10/21: I know I fix the issue regarding the space between the large image and the slider. I did remove the resizeObserver and also the padding-bottom of the large image to fix this. I updated the code
Update 10/11/21: I change how the border and opacity is applied. Please see the highlighted green code
Update 10/15/21: I added an onload function so when the window loaded the first image in the thumbnail will get the active property. Code is pink.
Also added a code for those who still want the option to hide the variants when variants selected. (NOTE: this is the original code from Dawn). See code in blue.
Struggling with instructions?
Don't worry, we've got you covered for a reasonable price.
Just FYI. This code does not work if you have Dawn version 2.0 and higher. Shopify team already added this functionality in the newer version. Please check your theme editor
I have done all the steps. But slider is not coming. I can see images but arrow to slide next image is not working. Kindly advise
Is it possible to add a slider buttons to the top image (main image) so the user doesn’t need to scroll down to see more images?
just saw you have put up an updated tutorial that seems to fix the issues, thanks! :)
This also ‘breaks’ all other sliders, which now start count at 4. so if you have a slider with 3 items it becomes 7 items, starting at 4.
Along with the image sizing issues I had to revert. It’s a shame as it was a cool idea. Thank for the tutorial anyway.