Quick Start

This quick start covers the most common retailer integration path: Assistant Manager, Size Button, and Tracking Pixel.

You can either follow the steps below to setup StrutFit yourself, or you can give the StrutFit dev team permission to setup StrutFit for you. All you need to do is email your StrutFit account manager with your Shopify store URL and collaborator code. The dev team will then send you an access request and integrate the app for you.

Edit the theme code

To add StrutFit to your Shopify theme you will need to edit the theme code, you can do this by clicking the “Edit code” button on the theme editor like is shown below.

Shopify How To Edit Theme Code

Add the Assistant Manager

Create a new file called strutfit-assistant-manager.liquid in the snippets folder. In this file add assistant manager script.


<script src='https://store-assistant-assistantmanager.strut.fit' async data-organization-id={{OrganizationId}}></script>

replace {{OrganizationId}} with your organization id which you can find in the StrutFit dashboard or get from your StrutFit account manager.

now in your theme.liquid file add the following code to render the assistant manager snippet:


{% render 'strutfit-assistant-manager' %}

Adding it to your theme.liquid file will ensure the assistant manager script is always loaded and available. This is important because the assistant manager is required for all StrutFit components to work.

Learn more: Assistant Manager Guide

Add StrutFit components

Size Button

Create a snippet file called strutfit-size-button.liquid in the snippets folder. In the file add the relevant script and component code.


<script src='https://store-assistant-sizebutton.strut.fit' async ></script>
 
<strutfit-size-button
    product-code="{{ product.id }}"
    product-name="{{ product.title }}"
    full-width="true">
</strutfit-size-button>

Then render this on your product display page (commonly product-template.liquid or main-product.liquid but this can differ depending on your theme):


{% render 'strutfit-size-button' %}

The size button will only appear if a product with the given product identifier is integrated on the StrutFit dashboard with a valid size chart.

Learn more: Size Button Guide and Shopify Liquid Examples

Size Chart Button

Create a snippet file called strutfit-size-chart-button.liquid in the snippets folder. In the file add the relevant script and component code.


<script src='https://store-assistant-sizechartbutton.strut.fit' async ></script>
 
<strutfit-size-chart-button
    product-code="{{ product.id }}"
    product-name="{{ product.title }}"
    full-width="true">
</strutfit-size-chart-button>

Then render this on your product display page (commonly product-template.liquid or main-product.liquid but this can differ depending on your theme):


{% render 'strutfit-size-chart-button' %}

The size chart button will only appear if a product with the given product identifier is integrated on the StrutFit dashboard with a valid size chart.

Learn more: Size Chart Button Guide

Fit Tip

Create a snippet file called strutfit-fit-tip.liquid in the snippets folder. In the file add the relevant script and component code.


<script src='https://store-assistant-fittip.strut.fit' async ></script>
 
<strutfit-fit-tip
    product-code="{{ product.id }}">
</strutfit-fit-tip>

Then render this on your product display page (commonly product-template.liquid or main-product.liquid but this can differ depending on your theme):


{% render 'strutfit-fit-tip' %}

The fit tip will only appear if a product with the given product identifier is integrated on the StrutFit dashboard with a valid size chart and fit tip text.

Learn more: Fit Tip Guide

Try-on Button

Create a snippet file called strutfit-tryon-button.liquid in the snippets folder. In the file add the relevant script and component code.


<script src='https://store-assistant-tryonbutton.strut.fit' async ></script>
 
<strutfit-tryon-button
    product-code="{{ product.id }}"
    product-name="{{ product.title }}"
    full-width="true">
</strutfit-tryon-button>

Then render this on your product display page (commonly product-template.liquid or main-product.liquid but this can differ depending on your theme):


{% render 'strutfit-tryon-button' %}

The try-on button will only appear if a product with the given product identifier is integrated on the StrutFit dashboard with a valid try-on image.

Learn more: Try-on Button Guide

Chat Bot Bubble

Create a snippet file called strutfit-chat-bot-bubble.liquid in the snippets folder. In the file add the relevant script and component code.


<script src='https://store-assistant-chatbotbubble.strut.fit' async ></script>
 
<strutfit-chat-bot-bubble></strutfit-chat-bot-bubble>

Then render this on the pages where you want the chat bot bubble to appear:


{% render 'strutfit-chat-bot-bubble' %}

No matter where the component is placed on the page it will always appear in the bottom-right corner of the page.

Learn more: Chat Bot Bubble Guide

Add the Tracking Pixel and Product Integration

To install the StrutFit Shopify app, all you need to do is get an install link from your StrutFit account manager and paste it into your browser while logged in to your Shopify store. You will then see a screen like the one shown below where you may log into the StrutFit dashboard.

You do not have to login to the StrutFit dashboard to complete the installation, once you reach this screen the install is complete.

StrutFit Shopify app after install link

Validate the full flow

Visit a product page and confirm the size button appears (remember you also must have the product integrated in StrutFit with a valid size chart for this).
Click the size button and confirm the assistant opens.
Complete a test order and confirm the tracking pixel sends the appropriate values.