Docs
Free ON WEBFLOW.IO DOMAINS

Tiktok Integration

Integration
Integrate Tiktok with your Shopify store in Webflow

Shopify Storefront data and cart logic is bound to your Webflow elements through Shopyflow attributes. Connecting your Webflow site to Shopify is done by adding custom attributes to your Webflow elements.

Yet, you are not required to type or edit attributes manually. Shopyflow provides you with the pre-configured components needed to create your store, as copyable Webflow elements right in Webflow designer.

All the copyable Shopyflow Components are native editable Webflow elements. There is no layout or styling limitation on any element.

In the below image hover your mouse on the hotspots to see all the required Shopyflow attributes to build a product page like this in Webflow

Webflow designer
Custom Attributes
sf-add-to-cart="1"
Custom Attributes
sf-change-quantity="1"
Custom Attributes
sf-change-option="{Option Name}"
Custom Attributes
sf-cart-count="1"
Custom Attributes
sf-change-option="{Option Name}"
Custom Attributes
sf-product="{Product ID}"
Custom Attributes
sf-show-image="1"
Attribute Name
Attribute Value
True or 1
Nesting Rule
Can be placed anywhere in the site
No items found.
Tiktok Integration
Method

TikTok offers a unique platform for Shopify store owners to reach a younger, highly engaged audience through short, creative videos. It’s a powerful tool for viral marketing, helping brands increase visibility and connect with potential customers in a fun and engaging way. Follow this guide to learn how to track Tiktok events in your Webflow site.

IMPORTANT: Available only in Shopyflow version 1.0.3 and above. Make sure you update your Shopyflow version both in Webflow and in Shopyflow Dashboard.

  1. First off, we need to enable Tiktok Pixel in Shopify. Go ahead and install the Tiktok Shopify App.
  2. Next, we need to enable Tiktok Pixel in Webflow. Go ahead and paste the Tiktok Pixel code you got from Tiktok Ads Manager into Webflow page settings, in head code. If your site has to be GDPR compliant, you need to delay loading Tiktok until your customers give their consent. You can achieve this by using a solution like Finsweet's cookie consent.
  3. Make sure you are using the same Pixel ID in Shopify and in Webflow. Find your Pixel ID in the code snippet you pasted in Webflow (see image below) and change it with your Pixel ID Shopify (usually 20 characters long. e.g. CP234SBP71UELKHAP9F0).
  4. After the change the line in Webflow should look like this containing the Pixel ID from Shopify: ttq.load('CP234SBP71UELKHAP9F0');
  5. Finally, go to Shopyflow Webflow App > Installation > Advanced Tracking and enable Tiktok.
  6. Publish your site.

Once the site is published, Shopyflow will start tracking the following Tiktok events:

  • View Content
  • Add to Cart
  • Remove from Cart
  • Initiate Checkout (via Shopify in checkout)
  • Add Payment Info (via Shopify in checkout)
  • Purchase (via Shopify in checkout)
Class name
Target elements
Can be placed anywhere in the site
No items found.

Webflow app usage

Webflow app settings

Inner components

Module contents

Available methods

No items found.

Integration

contents

No items found.

State management

No items found.

Related Utilities

No items found.
Can't find a solution? Join our Discord server to get an instant reply from our experts and the community.