Help Needed: Creating a Shopify Product Slider with Builder.io and Next.js

[iletti]

Hi everyone,

I’m fairly new to Builder.io and Next.js and currently setting up a store based on Shopify. I’ve hit a roadblock and could use some guidance.

I’ve been working on creating a product slider for my site using Builder.io’s carousel feature and integrating product data from Shopify. While I’ve managed to successfully bind the title and description text from the product data, the images are proving to be a challenge.

Here is where I stand:

• I’ve tried various paths to bind the image, such as state.productItem.type.fieldBaseTypes.images, state.productItem.type.fieldBaseTypes.images.edges[0].node.src, and state.productItem.data.images[0].src.
• Unfortunately, none of these paths seem to work, and I’m unsure how to proceed.

Is there a recommended method to retrieve and display product images using data binding in Builder.io, or is there another approach I should consider?

Ultimately, my goal is to create sliders for collections, displaying all products within a single collection as showcased in the example below.

I’d appreciate any help or pointers on how to achieve this.

[manish-sharma]

Hello @iletti,

I’ve tried state.productItem.images[0].src or state.productItem.images[1].src which seems to work fine, please give that a try and let us know how that works for you.

Additionally, if you want to show 5 slides in a row then you can set Responsive option ‘Slides to show’ and ‘Slides to scroll’