Shopify Buttons in Dynamic Lists in Tabs

I’m embedding Shopify buttons to my Webflow site using Dynamic Lists.

I have a page* with three tabs, each with a Dynamic list in the tab panes. The lists are filtered using a dropdown field in the product collection.

Here’s that page:* http://artsbr.webflow.io/get-involved/become-a-member

The product collection has 4 categories: Name, Product Handle, Product ID and Membership Category

The Name is simply a title.

The Product Handle is a field that I was told that I needed based on the Shopify+Webflow tutorial but I think it might be outdated. Here’s that video if you’re curious but I don’t think it’s relevant to my problem: How to dynamically integrate Shopify products into your Webflow CMS | Webflow live stream

The Product ID is a dynamic field in the Shopify Embed Code Block in the Dynamic List so the Dynamic List will display each unique Product.

The Membership Category is a dropdown field that allows me to filter the Dynamic List in each tab by category.

Here’s the part where I’m having trouble: In the Webflow Designer the lists are showing the correct number of products in each tab (which means the category filter is working), however, when I publish the site, all of the products are showing up in a single list in the first tab (I think it’s an issue with the Shopify code).


Here is my public share link: LINK

Hello, @JacobJolibois

It seems that Shopify changed their code for buy-button and now it is different now the one that was when Nelson been showing the tutorial.

But there is still a solution :slight_smile:

In the code snippet from Shopify you will see the ID of the element, where script will apply all information about the product:

Same id you will see a little bit further inside the script:


Since right now all your dynamic elements using this same ID, when the page with products is loading Shopify script renders all products in one place.

For fix this issue you will need to make that ID - unique. So all you need to do is change that ID number on one of the dynamic fields that is unique for each product (product-ID, name, slug, etc.). Then Shopify script will dynamically create separate divs for each product and will not mess it all in one place anymore :slight_smile:

P.S. I used Name field in this example, but then I saw that it may contain few words and spaces sometimes. So, I would recommend using slug or product-id fields instead for avoiding breaking the code structure.

Best regards,
Anna

Thank you so much!! It worked perfectly =)

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.