Shopify Installation

Add virtual product visualization to your Shopify store with our easy embed code.

Requirements

• A Shopify store (any plan)
• A Tap and Try account (free tier available)
• Access to your theme's code editor

Step 1: Get Your API Key

1. Create a Tap and Try account if you haven't already
2. Go to your Dashboard → Settings → API Keys
3. Create a new API key and copy it

Step 2: Add Products

1. Go to your Tap and Try Dashboard
2. Click New Product to add products manually
3. Upload product images (backgrounds will be removed automatically)
4. Set the checkout URL to your Shopify product page
5. Publish the product

Step 3: Add the Widget to Your Theme

Add the Tap and Try widget script to your Shopify theme:

1. In Shopify admin, go to Online Store → Themes
2. Click Actions → Edit code on your active theme
3. Open theme.liquid in the Layout folder
4. Add this code just before the closing </body> tag:

<script 
  src="https://tapandtry.com/widget.js" 
  data-api-key="YOUR_API_KEY"
></script>

Replace YOUR_API_KEY with your actual API key.

Step 4: Add the Button to Product Pages

Add a "Try It On" button to your product template:

1. In the theme editor, find your product template (usually product.liquid or in sections/product-template.liquid)
2. Add this button where you want it to appear:

<button 
  class="tapandtry-button" 
  data-product-id="{{ product.id }}"
  style="background: #3b82f6; color: white; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;"
>
  Tap & Try It
</button>

Alternative: Manual Button Placement

If you prefer more control, you can trigger the visualizer programmatically:

<button onclick="TapAndTry.open('your-product-slug')">
  Try It On
</button>

Styling the Button

Customize the button appearance to match your store's design. The button is a standard HTML element that you can style with CSS.

Troubleshooting

Button not working?

• Verify the widget script is loaded (check browser console for errors)
• Ensure your API key is correct
• Check that the product exists in your Tap and Try dashboard
• Verify the product ID or slug matches

Widget not loading?

• Check for JavaScript errors in the browser console
• Ensure the script is placed before </body>
• Try disabling other apps temporarily to check for conflicts