Button Placement

Optimize the placement and visibility of your "Try On" button to maximize engagement and conversions.

Why Placement Matters

The location of your try-on button directly impacts:

Visibility: Customers must see it to use it
Conversion Rate: Right placement = higher engagement
User Experience: Natural flow vs interrupting
Mobile Experience: Different priorities than desktop

Goal: Make the button prominent without being intrusive.

Best Performing Locations

Between Product Images & Product Info (Recommended)

Position: After image gallery, before product title/price

Why it works:

Customers naturally view images first
Button appears after they've seen product
High visibility without disrupting purchase flow
Works great on mobile (early in scroll)

Implementation (Shopify Liquid example):

shopify.liquid

<div class="product-images">
  <!-- Product gallery here -->
</div>

<!-- Try-On Button Here -->
<button class="trialclouds-trial-widget-trigger-button" ...>
  Try On Virtually
</button>

<div class="product-info">
  <h1>{{ product.title }}</h1>
  <div class="price">{{ product.price }}</div>
</div>

Performance: Usually 5-8% click-through rate

Next to or Above "Add to Cart" Button

Position: In product form, near size/color selectors and cart button

Why it works:

Customers are in decision-making zone
Try-on helps reduce purchase hesitation
Clear call-to-action alongside cart
High intent area

Visual Layout:

[ Size: M ▼ ] [ Color: Blue ▼ ]

[    Try On Virtually    ]
[    Add to Cart         ]

Implementation:

product-form.html

<div class="product-form">
  <select name="size">
    ...
  </select>
  <select name="color">
    ...
  </select>

  <!-- Try-On Button -->
  <button class="trialclouds-trial-widget-trigger-button tryon-primary" ...>
    👗 Try On Now
  </button>

  <!-- Add to Cart Button -->
  <button class="add-to-cart-button">Add to Cart</button>
</div>

Performance: 8-12% click-through rate (high intent)

Within Product Image Gallery

Position: Overlay or badge on first/hover product image

Why it works:

Immediate visual association
Catches attention during browsing
Works well for collection/listing pages
Suggests interactivity

Example Styles:

styles.css

.product-image-wrapper {
  position: relative;
}

.trialclouds-trial-widget-trigger-button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.3s;
}

.trialclouds-trial-widget-trigger-button:hover {
  background: rgba(0, 0, 0, 0.9);
}

Performance: 3-5% click-through rate (exploratory clicks)

Below Product Description

Position: After full product description text

Why it works:

Customers are informed about product
Natural next action after reading
Works for detailed/technical products
Doesn't crowd above-the-fold content

When to use: Products with important descriptions that need reading first

Performance: 2-4% click-through rate (lower visibility)

Sticky Floating Button (Mobile)

Position: Fixed bottom of screen on mobile devices

Why it works:

Always visible regardless of scroll position
Mobile-optimized interaction
Doesn't interfere with content
Easy thumb access

Implementation:

mobile-sticky.html

<button
  class="trialclouds-trial-widget-trigger-button sticky-mobile-button"
  data-product-id="..."
  ...
>
  📸 Try On
</button>

