Shopify.. embedding product collections via buy button

Has anyone had any success integrating the buy button with collections instead of a single product? Does it works with the webflow cms? If not, I’mm wondering if one can just add it as additional code without going the cms route. I’m just trying to figure out a way to have control over the styling of a group of products on one page.

Although I love the idea of using webflow ecommerce, the instagram/fb integration is key for me as a fashion accessories offering. Unfortunately, fb is a necessary evil as the instagram sales channel is important for my business.

Hey Lynn

I am actually also working on trying to get the Shopify Buy Button to work with Webflows CMS. I think I have a good solution, but still testing it out. Using this will probably only make sense if you need to have more dynamic data in the CMS than Shopify offers. If you get all the data from Shopify, then the collection buy button is probably better.

Can you send your read-only link so I can see if this will work on your project as well?

David

Hi David, thanks for your reply. That makes sense about the dynamic data. My goal is to have shopify as my main product portal, so I hear you on the fact that the collection button might be better. I guess if I go with a collection button then there’s no need to connect to the webflow cms. I’ll give it a try and see what happens.

Btw, have you gone into the buy button javascript? Thinking that may be where I need to mess around next.

Here’s my read only link.

https://preview.webflow.com/preview/lynnpaik?utm_medium=preview_link&utm_source=designer&utm_content=lynnpaik&preview=baddef199b7543d71c60d1510b3569a7&mode=preview

Lynn

1 Like

Yes, I am trying to make the javascript more clean and easier to manage. :smiley:

If you want a quick workaround, you can just add a dynamic field for the product component at the end of the node object:

BEFORE

AFTER

2 Likes

Amazing! Thank you! I’ll give it a try. Please keep me posted on the javascript end, I’m sure there are a lot of people out there that would be interested in what you’re doing.

I’m going to turn off my read only link for now. My styles are a mess, so I have style shame. :wink:

1 Like

Thanks David! It worked. It still needs to be styled but I have more than one product per row now.
Screen Shot 2020-12-02 at 3.30.38 PM|690x338

I’m just going to reply to my own thread on the chance that it may help someone else searching the forum. Anyway, based on David’s first reply, I decide to give the product collection embed a try and I’m pretty happy with it. I tested it out by resizing the photos natively in shopify and the information is dynamic.

I’m also able to contain the product collection in a div, which allows me to control where it appears on the page and theoretically have more than one collection on a page (haven’t test this out). The product grid is responsive and the styling of the components are pretty straightforward in the embed code. Here are desktop and mobile screenshots showing a product collection embedded in a section with a heading centered above.

1 Like

This looks great Lynn!
I am trying to the same - use a Shopify collection instead of a Shopify product Buy button. And be able to style it as I like (like you did).

Could you explain how you did this ?:wink:

Thanks! Chris

Hi Chris, if I remember correctly, it was pretty straightforward on the Shopify end. First, you need to create a collection with more than one item in Shopify (this is impt. as you are no longer relying on Webflow cms). After that, you generate the button. Shopify gives the user the option of generating a buy button for an individual item or a collection, choose the collection and then proceed as usual in terms of integrating the button into Webflow.

Hope that makes sense!

Good luck.