1
Get your API key
Your API key authenticates every call to the TRIKERA engine. Copy it and keep it secure — paste it wherever you integrate.
Loading your keys...
2
Upload your product catalogue
TRIKERA needs your products to build routines. Upload a CSV — one product per row. Download the template to get the format right first time.
↓ Download CSV template
Drop your CSV here or click to browse
product_name, pillar, category, ingredients, concern_tags...
3
Fire your first routine
Verify the engine is building routines from your catalogue before going live.
4
Add TRIKERA to your storefront
One script tag drops a fully interactive routine builder onto any page. Your customers build their routine and add the whole thing to cart in seconds.
Product Catalogue
Loading products...
Installation guide
Choose your platform. Follow the steps exactly as shown — no coding required. If you get stuck, use the Send to Developer tab to forward everything your developer needs.
1
Shopify Admin → Online Store → Themes → Customize
In your Shopify dashboard, click Online Store in the left sidebar, then Themes. Click Customize next to your live theme.
Home
Orders
Products
Online Store ▾
Current theme
Dawn
Version 14.0 · Live
Customize ← click here
2
Navigate to your Product page, then click + Add section
In the Theme Editor, use the page selector at the top to choose Products → Default product. In the left panel, scroll down and click + Add section.
Sections
Header
Product info
Image gallery
+ Add section← click
Footer
🧴
Hydra Boost Serum
$68.00
When the section picker opens, search for Custom Liquid and click it. This adds a blank code block to your page.
3
Choose your pillar, copy the code, paste it into the block
Select which pillar matches your products below. Your code is pre-filled with your API key and brand name. Copy it, click the Custom Liquid block in the Theme Editor, and paste into the text area.
Your pillar:
► Custom Liquid
Liquid code
<div id="trikera..."></div>
<script src="..."
data-key="trkr_...">
</script>
<script src="..."
data-key="trkr_...">
</script>
↑ paste here, then Save
4
Add a second Custom Liquid block for the cart connector
Click + Add section again, add another Custom Liquid block, and paste this. This makes the "Add Routine to Cart" button work with your Shopify cart automatically.
{%- comment -%} TRIKERA cart connector {%- endcomment -%}
<script>
document.addEventListener('trikera:add-to-cart', async (e) => {
const items = e.detail.product_ids.map(id => ({ id, quantity: 1 }));
await fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items })
});
window.location.href = '/cart';
});
</script>
Click Save in the top right of the Theme Editor. Done. Visit your product page in a new private/incognito window to test it.
✓ Shopify installation complete
Test by visiting your product page in a private window and tapping "Build My Routine". The widget should appear, build a 4-step routine from your products, and add everything to your Shopify cart on tap.
Any issues? Email your account manager with a screenshot of where you got stuck.
Any issues? Email your account manager with a screenshot of where you got stuck.
Recommended: Install the free WPCode plugin from the WordPress plugin directory first. It lets you add code without touching your theme files — much safer and easier to undo.
1
WordPress Admin → Code Snippets → Add Snippet
After installing WPCode, go to Code Snippets → Add Snippet in your WordPress sidebar. Choose HTML Snippet. Name it "TRIKERA Widget".
2
Paste the widget code and activate
Copy the code below and paste it into the snippet body. Set location to Before </body> tag. Toggle Active. Click Save.
3
Add a second snippet for the cart connector
Create another HTML snippet called "TRIKERA Cart". Same settings. Paste this code.
<script>
document.addEventListener('trikera:add-to-cart', async (e) => {
for (const id of e.detail.product_ids) {
await fetch(`/?add-to-cart=${id}&quantity=1`);
}
window.location.href = '/cart';
});
</script>
✓ WooCommerce installation complete
Test by visiting your storefront in a private window and building a routine. If the widget does not appear, check both snippets are toggled Active in WPCode.
1
Open your website's page editor or HTML file
Find where you can add custom HTML or code on the page where you want the routine builder. In Squarespace this is a "Code Block". In Wix it's "HTML iframe". In Webflow it's an "Embed" element.
2
Paste the widget code
Copy the code below and paste it into the code area. Your API key and brand name are already filled in.
3
Paste the cart connector below it
Paste this into the same code block, immediately after the widget code. Edit the last line to match how your platform adds items to a cart.
<script>
document.addEventListener('trikera:add-to-cart', (e) => {
// e.detail.product_ids = array of your product IDs
// Replace the line below with your platform's add-to-cart logic
console.log('Routine products:', e.detail.product_ids);
});
</script>
Not sure what to do with the cart connector? Leave it as-is for now — the widget will still build and display routines. You can connect the cart later. Send the code to your developer when you're ready.
Copy this message and send it to your developer, web agency, or Shopify expert. Everything they need is included — no back-and-forth required.
What your developer will do: Add two small code blocks to your storefront — one renders the widget, one connects it to your cart. Under 30 minutes for any developer familiar with your platform.
All embed codes
Your API key
Your full API key was provided when your account was activated. If you need a replacement key, contact your account manager.
API Keys
—
Calls This Month
—
Products
—
Account Details