How To Add Slider in Product Page Shopify [Updated] In 2024

Рет қаралды 9,430

Күн бұрын

Shopify Product Page Slider: 🛍️ Want to enhance your Shopify store's product pages with a sleek slider? In this updated tutorial, I'll guide you step-by-step on how to add a stylish product page slider to your Shopify Dawn theme.
🎥 Watch this video to see how the product page slider will look like on both desktop and mobile versions. Click on the arrows or drag to the left or right to change product images effortlessly. The mobile version works seamlessly too, and the menu remains functional.
Implementing this product page slider will not require any additional apps or expenses. Simply copy and paste the provided code into your Shopify theme files. Check out the video and tutorial for a smooth and stylish product page slider that will elevate your customers' shopping experience.
🛒 Make your Shopify store stand out with interactive product page sliders today! If you have any questions or requests for more tutorials, feel free to comment below. Happy selling! 🚀
⭐ Follow these simple steps to implement the product page slider:
00:00 Intro
02:40 Installing Fresh Dawn Theme
04:00 Creating CSS Asset File
05:00 Creating JS Asset File
05:40 Including CSS and JS Asset in theme.liquid file
06:20 Replacing main-product.liquid file code
07:15 Skip any change to global.js file
07:40 Add base.css code to bottom of the file
08:30 Previewing product page with slider
Code: websensepro.com/blog/how-to-a...
If you want help with Shopify Customization, store development, or any other web development help. Contact us at websensepro.com/contact-us/

Пікірлер: 173

@WebSensePro 7 ай бұрын

kzfaq.info/get/bejne/ir2dldWcsMfbk2w.html - Tutorial Updated for Dawn 12.0.0

@Robin35745 5 ай бұрын

Your channel is underrated. Everything worked perfectly fine. Just had to paste the code for the base.css file because the product images were too big first. Thanks a lot and keep it up!!!

@WebSensePro 5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@user-mp9ni2jz8n 9 ай бұрын

You are genius. Thank you for very very easy step by step tutorial and sharing code.

@WebSensePro 9 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@hellohobro5165 8 ай бұрын

You are so smart! This video helped me a lot. Thank you so much!!

@WebSensePro 8 ай бұрын

Your wrlcome

@davidlaube1600 Ай бұрын

thank you soo much it looks so clean now!!!

@WebSensePro Ай бұрын

Great to hear!

@amsyarabqariamsyar5381 Ай бұрын

thank u sir...lovvvee itt😍😍

@idripGlitterx5 Ай бұрын

Thank you!!! You are a life saver!!

@WebSensePro Ай бұрын

Welcome!

@lailas8886 Ай бұрын

Thank you so much for this easy to follow tutorial!!

@WebSensePro 29 күн бұрын

You are so welcome!

@habossgaming5095 3 ай бұрын

That's literally awesome it's help a lot thank you so much.

@WebSensePro 3 ай бұрын

Glad it helped!

@habossgaming5095 3 ай бұрын

You can't imagine how much you help me thank you again

@WebSensePro 3 ай бұрын

Your welcome

@leandijoubert8815 8 ай бұрын

Please make an updated tutorial for Dawn version 11!!

@de.dreams 2 ай бұрын

still works like a charm! thank you

@WebSensePro Ай бұрын

You're welcome!

@user-cm6fc8fo2c 5 ай бұрын

Was really unsure of this...but it worked!!!

@WebSensePro 5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@juliakyriakou1621 11 ай бұрын

THANK YOU!!!

@WebSensePro 11 ай бұрын

You're welcome!

@infinite6441 Ай бұрын

Thanks mate really helpful

@WebSensePro 29 күн бұрын

Glad it helped

@bit-thor4030 11 ай бұрын

Thanks you!

@WebSensePro 11 ай бұрын

You're welcome!

@user-mi6pc7ls7j 11 ай бұрын

Thank you so much! It really helps! Can you also make a video about custom background for specific section?

@WebSensePro 11 ай бұрын

