Automating State Setup for Dynamic Product Carousel Changes
Hi, how can I setup States automatically? I want the products in a carrousel to change based on the product shown in the landing page?
Hi Miguel! We have a doc here on how to configure product carousels to automatically scroll to the selected variant: https://support.replo.app/articles/1751373956-how-to-automatically-scroll-a-product-carousel-to-the-selected-variant's-featured-image Is this what you're asking about?
Hi Carissa, yes buit that’s a bit convoluted for me,I have been trying with the replo team on chat but i can’t figure out how to trigger the state changes in content yet
what issues specifically are you running into? would love to help debug this for you. mind sending screenshots or loom recordings?
sure, will DM you
Miguel Tokumoto do you mind sending the info here? Any reason you can't share it publicly? This is a place were the community comes together to help one another 🙂
Fair enough, here is the recording: https://www.loom.com/share/73570a4923f94c6b9d136168b23bd30f?sid=b3ccc140-7bb6-49ac-a2df-f3dd1152c188
got it. can you send me the dashboard link?
do you want the carousel to only show 3 items when the template product is not one of the selected products in the states?
I’ll explain: Each coffee has 4 variants, for example Molon Labe has 4 variants:
Drip
Whole Bean
French Press
Cold Brew
But also I have 2 product categories, Signature Blends (Molon Labe, Spartan Up, Tough and Strong, Darkest Hour and Seize Your Morning) and Single Origins (Colombia, Ethiopia, Sumatra, Guatemala and Costa Rica). What I want is that, for example, if I am in the Colombia Drip product page, the carrousel shows me the other Single Origin Drips (Sumatra, Guatemala, Costa Rica and Ethiopia). Or if I am at the Darkest Hour Cold Brew product page, carrousel shows me Signature Blends Cold Brews. So the carrousel needs to match the variant and product category in order to show the products.
ahh okay im seeing the issue now. for some reason, the correct states only show in preview mode or on the live page. https://www.loom.com/share/c9c5170365d144288f3df91635996c90?sid=c7f2e4f0-377e-4c8a-9ba7-b180ca6bca76
Oh the way I would do this is instead of having a different state for every product, you can just have one product container, 1 for each of the products you want, and then use a state to hide the specific product associated with the product you're viewing the page with. Does that make sense?
Hi Steve Schlaefer can you explain this further? I don’t follow
thanks Carissa Cui! I don’t understand the hover state, I see the product changes, do I need to set that up manually too?
Miguel Tokumoto so let's say you have five products, 1-5. And you have the same Product Template assigned to all of them. So at the top you have a buy box where you're trying to sell the main product (dynamically referred to as the "template product"). And at the bottom you have a section like you do where you'd like to have the other four of the products displayed. So a simplification of the way your page looks is:
product buy box for say product 3
section showing off products 1, 2, 4, 5
So the way I'd build the bottom section is actually make one product component for each product, and then have a state on that component that and use that state to hide (with visibility settings) the container if the Template Product = that product. That way that section would always have 1-5 in it, but (as in the example above), if the template product was 3, then the container for 3 would be hidden, leaving only 1,2,4,5. Does that make sense?
quick loom on steve's suggestion: https://www.loom.com/share/2141435f0a5f41c39a229f2873d25592?sid=1b3c8d01-f812-4466-ba10-3d2979bd9dc4 🙂
thanks Carissa and Steve, I’m gonna test that
Hi Carissa Cui and Steve Schlaefer, I have tried the solution here but it seems not to be working https://www.loom.com/share/b43250b69ebe4d4fb1ca418cf82bb729?sid=1f680c1f-663a-4d98-ae63-7e98db8eeaab
Hi Miguel Tokumoto seems like maybe you're setup is a bit more complex than we originally thought. Do you mind passing me the preview link of the page so we can take a closer look? So this would be either the live site URL or the preview URL (either way it should start with your Shopify store's URL)
Hi Miguel Tokumoto did you change the setup on this page substantially? I'm not seeing exactly how you tried to configure this with states and it looks like the reason you're seeing the carousel as all white space is because you've completely hidden all of those slides? Maybe I'm just not seeing the configurations you made? Also, looking at your product schema, I want to clarify that you're actually talking about 20 different products. So you have:
2 categories of high level flavors Signature Blends & Single Origins
Each category has 5 flavors, so in total 10 -> Molon Labe, Spartan Up, Tough and Strong, Darkest Hour and Seize Your Morning, Colombia, Ethiopia, Sumatra, Guatemala and Costa Rica
Each of these 10 flavors has 4 different styles or form factors -> Drip, Whole Bean, French Press, Cold Brew
Notice how I didn't use the word "Variant" as this means something very specific in Shopify. So this means you have 10*4=40 total products which will be over the limit of 20 for Shopify Pages / Product Template. Not that we can't work around it, just making sure that's understood early. The nice thing here is if you just do 1 Product Template (or Page) for each Category (Sig Blends or Single Origin), you'll be at the 20 product limit! All good! Maybe on each of those pages / PDPs you could have a section that calls out "Try our other category" that links to the other page or something? Ok back to the issue at hand.
What I want is that, for example, if I am in the Colombia Drip product page, the carrousel shows me the other Single Origin Drips (Sumatra, Guatemala, Costa Rica and Ethiopia). Or if I am at the Darkest Hour Cold Brew product page, carrousel shows me Signature Blends Cold Brews.
I do think this is possible with states, but it's a bit complex and tedious to setup/test. Here is what I'd do where what I'm gonna describe here is simplification of the Tree Structure I'd put together. - Carousel - Carousel Slides for Drip -> Here I'd have a state that hides this component IF the template product is NOT a one of the 5 Drip products - Slide for Product x5 - Carousel Slides for Whole Bean -> Again state that hides this component IF the template product is NOT a one of the 5 Whole Bean products - Slide for Product x5 - Carousel Slides for French Press -> Again state that hides this component IF the template product is NOT a one of the 5 French Press products - Slide for Product x5 - Carousel Slides for Cold Brew -> Again state that hides this component IF the template product is NOT a one of the 5 Cold Brew products - Slide for Product x5 NOTE here everywhere i have Slide for Product you should use a Product Container that has an "Invisible" state that hides the component IF the template product IS that product. This product component will be repeated several times so I'd make sure you get it completely correct before duplicating it 20 times (or else you're doing a lot of extra work). Once you make 20 of them, 5 for each Slides component, it's just a matter of making sure the configure product on that Product Container is correct AND the "Invisible" state is configured with the right product. So the goal of the states on the Slides level is to hide all the other carousel not relevant to the Coffee Style (Drip, etc). The state config at the individual slide/product component level is just to hide the product that's in the main buy box at the top of the page (the "Template Product"). When I talk about "visibility" I'm talking about this setting Final note. I'd probably start over with this carousel section wrt to implementing the above logic. My assumption is starting from scratch will be easier than undoing the complicated setup you have here. Hope that helps! happy building!
Hi Steve Schlaefer that sound like a great idea. I’ll be checking that, and how to set the visibility setting. I have one question, does this setup makes the page slower?
Miguel Tokumoto almost certainly yes it is. Really any complicated mechanism (Replo or other) is going to increase JS load and make the page slower. Kinda no real way around it, it's near thermodynamic law of universe stuff. Basically complexity isn't free. That said, it probably won't completely kill your page speed and so it's a tradeoff question. Is the functionality you're looking for worth the speed hit. Another way to reduce complexity here might be to stand up a different Product Template for each Style and Category of coffee. So have 1 PDP for:
Sig Blend Drips
....
Sig Blend Cold Brew
Single Origin Drips
....
Single Origin Cold Brew
(that's a total of 8 PDPs) This would allow you to reduce the complexity on the page and improve page speed.
That sound good. Gonna try it