Shopify Button Settings

Complete guide to customizing your Try-On button using Shopify's theme editor when using the TrialClouds app installation method.

Applies to: Shopify App Installation only For manual installation: See Button Customization

---

Accessing Button Settings

1

Step: Open Shopify theme customizer

1. Login to Shopify Admin

2. Go to Online Store → Themes

2

Step: Open Customize

1. Click "Customize" on your active theme

3

Step: Navigate to product template

1. Navigate to Products → Default product (or your product template)

4

Step: Select TrialClouds block

1. Click on the "TrialClouds Try-On Button" block

5

Step: Edit settings

1. Settings panel appears on the right sidebar

---

Available Settings

Enabled

• Type: Toggle (ON/OFF)

• Default: ON

• Purpose: Show or hide button without removing the block

Use Cases:

• Temporarily disable for specific products/collections

• Test different placements by toggling blocks

• Seasonal campaigns (enable/disable as needed)

How to Use:

• ON: Button is visible and functional

• OFF: Button is hidden, widget won't trigger

Tip: Use this instead of deleting the block when you might want it back later.

---

Button Text

• Type: Text input

• Default: "Try On 👗"

• Character limit: ~50 characters recommended

• Supports: Text, emojis, special characters

Examples:

• Try On – Simple

• Virtual Try-On – Explicit

• Try It On 👗 – With emoji

• See It On You ✨ – Personal

• Try Before Buying – Value-focused

Emoji Ideas: 👗 👕 👔 👚 🧥 ✨ 👀 🛍️

1

How to customize the button text

1. Click in "Button Text" field

2. Delete existing text

3. Type your custom text

2

Add emojis or special characters

1. Emojis: Copy from Emojipedia or use your OS emoji picker:

• Windows: Win + .

• Mac: Cmd + Control + Space

3

Preview changes

1. Preview updates instantly

Tip: Keep it short and action-oriented. "Try On" performs better than lengthy text.

---

Button Color

• Type: Color picker

• Default: Theme default or #4CAF50

• Format: Hex color code

How to Choose:

1. Click the color picker box

2. Option A: Use color wheel/sliders

