Tap and TryTap&Try
LoginGet Started

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: Create Your Account & 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 2: 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"></script>

Step 3: Add the Button to Product Pages

Add a "Tap & Try" 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 
  onclick="TapAndTry.open('YOUR-PRODUCT-SLUG')"
  style="background: #3b82f6; color: white; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;"
>
  Tap & Try
</button>

Replace YOUR-PRODUCT-SLUG with your product slug from the Tap and Try dashboard.

✨ Adding Products to Tap and Try

Since Shopify doesn't have a direct plugin, you'll add products manually from your Tap and Try dashboard:

  • • Upload product images (backgrounds auto-removed)
  • • Set product names, descriptions, and prices
  • • Add checkout URLs linking back to your Shopify store
  • • Create variants for different colors/options

📝 Dashboard Customization

From your dashboard you can also: upload custom variant images (with or without background removal), set default backgrounds, enable Floor Mode for rugs/tiles, adjust button text, and more.

💡 Tip: Product Matching

When adding products to Tap and Try, use your Shopify product ID as the "External ID" field. This allows the widget to automatically match products.

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

Need Help?

Visit our Help Center for more guides and troubleshooting, or contact our support team.