Sure thing!

@alaliajewelry8944 10 ай бұрын

@@WebSensePro Thanks sir But All products in the store appear 2 columns on top of each other

@zakiaggab649 9 ай бұрын

thanks a lot nice video

@WebSensePro 9 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@devanshvasant6136 11 ай бұрын

Hey, so I added the code and everything seems to work fine, except for the social links at the bottom of the navigation drawer are getting cut off because of the fixed position of the header, can you suggest a code to avoid that?

@WebSensePro 11 ай бұрын

Can't help without seeing the issue, contact us here websensepro.com/contact-us with details

@dougl4xx 2 ай бұрын

Hello, could you adjust it for the Impulse theme? I did the procedure in Impulse, but the images were flawed.

@WebSensePro 2 ай бұрын

I will try

@kanetheapbt6920 3 ай бұрын

@WebSensePro Is there a way when you click on a specific product variant (say color for example) it skips to the associated image in the slideshow? right now the slider works perfect but won't go to the right image as I'm picking the it in the drop down. Pls Help

@WebSensePro 3 ай бұрын

This feature is not yet available, will try to create an updated tutorial for that

@humzaameen 11 ай бұрын

In the Shopify Dawn theme, I'd like each slide in the slideshow section to have its own unique background color Scheme. Slideshow section layout is set at grid. Please make a video on it

@WebSensePro 11 ай бұрын

Cool idea!

@umernaseer8212 8 ай бұрын

thanks lot. you made it easy for us to implement and it worked. I have a question . the Foto is not changed with the color buttons. is there anyother script for this?

@WebSensePro 8 ай бұрын

Foto is not changed? Where

@crazyfish0582 4 ай бұрын

he means when you click on what colour you want on the product page the foto doesn't go the selected colour it just stays.@@WebSensePro

@Batmanpipi1997 6 ай бұрын

May I ask does it work in the Ride theme as well? Thank yoworksu.

@WebSensePro 6 ай бұрын

No it won't

@user-po6wy9lm4q 5 ай бұрын

This works like a charm, thank you! The only thing that happens is that the zoom function disappears. Is that something that could be fixed?

@WebSensePro 4 ай бұрын

Will fix on next update

@vivekrawat5164 5 ай бұрын

How To Make A Sticky Product Image While Scrolling In Dawn Theme? we are using your method of image slider but we need solution for my question also

@EsMirorr 5 ай бұрын

This is very nice

@WebSensePro 5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@XXGAMINGPROXYXX 9 ай бұрын

thanks bro

@WebSensePro 9 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@investmentproperties2798 10 ай бұрын

Thanks for the video! Everything works on the product page. However, all images are now broken on the Choose Options modal. Help, please.

@WebSensePro 10 ай бұрын

A little hard to help veryone individually on the comment section

@investmentproperties2798 9 ай бұрын

I understand...thanks for the content that you have provided!@@WebSensePro

@user-qg6jc2sl6q 10 ай бұрын

The slider works correctly but the inbuilt hamburger menu in dawn does not work.Some issue related to changes in global.js file .

@WebSensePro 10 ай бұрын

You were not suppose to change anything in Global.js if you are on Dawn 6.0.2+ versions

@tylerlonzie4610 5 ай бұрын

i dont see main product liquid file as an option might it be under a different name?

@WebSensePro 5 ай бұрын

kzfaq.info/get/bejne/ir2dldWcsMfbk2w.html please watch updated one

@melmendonca 2 ай бұрын

How Can a play icon be added on a video thumbnail. Using lexSlider, a jQuery plugin. Using Responsive theme by Out of Sandbox

@WebSensePro 2 ай бұрын

No idea about that theme

@gentlebrandsenkhuizen8637 11 ай бұрын

can u make a video of show size variants on collection page on dawn theme

@WebSensePro 11 ай бұрын

Sure, will create a tutorial on that

@user-md9ox5eq2n 4 ай бұрын

