Add a box block inside of the carousel block (to avoid running into any issues, drag and drop the box block below the carousel layer in the layers tab). Add any content needed into the box block (e.g. text, images)
I want to pull the data from Shopify. I want Product Images in my Product Boxes to be able to slide manually to the right (or automatically change images) and see all the images available for each product.
What URL am I supposed to add to the API data source to do this?
Also, how can I get Product Image boxes to show my vertical product images without fitting them into a square box and making them smaller?
@mala Thanks for those details! If you’re wanting to display product images inside of a product box, you don’t need to connect an API data source. Instead, follow steps 1-4 (with the carousel within your product box). Then, select your image you added within the carousel and navigate to the data tab. In the Repeat for each section, paste in state.productInfo.images. Lastly, add a new binding to the image block to get Image from return state.imagesItem.src;.
Once you have your product images inside of the carousel, you can select the carousel layer and turn autoplay on in the options tab so the images rotate.
Your images likely have an aspect ratio applied in the show advanced section of the options tab, you can change the aspect ratio to 0 to not force the image to maintain it’s aspect ratio. You can also play around with the background size and position. Let me know if this gives the desired outcome!
Hi there! I’d like to have a product carousel for each product on a collection page. I have tried the above suggested solve but it appears to be for a single product page. Guidance would greatly be appreciated!
That’s cool but not quite the effect I am going for. I would like for each product in an entire collection to have an option to scroll through the alternate images for those products. I can’t find an example of this and I imagine the finished look might not be quite what I am envisioning in my head but would like to see it so I can at least write it off as an option if it is possible, of course
Hi @holli, thank you for clarifying! I added an example of this to this page for you. I created this by adding a new collection block from the insert tab, adding a new carousel inside the repeating product box, set the carousel to use children for slides, and added a new box inside the carousel. I set the box to repeat for each state.productInfo.images and then added an image and an element binding to bind the image to the state.imagesItem.src.
You can link the image to the product page by adding a new element binding to the image in the data tab so that you get the Link URL from the code below:
I was thinking maybe on mouseLeave of the Carousel layer it can return to the first image or I’m not sure if it is possible to add a 5-10 second delay in that action?
You can add an on-mouse-leave event to the carousel and use a setTimeout function to do this, but you will have to use some custom code in that function to make the carousel go back to the first slide.
