Shopify Manual Installation

Alternative installation method for Shopify stores that gives you complete control over button placement and styling. This method involves editing your theme's Liquid files directly.

Best for: Advanced Shopify users, older themes, custom styling needs Time required: 15-20 minutes Skill level: Basic HTML/Liquid knowledge required Alternative: Shopify App Installation (easier, recommended)

When to Use Manual Setup

• ✅ Your theme doesn't support app blocks (pre-Online Store 2.0)

• ✅ You need complete control over button styling

• ✅ You want custom button placement not possible with app blocks

• ✅ You're comfortable editing Liquid templates

• ✅ You manage multiple Shopify stores and prefer consistency

💡 For most users, we recommend Shopify App Installation instead.

Before You Begin

Prerequisites

• ✅ Shopify Admin Access: Ability to edit theme code

• ✅ TrialClouds Account: Sign up at https://app.trialclouds.com

• ✅ Site ID: Complete onboarding to get your Site ID

• ✅ Theme Backup: Duplicate your theme before making changes

Backup Your Theme

1

Duplicate your theme (backup)

1. Go to Online Store → Themes

2. Find your live theme

3. Click Actions (⋯) → Duplicate

4. A copy is created as backup

5. Now edit your live theme safely

Installation Overview

Manual installation involves two steps:

• Add embed script to your theme (loads widget globally)

• Add button code to product template (triggers widget on products)

Step-by-step Manual Installation

1

Step 1: Add the Embed Script

The embed script must be added to every page where you want try-on functionality.

Get Your Site ID

1. Login to https://app.trialclouds.com

2. Navigate to Sites section

3. Find your Shopify site (or create one with domain yourstore.myshopify.com)

4. Copy your Site ID (looks like cmkozmnbi00012euxrl81rx69)

Access Theme Code Editor

1. In Shopify Admin, go to Online Store → Themes

2. On your live theme, click Actions (⋯) → Edit code

3. The code editor opens showing your theme files

[Screenshot Placeholder: Shopify theme code editor with file tree on left]

Locate theme.liquid

1. In the left sidebar (file tree), find Layout folder

2. Click to expand it

3. Click on theme.liquid to open it

What is theme.liquid? It's the master template that wraps every page on your store. Adding the script here loads it globally.

Find the Closing Tag

1. With theme.liquid open, scroll to the bottom of the file

2. Look for the closing </body> tag (usually near the end)

3. You'll place the script just before this tag

Tip: Use Ctrl+F (or Cmd+F) to search for </body> to find it quickly.

Paste the Embed Script

Add this code just before the </body> tag:

theme.liquid (insert before </body>)

<!-- Start of TrialClouds Script -->
<script id="tc-snippet" src="https://widget.trialclouds.com/script/YOUR_SITE_ID"></script>
<!-- End of TrialClouds Script -->

Replace YOUR_SITE_ID with your actual Site ID from the Get Your Site ID step.

Example:

theme.liquid (example)

    <!-- Other scripts -->

    <!-- Start of TrialClouds Script -->
    <script id="tc-snippet" src="https://widget.trialclouds.com/script/cmkozmnbi00012euxrl81rx69"></script>
    <!-- End of TrialClouds Script -->
  </body>
</html>

Save theme.liquid

1. Click the green "Save" button (top right)

2. Wait for "Saved" confirmation

The widget script is now loaded on all pages.

✅ Step 1 Complete! The widget infrastructure is ready.

2

Step 2: Add Try-On Button to Products

Now add the Try-On button to your product pages with dynamic data.

Locate Product Template

Your product template file depends on your theme structure. Common locations:

• Sections: sections/main-product.liquid (modern themes)

• Sections: sections/product-template.liquid

• Templates: templates/product.liquid (older themes)

How to find it:

1. In the code editor, expand the Sections folder first

2. Look for files with "product" in the name (e.g., main-product.liquid, product-template.liquid, featured-product.liquid)

3. If not in Sections, check Templates folder

Tip: If unsure, view your live product page source (right-click → View Page Source) and search for unique text like your product title or "Add to Cart". Then search your theme files for that text.

Choose Button Placement

Open your product template file and decide where to place the button.

Recommended locations:

• After Product Images (most visible): look for {{ product.featured_image }} or image gallery code — add button after this section

• Before "Add to Cart" Button: find <button type="submit" or "Add to Cart" button code — add button code just before

• After Product Information: look for product description {{ product.description }} — add button after this

Tip: Search (Ctrl+F) for "add to cart" or "product-form" to find the right location.

Add Button Code

Paste this complete code at your chosen location:

Product template — Try-On button

<!-- TrialClouds Try-On Button -->
<button
  class="trialclouds-trial-widget-trigger-button"
  style="
    background-color: #4CAF50;
    color: white;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin: 16px 0;
    transition: background-color 0.3s ease;
  "
  onmouseover="this.style.backgroundColor='#45a049'"
  onmouseout="this.style.backgroundColor='#4CAF50'"
  data-product-id="{{ product.id }}"
  data-product-name="{{ product.title | escape }}"
  data-brand="{{ product.vendor | escape }}"
  data-price="{{ product.price | money_without_currency | remove: ',' }}"
  {% if product.compare_at_price > product.price %}
  data-sale-price="{{ product.price | money_without_currency | remove: ',' }}"
  {% endif %}
  data-currency="{{ shop.currency }}"
  data-link="{{ shop.url }}{{ product.url }}"
  data-images='{{ product.images | map: "src" | json }}'>
  Try On 👗