is there a way when you click on a specific product variant (say color for example) it skips to the associated image in the slideshow? right now the slider works perfect but won't go to the right image as I'm picking the it in the drop down. Also is there a way to change the color of the arrows?

@kanetheapbt6920 3 ай бұрын

Facing same issue...Did you get any fix??

@WebSensePro 3 ай бұрын

This feature is not yet in the code

@jcnation5393 11 ай бұрын

After some of the settings not working, like sticky Gallery , variants images etc. Can you help?

@WebSensePro 11 ай бұрын

Yes it's custom code which will make it stop working with some of the latest features added in Dawn 11

@user-wx7vd1di6t 7 ай бұрын

Hello! This is awesome, however the slider is too big and the images displayed are huge. Do you know how can I resize the product page slider? Thanks

@WebSensePro 7 ай бұрын

Checkout the updated tutorial here kzfaq.info/get/bejne/ir2dldWcsMfbk2w.html

@bohemianoop 2 ай бұрын

It works, but the code affects all other functionality for eg. colour and size picker and SKUs added. Everything gets wiped off as we replace 'main-product.liquid'. Is there a solution? Please advice.

@WebSensePro 2 ай бұрын

Team is working on updated code. Will update soon with a new video

@nav-unger 10 ай бұрын

Thanks a lot . Just have two problems coming up. First. I can.t ZOOM IN the Product picture anymore. Second: I I had a code for custom related products and it dissapeared. Any way to avoid this 2 Problems. Thanks in advance and keep going.

@WebSensePro 10 ай бұрын

Team is working on the updated version of this

@VIVEKZAKWALIA 9 ай бұрын

can you pls provide the code changes u did it in "Replacing main-product.liquid file code" Replacing complete file doesnt seem appropriate~

@WebSensePro 9 ай бұрын

You can try comparing the file using any IDE (code editor)

@amarhafiz5567 Ай бұрын

thanks it work on may 2024

@WebSensePro 29 күн бұрын

You're welcome!

@amiltonmoreira2341 3 ай бұрын

Hi. how can I maximaze the image by clicking on the slide?

@WebSensePro 3 ай бұрын

This feature is not in this tutorial

@frankie0404 4 ай бұрын

TY! Is it possible to style the arrows?

@WebSensePro 4 ай бұрын

Yes with some html and css code it can be done easily

@frankie0404 4 ай бұрын

@@WebSensePro how would I go about that?

@WebSensePro 4 ай бұрын

@@frankie0404 Learn some CSS, I have a playlist for Basic CSS if you want to learn

@DEBUGENTITY 9 ай бұрын

will this gonna work in CRAVE theme

@WebSensePro 9 ай бұрын

Nop its for Dawn theme only

@alimohammedelbadry7612 5 ай бұрын

You are genius.

@WebSensePro 5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@HydroBubbles 7 ай бұрын

Hi i followed instructions but mine didnt update, im using dawn 12 update, do i need to do your new tutorial from yesterday to make this work, please help

@WebSensePro 7 ай бұрын

Yes please follow the updated tutorial from the comments

@HydroBubbles 7 ай бұрын

thank you so much i will try again @@WebSensePro

@Thanks588 10 ай бұрын

the code is also working on dawn theme 11.0 but just one big major problem appear 'BUY NOW' button is not working, if I choose other variant on my product page the buy now button get disable and add to cart button show sold out option, can you tell me how can I fix this problem?

@Thanks588 10 ай бұрын

main-product.liquid file is not working properly or I say the code are not compatible or missing something from that the buy now button not working properly. I check with original code, the original code is working properly and after replace with customize main-product file the buy button is not working.

@WebSensePro 10 ай бұрын

You should be able to add block from Customize settings

@sroy9789 4 ай бұрын

Is there a way to show the images to the left of the main image instead of at the bottom?

@WebSensePro 4 ай бұрын

Not with this tutorial

@user-jl9br6bi6l 10 ай бұрын

I'd like to have this functionality for the Taste theme. Would these instructions work there? If not, perhaps you could make a video about the Taste theme, too :)

