How to list Shopify store products on Webflow?

Hi there! 🤓

Another article today to share knowledge and make some faces smile about Shopify and Webflow integration. We’ll briefly talk about the step-by-step integration system here:

Login to the Shopify panel of your shop, search for “Buy Button” and click on the result that pops up:

Click on Product Buy Button and select any product.

The Customize screen allows basic styling but to make an advanced styling; we have to interfere with the code:

If we choose to go with the Basic view, it’ll only show us the “Add to cart” button of the product, and we’ll integrate it with our Webflow shop while doing that, we should manually put in the other relevant information we want (description, visuals, pricing) on CMS.

If we were to select the “Full view,” which is another view option, this would save us from making manual changes and offer us the Product name, price, add to cart button, description and image as an outcome.

The fundamental difference in that selection is: that we generally choose the “Basic” option to structure and style the design more freely.

We’ll get our buy button code after we make the fundamental customizations. Turning back to Webflow, We build on a new CMS that includes a product id field to integrate the embed code to CMS.

Then we add a new product to this CMS list.

To find the product id of a specific product on Shopify, we can take a look at the URL address, for instance:

Also, we need to make sure that we open our product to Buy Button from the field SALES CHANNELS AND APPS.

We take the id “7114945986733” here and write it on the product id field of the product we’re going to add.

We create the product.

We paste the code on the Embed element and turn it back to our embed code to match CMS tags to related fields.

The red-marked “HERE” fields below must be changed with the CMS field*

The result should look like this:

to put it most simply, matching Webflow and Shopify via the buy button is done like this. From now on, each product we’ll add to CMS will be listed automatically with Shopify with the help of the product id.

Fundamentally this method serves our needs well, but we may still need to fix issues and styles.

Now we have a screen like this.

Let’s say that we have some more requests.

For instance, the cart icon only appears on the products page, and we want it to appear on all pages. In this case, we need to paste the buy button embed code into a symbol element we use on all pages, erasing the fields we integrated with CMS.

We apply the style features to the visual.

And our cart button will be visible on all pages.

Later, when we want to replace the cart icon, we need to write some CSS codes on the head. For example, let’s place our cart icon on the left side of the GET STARTED button, make it black, and reshape the counter.

And some of the codes we need to change/write into the buy button embed code and the embed code we added inside the Symbol.

The related fields are ought to be changed by searching ‘toggle’ inside the embed code in order to change the background color and reshape the counter.

The outcome will look like this:

Now let’s make some styling changes to the cart!

The default view:

Normally, the styles applied should’ve been as in toggle, but they are not applied even though we wrote importantly. The reason why is that the Cart section is iframe. We have to close the iframe property on the buy button to let the CSS settings we make on the cart be applied.

Turning back to the code on the buy button, we search for “cart” and add the code “iframe”: false

Adding this code will disable all styles on the cart section, so we must add the code to the head. This code will bring back the fundamental styles of our cart, and we’ll be able to write code on and style the cart.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@shopify/buy-button-js@2.1.8/src/styles/embeds/buybutton.css">

‍

After making some CSS edits the result should look like this:

That’s all, folks!

Let us know what you think if you try it!

Hope you can benefit from this as we do; we’re planning to keep this series going, so you’re always welcome to make suggestions or visit earthr.co to reach out about anything!

Also, if you want to review our work with Webflow and Shopify, rate us on Clutch.co! 🤓

Have a great and bug-free day y’all! ✌️

‍