Home App Docs Blog Github

Custom Shopify Product Slider

Hi, I’m looking forward to creating a good Shopify product slider for one of the landing pages we’ve built. I’ve seen atoms PDP and love their slider, just a simple one with arrows for sliding and dots on the slider to display the image count. Is there any way to replicate that fast with less-code or code solutions?

1 Like

Hi @anagh!

To achieve this in Builder we would recommend either:

  1. Creating a custom liquid block and taking a collection handle and number of products to render as inputs.

  2. Use our collection block and change the “child layout” of the container to “scroll”. You can then adjust the styling as needed. If you would like to add arrows, like the example above, you can add these in Builder as images (or however else you’d like). You would then need to add a click action to the arrows so they scroll the width collection block.