@WebSensePro 10 ай бұрын

It should work on Taste theme too

@user-jl9br6bi6l 10 ай бұрын

@@WebSensePro , thanks, I'll give it a try!

@abhishreejaiswal3160 2 ай бұрын

Hey, the carousel code works perfectly but it just glitches with the theme's color customisation. Im unable to change thee colors of the buttons and texts. This is the only problem I faced, rest the video is easy and nice

@WebSensePro 2 ай бұрын

Yes we are working on updated slider for Dawn 14

@TasheDME Ай бұрын

firstly, i want to thankyou for this code journey and this code is perfectly working for refresh theme also but after adding this code, when we select variant or color variant, then it is not changing product with select color. please help me

@TasheDME Ай бұрын

if we add that global.js file then variant works but after adding global.js file, slider does not work

@WebSensePro 29 күн бұрын

Please contact via websensepro.com/contact-us for paid support

@edmonddema6178 10 ай бұрын

does this work on other themes aswell?

@WebSensePro 10 ай бұрын

No it's only for dawn theme unfortunately

@LuvPenguins 6 ай бұрын

Hi can this code be used in Warehouse theme or is it only for Dawn?

@WebSensePro 6 ай бұрын

Its only for dawn theme unfortunately

@LuvPenguins 6 ай бұрын

@@WebSensePro thank you

@TheFoodHunters-SKB 5 ай бұрын

slm kindly setup imageslider with variant ke video bna dy kueky apny jo codes btay hn ospy variant ka sath pic nahi chage ho rahi slider ma .kindly help krdy

@WebSensePro 4 ай бұрын

Yes ye code support nahe karta variant ko

@user-sm9pj9jb6l 8 ай бұрын

Please please please make an updated tutorial for Dawn theme 11.

@WebSensePro 8 ай бұрын

Our team is working on it

@anetakostic 10 ай бұрын

Is this working for anyone on the latest version of dawn?

@WebSensePro 10 ай бұрын

Yes but few of the native functionality will not working if you want a slider like this

@yuvalbachar7721 9 ай бұрын

i tried it but it fucks up the buy buttons. after a choose a product its turning "sold out" and doesnt allow to buy. it happens in this video and in the last one of yours one year ago... im on dawn theme

@WebSensePro 9 ай бұрын

Hmm... will test more and release an updated version soon

@bilalisaq 11 ай бұрын

Please make another video on how to create a vertical slider on product page in Dawn theme

@WebSensePro 11 ай бұрын

Great idea, will try do that

@alexwillis2127 9 ай бұрын

Hi Bilal , Thanks for the Tutorial, I did it and it worked perfectly however as I change it to the size and colors , it shows the product sold out , Could you let me know how to fix that please?, many thanks

@WebSensePro 9 ай бұрын

Are you using Dawn theme if yes which version?

@alexwillis2127 9 ай бұрын

@@WebSensePro yes Dawn theme 11, which I believe is the latest version

@alexwillis2127 8 ай бұрын

Could you create a code which won’t block the add charts options? , everything works well however the code block add to chart and it is written sold out , I am using the new version of dawn theme

@PravinVasava-hn2pm 2 ай бұрын

Hello sir, after applying this code, cart drawer is not working properly, and swatches option icon also changed.

@WebSensePro 2 ай бұрын

Updated tutorial for slider coming soon

@ashwathgopu4775 Ай бұрын

I just did this...but my variant picker got changed to Dot selector from pills. Please Assist

@WebSensePro 29 күн бұрын

Please contact via websensepro.com/contact-us for paid support

@Anonymous-sb4ic 9 ай бұрын

everything works but in quick view of product image doesnt appears, i mean choose options button

@WebSensePro 8 ай бұрын

Yea it removes some of the core functionality

@InsecretOutlets 6 ай бұрын

can you please provide code to add slider for Featured product on Home page

@WebSensePro 6 ай бұрын

Sure, will definitely do

