Install tokwork in Shopify

Add tokwork to your Shopify store to turn customers into brand advocates.

Installation Steps

Step 1: Access Theme Editor

1. Go to your Shopify admin
2. Click Online Store → Themes
3. Find your active theme
4. Click Actions → Edit code

Step 2: Edit theme.liquid

1. In the left sidebar, under Layout, click theme.liquid
2. Scroll to the bottom, just before the closing </body> tag
3. Paste the tokwork script:

<!-- tokwork Widget -->
<script async src="https://js.tokwork.com/loader.js" 
  data-website-id="YOUR_WEBSITE_ID" 
  data-website-domain="{{ shop.domain }}">
</script>
</body>

Step 3: Save Changes

1. Click Save in the top right
2. Your changes are now live!

Alternative: Using Shopify App (Coming Soon)

We're building a Shopify app for even easier installation. Stay tuned!

Where the Widget Appears

The widget will automatically appear on:

• ✅ Homepage
• ✅ Product pages
• ✅ Collection pages
• ✅ Cart page
• ✅ Blog posts
• ✅ All other pages

Verify Installation

1. Visit your Shopify store
2. Open browser console (F12)
3. Check for: ✅ tokwork Widget loaded successfully
4. Look for the widget popup

Using Liquid Variables

Make your installation dynamic:

<!-- tokwork Widget with Liquid -->
<script async src="https://js.tokwork.com/loader.js" 
  data-website-id="YOUR_WEBSITE_ID" 
  data-website-domain="{{ shop.domain }}"
  data-shop-name="{{ shop.name }}"
  data-currency="{{ shop.currency }}">
</script>

Conditional Loading

Load only on product pages:

{% if template contains 'product' %}
<script async src="https://js.tokwork.com/loader.js" 
  data-website-id="YOUR_WEBSITE_ID" 
  data-website-domain="{{ shop.domain }}">
</script>
{% endif %}

Load everywhere except checkout:

{% unless template contains 'checkout' %}
<script async src="https://js.tokwork.com/loader.js" 
  data-website-id="YOUR_WEBSITE_ID" 
  data-website-domain="{{ shop.domain }}">
</script>
{% endunless %}

Shopify Plus - Custom Checkout

If you're on Shopify Plus and want the widget on checkout:

1. Go to Settings → Checkout
2. Scroll to Order Status Page
3. Add the script in Additional Scripts:

<script async src="https://js.tokwork.com/loader.js" 
  data-website-id="YOUR_WEBSITE_ID" 
  data-website-domain="{{ shop.domain }}">
</script>

Common Issues

Headless Shopify

If you're using Shopify as a headless CMS:

1. Follow the installation guide for your frontend framework
   • Next.js
   • React
   • Vue.js
2. Use your storefront domain for data-website-domain

Performance

tokwork is optimized for e-commerce:

• ✅ Async loading (no impact on checkout speed)
• ✅ CDN-delivered for fast load times
• ✅ No impact on Shopify's page speed score
• ✅ Works with all themes

Best Practices

• Install in theme.liquid for site-wide coverage
• Use {{ shop.domain }} for automatic domain
• Test in incognito mode after installation
• Monitor widget performance in dashboard

Next Steps

• Learn basic usage
• Explore other platforms