</button>

What this does:

• Uses Liquid variables to auto-populate product data

• Works for all products automatically

• Includes inline styling (customize as needed)

• Handles sale prices conditionally

Understanding the Code (key parts)

• Required class:

class="trialclouds-trial-widget-trigger-button"

Must not be removed — widget won't work without it.

• Product data (dynamic):

data-product-id="{{ product.id }}"
data-product-name="{{ product.title | escape }}"
data-images='{{ product.images | map: "src" | json }}'

Liquid variables auto-fill product info; | escape prevents XSS; | json creates a proper JSON array for images.

• Conditional sale price:

{% if product.compare_at_price > product.price %}
data-sale-price="{{ product.price | money_without_currency | remove: ',' }}"
{% endif %}

Only adds sale price attribute if product is on sale; removes currency symbols and commas.

• Inline styling: The inline style provides immediate styling; you can move styles to CSS (see Step 3).

Save Product Template

1. Click "Save" button (top right)

2. Wait for confirmation

✅ Step 2 Complete! Your manual installation is done.

3

Step 3: Customize Button Styling (Optional)

The inline styles work immediately, but for cleaner code, move styles to your theme's CSS.

Remove Inline Styles

Edit your button code to remove the style, onmouseover, and onmouseout attributes:

Product template — cleaned button

<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="{{ product.id }}"
  data-product-name="{{ product.title | escape }}"
  data-brand="{{ product.vendor | escape }}"
  data-price="{{ product.price | money_without_currency | remove: ',' }}"
  {% if product.compare_at_price > product.price %}
  data-sale-price="{{ product.price | money_without_currency | remove: ',' }}"
  {% endif %}
  data-currency="{{ shop.currency }}"
  data-link="{{ shop.url }}{{ product.url }}"
  data-images='{{ product.images | map: "src" | json }}'>
  Try On 👗
</button>

Add CSS to Theme

1. In code editor, go to Assets folder

2. Find your main CSS file: theme.css, theme.scss.liquid, or your custom CSS file

3. Open it and scroll to the bottom

4. Add this CSS:

Assets CSS