@eriksenescu8269 3 ай бұрын

This broke the "add to cart" functionality. When I click "add to cart" it no longer has the shopping cart drawer pop-out, nor does it update the bubble indicating the number of items in the cart. Can you let me know how to fix that?

@WebSensePro 3 ай бұрын

Which version are you using?

@eriksenescu8269 3 ай бұрын

@@WebSensePro So, I am using this on the "Origin" Theme version 13.0.1. Thanks for a quick response and your help here!

@eriksenescu8269 3 ай бұрын

I noticed it's also from the changes on the main-product.liquid file. I reverted it back (but kept all the other code changes) and the add to cart works again. I just can't seem to find exactly what broke the add to cart in the code I copied from your blog and pasted in that file. Happy to contact you directly if preferred but hoping to fix this ASAP. Thanks for a great tutorial, otherwise! Helped me a lot and hoping this can be an easy fix.

@MemorifyStore Ай бұрын

Can you teach us how to do it with Image Variant Swatches? Thanks

@WebSensePro 29 күн бұрын

Yes I can

@WebSensePro 29 күн бұрын

Please contact via websensepro.com/contact-us for paid support

@AbhishekVerma-gy6fn 2 ай бұрын

Code is working fine but after apply the code, i got error in add to cart button not working, count is not working, count is working after refresh please fix this error.

@WebSensePro 2 ай бұрын

Updated version coming soon

@tiendaijm Ай бұрын

genius!

@WebSensePro Ай бұрын

Thank you 😊

@juliakyriakou1621 11 ай бұрын

I just checked everything, it seems like if you have different options for your products, the pictures after you click the option dont appear. And for some reason its shown as sold out?...coding is so complicated

@user-cz7rz6kr9d 11 ай бұрын

I have exactly the same problem when on a garment you change the size it means that the item is sold out but in reality it is still in stock it's just a bug let me know if you find a solution

@WebSensePro 11 ай бұрын

Not seeing this issue on our end, is it happening in Dawn 11

@juliakyriakou1621 11 ай бұрын

@@WebSensePro i have dawn 10.0

@athirasaseendran573 11 ай бұрын

is it same for every theme?

@bit-thor4030 11 ай бұрын

@WebSensePro 11 ай бұрын

No it's different for different themes

@alaliajewelry8944 10 ай бұрын

@@WebSensePro All products in the store appear 2 columns on top of each other

@saadjr6807 4 ай бұрын

Bro this will effect in any updates

@WebSensePro 4 ай бұрын

Yes it will

@extra-qi3hm 2 ай бұрын

The colour scheme does not work for featured after this

@WebSensePro 2 ай бұрын

Yes, updated tutorial will be released soon

@alaliajewelry8944 10 ай бұрын

All products in the store appear 2 columns on top of each other

@WebSensePro 10 ай бұрын

That's weird, never seen issue like this

@cyberspider78910 9 ай бұрын

still not working for Shopify 2.0

@WebSensePro 8 ай бұрын

Which theme?

@coolshawn 11 ай бұрын

slider in product page with Selected Variant Images would be fine.

@WebSensePro 11 ай бұрын

Will try work on that too

@joshuablack5863 6 ай бұрын

Imagine that you have a store with a single product, and when you enter the store, the first thing is the product. How could I add a slider there?

@joshuablack5863 6 ай бұрын

Thank You So much!

@WebSensePro 5 ай бұрын

Code will need to be tweaked but we can use it on homepage

@user-xl1sv2xd5h 5 ай бұрын

You messed up everything.

@WebSensePro 5 ай бұрын

Did you duplicate your theme as per instructions?

@mmasoomali 5 ай бұрын

😂

@outletmarken_com 6 ай бұрын

I have strugles with image sizes there.. Is there a possible way to show the images down below the slider all in same size/shape without cropping each of them?

@WebSensePro 5 ай бұрын

Yes possible with some CSS Styling

@outletmarken_com 5 ай бұрын

@@WebSensePro please show us how