3. Option B: Enter hex code directly (e.g., #6366f1)

4. Preview updates in real-time

Color Recommendations:

• Match brand: Use your primary or accent color

• Contrast: Ensure it stands out from background

• Consistency: Match other CTA buttons (or intentionally differ)

• Avoid extremes: Very bright (#00ff00) or very dark (#000000) can hurt readability

Popular Color Choices:

• #4CAF50 – Green (default, trustworthy)

• #2196F3 – Blue (calming, tech)

• #FF5722 – Orange (energetic, urgent)

• #9C27B0 – Purple (luxury, creative)

• #E91E63 – Pink (fashion, feminine)

Tip: Test on both light and dark mode if your theme supports it.

---

Text Color

• Type: Color picker

• Default: White (#FFFFFF)

• Purpose: Color of button text

How to Choose:

1. Click the text color picker

2. Select color that contrasts with button background

3. Ensure readability

Best Practices:

• High contrast: White text on dark button, dark text on light button

• Test accessibility: Use WebAIM Contrast Checker

• Minimum ratio: WCAG AA requires 4.5:1 for normal text, 3:1 for large text

Common Combinations:

• White text (#FFFFFF) on colored background

• Black text (#000000) on light/pastel backgrounds

• Match your theme's text color for consistency

Tip: If in doubt, white text works with most colored buttons.

---

Button Size

• Type: Dropdown selection

• Options: Small, Medium, Large

• Default: Medium

Size Guidelines:

Size	Height/Padding	Best For
Small	Compact, subtle	Minimal designs, secondary CTA
Medium	Balanced	Most use cases (recommended)
Large	Prominent, bold	High emphasis, mobile-first

How to Choose:

1. Select Small, Medium, or Large

2. Preview shows size change immediately

Factors to Consider:

• Page layout: Don't overshadow "Add to Cart" unless try-on is primary action

• Mobile vs Desktop: Larger buttons work better on mobile (easier to tap)

• Product importance: Feature products may warrant larger buttons

• A/B testing: Try different sizes to see what converts better

Tip: Start with Medium, adjust based on your theme's button ecosystem.

---

Show on Desktop

• Type: Checkbox

• Default: Checked (ON)

• Purpose: Control button visibility on desktop devices

When to ENABLE (✅):

• Standard setup (most users)

• Desktop is significant traffic source

• Product details best viewed on large screen

When to DISABLE (❌):

• Mobile-only product line (e.g., phone accessories)

• Desktop users prefer traditional shopping

• Data shows low desktop engagement with virtual try-on

• Cluttered desktop layout (button adds visual noise)

How to Configure:

1. Check box to show on desktop

2. Uncheck to hide on desktop only

3. Button still appears on mobile (if "Show on Mobile" is checked)

---

Show on Mobile

• Type: Checkbox

• Default: Checked (ON)

• Purpose: Control button visibility on mobile devices

When to ENABLE (✅) (Recommended):

• Most users (mobile traffic is majority for fashion)

• Mobile shoppers more likely to use camera for try-on

• Virtual try-on boosts mobile conversion

When to DISABLE (❌):

• Mobile layout is already crowded

• Product photos work better on desktop for try-on

• Technical limitations (slow mobile site)

Mobile Considerations:

• Mobile users can upload from camera or gallery

• Camera access makes try-on easier on mobile

• Full-width buttons work better on small screens

• Consider sticky/floating button for mobile

Device Detection: Automatic based on screen size and user agent.

Tip: Keep enabled for both desktop and mobile unless you have specific reasons.

---

Capture Customer Data

• Type: Checkbox

• Default: Unchecked (OFF)

• Purpose: Automatically send logged-in customer information to widget

What Gets Sent (when logged in):

• data-user-id: Shopify customer ID

• data-user-name: Customer first + last name

• data-user-email: Customer email address

Benefits of Enabling:

• ✅ Faster experience: Customers don't re-enter their info

• ✅ Better analytics: Track specific customers across sessions

• ✅ Personalization: Pre-fill forms, remember preferences

• ✅ Follow-up: Email try-on reminders, recommendations

Privacy & Compliance:

• ✅ GDPR-safe: Only shares data customer already provided to your store

• ✅ Secure: Transmitted over HTTPS, not stored permanently

• ✅ Customer control: Customers can delete their data anytime

• ✅ No tracking: Guest users remain anonymous

When to Enable:

• Most stores (recommended for better experience)

• When customer service needs to identify users

• For personalized marketing follow-ups

When to Disable:

• Privacy-first positioning

• Anonymous-only approach

• Legal/compliance restrictions

How It Works:

1. Customer logs into your Shopify store

2. Customer visits product page

3. TrialClouds button automatically includes their data attributes

4. Widget pre-fills name/email, links analytics to customer ID

5. Guest users: No data sent, experience is anonymous

Recommendation: Enable for better customer experience and insights.

---

Real-Time Preview

As you adjust settings in the theme editor:

• Instant updates: Changes appear immediately in preview panel

• Multiple products: Use product selector to test appearance on different items

• Responsive preview: Toggle between desktop, tablet, mobile views

• Live environment: Preview shows exactly how button will look

1

How to preview changes

1. Make changes in settings panel

2. Look at center preview panel

2

1. Click through different products

2. Toggle device size (desktop/mobile icons)

3

1. Verify button placement, color, size

Tip: Test with products that have different image quantities and layouts.

---

Positioning the Button

The button block can be dragged to different positions in your product template.

Recommended Positions:

1. Between Image Gallery and Product Info (Top Priority)

   • High visibility

   • Natural flow: View image → Try on → Add to cart

2. After Product Title/Price (Alternative)

   • Prominent secondary placement

   • Good for one-column mobile layouts

3. Before "Add to Cart" Button (Alternative)

   • Try before buying mindset

   • Encourages engagement before purchase

4. After Product Description (Lower Priority)

   • Less visible (users might miss it)

   • Works if other positions are crowded

1

How to reposition the button

1. In theme editor, click and hold the TrialClouds button block

2. Drag to desired position in the product template

2

1. Release to drop

2. Preview updates immediately

3

1. Save when satisfied

Visual Cues:

• Blue line shows where block will be placed

• Other blocks shift to make room

• Undo button (top left) if you make a mistake

[Screenshot Placeholder: Theme editor showing button block being dragged to new position]

---

Saving Your Changes

1

Review changes

1. Review all settings in preview

2. Test on multiple products

2

Device checks

1. Toggle device views (desktop/mobile)

3

Save and exit

1. Click "Save" button (top right)

2. Wait for "Saved" confirmation

3. Click "Exit" to return to Themes page

Changes are now LIVE on your store! 🎉

---

Best Practices

Design Consistency

• Match button style to other CTAs on your site

• Consistent color palette throughout store

• Similar button sizes for related actions

Visibility

• Ensure button doesn't blend into background

• Use contrasting colors for attention

• Place in expected locations (near images/CTA)

Mobile Optimization

• Enable on mobile (most important platform)

• Test tap targets (44x44px minimum)

• Consider full-width button on mobile

A/B Testing

• Try different button texts

• Test placement variations

• Experiment with colors

• Measure impact on analytics

Customer Data

• Enable capture for logged-in users

• Better experience + analytics

• GDPR-compliant, privacy-safe

---

Troubleshooting

Settings Not Appearing — Can't find settings panel after clicking button block

Solutions:

• ✓ Ensure you clicked the block (should highlight)

• ✓ Settings panel is on right sidebar (may need to scroll)

• ✓ Refresh theme editor (close and reopen)

• ✓ Update theme to latest version

Changes Not Saving — Settings revert after saving

Solutions:

• ✓ Wait for "Saved" confirmation before exiting

• ✓ Check for error messages in theme editor

• ✓ Try different browser

• ✓ Clear browser cache

• ✓ Contact Shopify support if persistent

Button Not Visible After Enabling — Enabled button but it doesn't show on live site

Solutions:

• ✓ Verify theme changes were saved

• ✓ Clear site cache (if using caching app)

• ✓ Hard refresh browser (Ctrl+Shift+R)

• ✓ Check "Show on Desktop/Mobile" settings

• ✓ Ensure button block is in product template (not homepage)

Preview Doesn't Match Live Site — Button looks different in preview vs actual site

Solutions:

• ✓ Preview uses theme customizer environment (may differ slightly)

• ✓ Test on actual product pages after saving

• ✓ CSS from other apps might affect live site

• ✓ Theme updates may have changed styling

Color Not Applying — Selected color doesn't apply to button

Solutions:

• ✓ Save theme after changing color

• ✓ Check if theme CSS overrides button colors

• ✓ Try different color to verify picker works

• ✓ Contact support if color picker is broken

---

Advanced: Multiple Button Blocks

1

Add first block

1. Add first button block (e.g., near images)

2. Customize settings (color, text, etc.)

2

Add second block

1. Click "Add block" again

2. Add second TrialClouds button block

3

Position and customize

1. Position in different location (e.g., after description)

2. Optionally customize differently:

• First button: "Quick Try-On" (prominent)

• Second button: "See on you" (subtle)

4

Behavior

1. Both trigger same widget

Use Cases:

• Long product pages (button at top and bottom)

• Different button styles for desktop vs mobile

• A/B testing placements without removing blocks

---

Comparing Settings Methods

Feature	Theme Editor Settings	Manual CSS
Ease of use	✅ Very easy	Requires CSS knowledge
Setup time	Instant	10-15 minutes
Customization	7 built-in options	✅ Unlimited
Theme updates	✅ Survives updates	May need reapplication
Visual preview	✅ Real-time	Must refresh page
Mobile customization	Basic (show/hide)	✅ Full responsive control

Recommendation: Use theme editor settings for most users. If you need advanced styling, see Shopify Manual Setup.

---

Need more customization? See Button Customization for HTML/CSS techniques.

Installation issues? Check Shopify App Installation guide.

Questions? Email [email protected]