<style>
  @media (max-width: 768px) {
    .sticky-mobile-button {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      padding: 16px;
      background: #ff6b6b;
      color: white;
      border: none;
      font-size: 18px;
      font-weight: bold;
      z-index: 1000;
      cursor: pointer;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
  }
</style>

Performance: 10-15% click-through rate on mobile (very high!)

Placements to Avoid

❌ Hidden in Collapsed Tabs

Problem: Requires extra click to reveal, low visibility Solution: Place outside tabs, or duplicate in main view

❌ Far Below Fold

Problem: Most users won't scroll that far Solution: Move higher, use sticky button, or add second button above fold

❌ In Crowded Sidebar

Problem: Lost among other CTAs and widgets Solution: Reduce sidebar clutter or move button to main content area

❌ After Customer Reviews

Problem: Too far down the page Exception: OK if reviews are very prominent on your site

❌ In Footer

Problem: Very low visibility Solution: Only use as supplementary placement, not primary

Multiple Button Strategy

Use more than one button for maximum reach. Consider using a multi-step presentation for the strategy:

Primary: Above fold, next to Add to Cart (high intent)

Example:

<!-- Button 1: Above fold -->
<button class="trialclouds-trial-widget-trigger-button primary-tryon" ...>
  Try On Now
</button>

Secondary: In image gallery (visual association)

Example:

<!-- Button 2: In image gallery -->
<div class="product-image">
  <img src="..." alt="..." />
  <button
    class="trialclouds-trial-widget-trigger-button image-overlay-tryon"
    ...
  >
    👗 Virtual Try-On
  </button>
</div>

Mobile Sticky: Bottom fixed button (mobile visibility)

Example:

<!-- Button 3: Mobile sticky (only show on mobile) -->
<button class="trialclouds-trial-widget-trigger-button mobile-sticky-tryon" ...>
  📸 Try On This Item
</button>

All buttons trigger the same widget – multiple entry points increase engagement.

A/B Testing Button Placement

Test different positions to find what works best for YOUR audience.

How to Test

Option 1: Manual Testing (Simple)

Week 1: Button above cart

Week 2: Button below images

Week 3: Sticky mobile button

Compare analytics: widget opens, downloads, conversions

Option 2: Split Testing (Advanced)

Use A/B testing tool (Google Optimize, VWO, Optimizely)

Create variants with different button placements

Split traffic 50/50

Measure: Click-through rate, downloads, purchases

Winner = highest conversions

Metrics to Track:

Button click-through rate (clicks / page views)
Widget opens (from analytics)
Try-ons completed
Downloads (purchase intent indicator)
Actual purchases from try-on users

Test Duration: At least 2 weeks, 100+ widget opens for statistical significance

Design & Styling Tips

Make Button Stand Out

Color:

Use contrasting color vs page background
Match your brand but ensure visibility
Test: Black button on white bg, or brand color

Size:

Desktop: 140-200px wide, 44-50px tall
Mobile: Full width or 200-300px wide, 50-60px tall
Make it tappable (minimum 44×44px touch target)

Text:

Clear action: "Try On Now", "Virtual Try-On", "See Yourself"
Add emoji for attention: 👗, 📸, ✨
Keep short (2-4 words)

Example Styles:

tryon-button.css

.trialclouds-trial-widget-trigger-button {
  /* Prominent primary button */
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.trialclouds-trial-widget-trigger-button:hover {
  background: #ff5252;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

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

Mobile-Specific Considerations

Mobile-First Design

Most traffic is mobile – optimize for small screens.

Best Mobile Placements:

Sticky bottom button (always visible) ⭐
Between images and product info (early scroll)
Above fold (no scrolling needed)

Mobile Styling:

mobile.css

@media (max-width: 768px) {
  .trialclouds-trial-widget-trigger-button {
    width: 100%; /* Full width on mobile */
    padding: 16px;
    font-size: 18px;
    margin: 16px 0;
  }
}

Touch Targets:

Minimum 44×44px (Apple HIG guideline)
Add padding for larger tap area
Avoid placing buttons too close together

Context-Based Placement

Product Type Matters

Apparel (Shirts, Dresses):
- Placement: Next to Add to Cart (high priority)
- Message: "See how it looks on you!"
Accessories (Sunglasses, Hats):
- Placement: In image gallery (visual focus)
- Message: "Try it virtually"
Premium Products:
- Placement: After detailed description (customers read first)
- Message: "Visualize before you buy"
Sale/Clearance Items:
- Placement: Prominent, above fold (encourage quick decisions)
- Message: "Try On - Limited Stock!"

Analytics-Driven Optimization

Dashboard Metrics to Monitor

Button Click Rate: Page views vs widget opens
- Target: >5% on product pages
Placement Heatmap (if using tool like Hotjar):
- See where users look most
- Place button in hot zones
Scroll Depth:
- If users don't scroll far, place button higher
- If they read everything, below description is OK
Device Split:
- Different optimal placements for desktop vs mobile
- Check analytics: Where do conversions happen?

Continuous Improvement

Review placement performance quarterly
Test new positions seasonally
Learn from successful competitors
Adapt to design changes on your site

Platform-Specific Guidance

Shopify

Use theme editor button block (from app installation):

Drag/drop button in product template
Test different positions easily
No code changes needed

See Shopify Button Settings

WooCommerce

Use hooks for consistent placement:

woocommerce_before_add_to_cart_button (best)
woocommerce_after_add_to_cart_button
woocommerce_product_thumbnails (in gallery)

See Universal Widget Installation

Custom Sites

Use CSS positioning or JavaScript insertion:

Find product form container
Insert button dynamically
Style to match site design

Summary Checklist

✅ Primary button placement: Above fold, high visibility
✅ Mobile optimization: Sticky button or very early scroll
✅ Design: Contrasting color, clear text, adequate size
✅ Multiple buttons: Consider 2-3 placements
✅ A/B test: Experiment to find best performer
✅ Analytics: Track click-through and conversion rates
✅ Iterate: Continuously improve based on data

Related Guides:

Need placement advice for your specific site? Email [email protected]

PreviousFAQs NextImage Quality

Last updated 6 days ago

hashtagWhy Placement Matters

hashtagBest Performing Locations

hashtagBetween Product Images & Product Info (Recommended)

hashtagNext to or Above "Add to Cart" Button

hashtagWithin Product Image Gallery

hashtagBelow Product Description

hashtagSticky Floating Button (Mobile)

hashtagPlacements to Avoid

hashtag❌ Hidden in Collapsed Tabs

hashtag❌ Far Below Fold

hashtag❌ In Crowded Sidebar

hashtag❌ After Customer Reviews

hashtag❌ In Footer

hashtagMultiple Button Strategy

hashtagPrimary: Above fold, next to Add to Cart (high intent)

hashtagSecondary: In image gallery (visual association)

hashtagMobile Sticky: Bottom fixed button (mobile visibility)

hashtagA/B Testing Button Placement

hashtagDesign & Styling Tips

hashtagMobile-Specific Considerations

hashtagContext-Based Placement

hashtagAnalytics-Driven Optimization

hashtagPlatform-Specific Guidance

hashtagShopify

hashtagWooCommerce

hashtagCustom Sites

hashtagSummary Checklist

Why Placement Matters

Best Performing Locations

Between Product Images & Product Info (Recommended)

Next to or Above "Add to Cart" Button

Within Product Image Gallery

Below Product Description

Sticky Floating Button (Mobile)

Placements to Avoid

❌ Hidden in Collapsed Tabs

❌ Far Below Fold

❌ In Crowded Sidebar

❌ After Customer Reviews

❌ In Footer

Multiple Button Strategy

Primary: Above fold, next to Add to Cart (high intent)

Secondary: In image gallery (visual association)

Mobile Sticky: Bottom fixed button (mobile visibility)

A/B Testing Button Placement

Design & Styling Tips

Mobile-Specific Considerations

Context-Based Placement

Analytics-Driven Optimization

Platform-Specific Guidance

Shopify

WooCommerce

Custom Sites

Summary Checklist