Add To Cart button – Support Center Home

Topics in this article

Add To Cart button in normal Pages

Add To Cart button in CMS Pages

Add To Cart button in normal pages

Create a Div Block.
Place a Text Block and other elements you wish to have in the Div Block and style it.
Add a custom attribute to the Div Block with the following values:
- Name: Product
- Value: The Product ID (Product ID of the Shopify Item - How to get the Product ID)

Add a Div Block (Do not use Link Blocks for normal pages)

Add Attribute (Name: Shopify, Value: Buy)

Add To Cart button in CMS pages

Follow these steps

Create a CMS collection in Webflow, or use a collection you already have.
Create a Link field in your CMS collection (You can more fields to your collection as well, but create this field only for the Shopify product ID's).
- You do not have to give a specific name to the Link field, just name it something that you remember, so you can use in the design e.x.Shopify Product ID.
Create a collection item for each Shopify product that you want to add to your site.
- Now that we have a Collection with a field for Shopify product ID's, you can create a new item for each new product you add to your Shopify backend and add it's Product ID to the product ID field.
Add a Link Block in your collection Template-page, or in the Collection Items.
- Template Page is the page that is automatically created by adding a collection, in which you can have a unified design for all your items.
- Collection Item is the item in a Collection List when you add a Collection list to a page.
Select the Link block, then open the Element Settings (D) panel.
Under the Link Settings, select the checkbox for Get URL from, and select the Shopify product ID

To get a Product ID in Shopify:

1. Login to your Shopify account
2. Go to the Products panel
3. Click on the product you want to have its ID and the product's page opens.
4. Copy the Product ID from the address bar. The ID is the last part of the URL.