CMS Slider with exclusions ('You may also like' Product Slider)

Design help Ecommerce
1

Wasn’t sure whether to list this under CMS or Ecomm. I guess it’s both.

Simply, I need to add a section slider to show recommended products at the end of each product page(without showing that same product or duplicate products within the slider. You’d think this would be quite simple. Not so(or as far as I can see).

Add a basic slider (as per below). No problems. Linking it up to CMS with exclusions or any duplicate products. Problems.

The problem arises when simply attempting to show additional products on a slider, excluding the product they are on (easy enough, add exclusion of that product). However, you can’t put a whole CMS collection in one slide, it mucks up the animation. You can’t put one CMS collection in each slide (showing one cms item) into each slide either, this causes duplicate products to show (as they don’t communicate).

How do I integrate the CMS into a slider, with the exclusion of the product on that page, but also, showing more than one of the same product as a suggestion?

I think this topic has been debated and there is a CMS custom slider due to be built(by 3024!)
https://wishlist.webflow.com/ideas/WEBFLOW-I-94

On another site builder there is a ready made solution to this. Webflow, takes weeks to figure out a work around! :face_with_monocle:

Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

2

The native slider component doesn’t play well with the CMS. The answer is to use a custom code library, like SwiperJS.

Add a collection list to the product page. Filter it to not include the current product. Then implement SwiperJS on that collection list. Here is a video tutorial on how to use SwiperJS in Webflow.

3

Hey there! Thanks so much for your reply. I don’t think anything works well with WF components.:roll_eyes: First chance I’ll have to try and implement will be this Saturday so I’ll give it a go and let you know the results. However you may have just saved the day!!:grinning:

4

Does anyone know how to use ‘CodeSandbox’? For those who don’t develop this becomes an absolute nightmare! For a fairly basic task and slider this gets really silly. Why o’ why doesn’t webflow compose a basic ‘CMS Slider’! They give us now the option to change our designer from black to white, yet 7yrs on they can’t get the fundamentals right like a basic slider for cms! Thanks WF! Awesome job! :+1:t3:

5

If anyone’s interested in the outcome and having the same problems. This to me is by far the easiest to create as well as best functionality. It’s by weblocks. So easy to install.

Thanks folks! Hope this helps anyone from going through the same pain and hard work I did to get a simple slider to work! Also it works perfectly with exclusions. HAPPY DAYS!!!

1 Like