How to incorporate a product slider into Shopify

New Member
2 0 1

Hi,

I'm trying to put something like this into one of my pages on my Shopify store:

http://bootsnipp.com/snippets/featured/carousel-product-cart-slider

or this:

https://codyhouse.co/gem/product-preview-slider/

and I wanted to link each slider with a collection. Is that possible? I tried to do similar things myself but the tutorials were quite confusing and at the end not specific enough to what I'm trying to achieve here.

 

Thank you 

 

Edit: I believe it's also worth mentioning that I am using the Simple theme. 

1 Like
Shopify Staff
Shopify Staff
93 0 12

Hey Axle,

Mike here from Shopify. It is always fun to try an integrate different code from different sources. In your example above, though I don't really get into the styling elements and tweaking of the code you provided I can a least get you started, with the codyhouse example and your simple theme :) If though you feel that this too is a little too technical then I would suggest reaching out to an experienced web developer or contacting one of our Experts. Https://experts.shopify.com if this is something that will be epic in your store ;)

So two things I am going to first download the source from codyhouse, as I don't want to recreated the js and css files if they all ready have them written. Then I will add those files to my assets directory on my simple theme. Like so:

https://screenshot.click/03-20-w5k6z-pdb0s.jpg

Next I look at my simple theme. With some simple right clicks of the mouse and using Google Chrome inspect element, I can trace back through the theme code where our slider will apply. It would appear featured-products.liquid and then into the product-grid-item.liquid to identify the individual based spot we want to make into a slider.

https://screenshot.click/03-24-reh1m-ew190.jpg

you can see in the above img that it addresses images, price, title etc with the various {{product..}} liquid code to populate the HTML. Alright, well I getting rid of all that, as the slider handles all that, but what I do keep is the surrounding gird item dev because it has been styled accordingly, so here is my updated code:

https://screenshot.click/03-26-iuccu-xguhw.jpg

So you will notice that I have picked the three images from the product itself.

that said, it should now look like this, (remember the styling will need to be addressed, this example is just to get you to a point where the slider works!!)

Here is a video of it working:

http://recordit.co/viglen1h7e

So implementing third party code is always something that you can do, but there is always things to consider, where it gets placed and if using scripts could it conflict and also the underlying responsiveness of your site could be effected too. But know that you can edit as such :)

Cheers,

-Mike A.

 

1 Like
Tourist
3 0 1

Hi Axle,

you can create this type of product carousel for your next eCommerce store. 

1 Like
Excursionist
14 0 0

Hi, I am using a debut theme, how could I incorporate this? where do I even start? Thank


@hiteshchauhan10 wrote:

Hi Axle,

you can create this type of product carousel for your next eCommerce store. 



you

0 Likes