/* TrialClouds Try-On Button */
.trialclouds-trial-widget-trigger-button {
  background-color: #4caf50;
  color: white;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin: 16px 0;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.trialclouds-trial-widget-trigger-button:hover {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.trialclouds-trial-widget-trigger-button:active {
  transform: translateY(0);
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
  .trialclouds-trial-widget-trigger-button {
    width: 100%;
    display: block;
  }
}

1. Save the CSS file

Customize Colors to Match Brand

Edit the CSS to match your store's branding:

.trialclouds-trial-widget-trigger-button {
  background-color: #YOUR_BRAND_COLOR; /* Change this */
  color: #ffffff; /* Text color */
  /* ... rest of styles ... */
}

.trialclouds-trial-widget-trigger-button:hover {
  background-color: #DARKER_SHADE; /* Hover color */
}

Ideas:

• Match your "Add to Cart" button

• Use brand's primary color

• Use a complementary accent color

4

Step 4: Optional — Add Customer Data Capture

If you want to pre-fill customer data for logged-in users, enhance the button code:

Product template — button with customer data

<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="{{ product.id }}"
  data-product-name="{{ product.title | escape }}"
  data-brand="{{ product.vendor | escape }}"
  data-price="{{ product.price | money_without_currency | remove: ',' }}"
  {% if product.compare_at_price > product.price %}
  data-sale-price="{{ product.price | money_without_currency | remove: ',' }}"
  {% endif %}
  data-currency="{{ shop.currency }}"
  data-link="{{ shop.url }}{{ product.url }}"
  data-images='{{ product.images | map: "src" | json }}'
  {% if customer %}
  data-user-id="{{ customer.id }}"
  data-user-name="{{ customer.name | escape }}"
  data-user-email="{{ customer.email | escape }}"
  {% endif %}>
  Try On 👗
</button>

What this does:

• Checks if customer is logged in ({% if customer %})

• Adds customer ID, name, and email if available

• Widget pre-fills this data for faster experience

• Analytics can track specific customers

Privacy: Only adds data for logged-in users who already shared this info with your store.

5

Step 5: Test Your Installation

Basic Test

1. Open your Shopify store (click "View your store" from Admin)

2. Navigate to any product page

3. Look for the "Try On 👗" button

4. Click it

Expected Result: TrialClouds widget opens in an overlay.

If it doesn't work, see the Troubleshooting section below.

Complete Test

1. In the widget, upload a test photo (clear face, good lighting)

2. Wait for AI processing (20-30 seconds)

3. View the try-on result

4. Test any additional features (zoom, download, etc.)

Test Multiple Products

Visit different product pages to ensure:

• Button appears on all products

• Product name changes in widget

• Product images load correctly

• Prices display accurately

Mobile Testing

1. Open your store on a mobile device

2. Navigate to a product

3. Tap the button

4. Test uploading from camera or gallery

5. Verify widget looks good on small screen

Troubleshooting

Widget Doesn't Open

Check:

• ✓ Site ID is correct in theme.liquid (no typos or spaces)

• ✓ Browser console (F12) for JavaScript errors

• ✓ Button has class trialclouds-trial-widget-trigger-button

• ✓ Both theme.liquid and product template changes are saved

• ✓ Site status is "Active" in TrialClouds dashboard

Test: Type window.TrialClouds_API in browser console. Should return an object (not undefined).

Button Not Visible

Check:

• ✓ Product template file was saved

• ✓ You're viewing an actual product page (not homepage)

• ✓ CSS isn't hiding the button (display: none, visibility: hidden)

• ✓ Button isn't positioned off-screen

Debug: Right-click on product page → "Inspect Element" → Search for "trialclouds" to see if button HTML is present.

Images Not Loading in Widget

Check:

• ✓ Product has images assigned in Shopify Admin

• ✓ Images are visible on product page

• ✓ data-images attribute is properly formatted (check page source)

Common Issue: Image URLs with & need proper escaping. The code provided handles this correctly.

Button Styling Looks Wrong

Check:

• ✓ CSS file was saved after adding styles

• ✓ No conflicting CSS from theme overriding your styles

• ✓ Clear browser cache and hard refresh (Ctrl+Shift+R)

Fix Conflicts: Add !important to critical styles:

.trialclouds-trial-widget-trigger-button {
  background-color: #4caf50 !important;
  color: white !important;
}

Works on Desktop But Not Mobile

Check:

• ✓ Button CSS includes mobile responsive styles

• ✓ Theme's mobile layout isn't hiding elements

• ✓ Test on actual device (not just browser responsive mode)

• ✓ Touch events work (script handles both click and touch)

Need More Help?

• Common Issues Guide

• Installation Verification

• Email: [email protected]

Advanced Customization

Multiple Button Locations

Want buttons in multiple places? Copy the button code to multiple locations:

<!-- After product images -->
<button class="trialclouds-trial-widget-trigger-button" data-...>
  Try On 👗
</button>

<!-- ... product description ... -->

<!-- Before Add to Cart -->
<button class="trialclouds-trial-widget-trigger-button" data-...>
  See It On You
</button>

Both buttons will work — clicking either opens the widget with the same product data.

Conditional Display

Show button only for specific collections or products:

{% if product.type == "Clothing" %}
  <!-- TrialClouds Button -->
  <button class="trialclouds-trial-widget-trigger-button" data-...>
    Try On 👗
  </button>
{% endif %}

Or by collection:

{% if collection.handle == "shirts" or collection.handle == "dresses" %}
  <!-- TrialClouds Button -->
  <button class="trialclouds-trial-widget-trigger-button" data-...>
    Try On 👗
  </button>
{% endif %}

Custom Button Text by Product Type

<button class="trialclouds-trial-widget-trigger-button" data-...>
  {% if product.type == "Shirts" %}
    Try On This Shirt 👔
  {% elsif product.type == "Dresses" %}
    Try On This Dress 👗
  {% else %}
    Try On
  {% endif %}
</button>

Icon Instead of Emoji

Replace text with an image/icon:

<button class="trialclouds-trial-widget-trigger-button" data-...>
  <img src="{{ 'tryon-icon.svg' | asset_url }}" alt="Try On" style="width: 20px; height: 20px; margin-right: 8px; vertical-align: middle;">
  Try On
</button>

Updating the Installation

When TrialClouds releases updates to the widget script:

Good News: The script URL stays the same, so updates are automatic!

Your manually added code doesn't need changes. The widget script at https://widget.trialclouds.com/script/{SITE_ID} is updated on our end, and your site automatically uses the latest version.

If we release a new button code version (rare), we'll email you with update instructions.

Removing the Installation

1. Remove embed script from theme.liquid:

   • Edit theme.liquid

   • Delete the TrialClouds script lines

   • Save

2. Remove button code from product template:

   • Edit your product template file

   • Delete the button HTML code

   • Save

3. Optional: Remove CSS:

   • Edit your CSS file

   • Remove TrialClouds button styles

   • Save

Removing code doesn't delete your TrialClouds account or analytics. Login to https://app.trialclouds.com to manage your account.

Comparing Installation Methods

Feature	Manual Setup	App Installation
Theme version	✅ All themes	Online Store 2.0 only
Code editing	✅ Required	❌ Not required
Setup time	15-20 minutes	5-10 minutes
Visual customization	CSS required	Built-in settings
Button placement	✅ Full control	Limited to block positions
Custom styling	✅ Complete	Limited options
Theme updates	⚠️ May need reapplication	✅ Survives updates
Multiple locations	Manual duplication	Easy (add multiple blocks)
Conditional display	✅ Full Liquid control	Limited

Recommendation: Use app installation unless you need advanced customization or have an older theme.

Need help with manual setup? Email [email protected]

Want the easier method? Try Shopify App Installation instead.