Templates

Apply pre-designed styles to your product options with one click, or keep your theme's default look.

Overview

Templates provide professionally designed style presets that instantly transform the appearance of your product options. Whether you want a seamless theme integration or a bold custom look, templates make styling quick and easy.

Available Templates

Theme Default (Recommended)

The Theme Default template is automatically applied when you install the app. This template inherits your store's theme styles as much as possible, creating a seamless, native look.

Benefits:

• Zero styling effort required
• Matches your store's existing design
• Updates automatically if you change your theme
• Professional appearance out of the box

Best for:

• Quick setup with minimal customization
• Maintaining consistent store branding
• Stores with carefully designed themes

Pre-Designed Templates

Additional templates are available with distinct style presets. Each template has its own:

• Color schemes
• Button styles
• Typography
• Border and spacing settings
• Shadow effects

Browse the template gallery to find a style that matches your brand vision.

How to Apply a Template

Step 1: Browse Templates

1. Navigate to Customization page
2. Open the Templates tab
3. Scroll through available template options
4. Each template displays a preview of its style

Step 2: Preview a Template

1. Click on any template box
2. The Live Preview section updates immediately
3. See exactly how your options will look with this template
4. Try different templates to compare styles

Real-Time Preview

The Live Preview shows an example of product options with the selected template applied. You can interact with the preview to test functionality.

Step 3: Save or Discard

After selecting a template, the contextual save bar appears:

To apply the template:

1. Review the changes in Live Preview
2. Click Save in the contextual save bar
3. Your "Current Style" section updates to reflect the new template
4. Changes go live on your storefront immediately

To cancel:

1. Click Discard in the contextual save bar
2. Preview returns to your current style
3. No changes are made to your storefront

Switching Between Templates

You can change templates at any time:

1. Open the Templates tab
2. Click a different template
3. Preview the new style
4. Save or discard as needed

Note: Switching templates will replace your current styling. Any custom modifications in other tabs (Colors, Borders, etc.) will be overwritten by the new template's preset values.

Template Changes Override Customizations

When you apply a new template, it resets all custom styling you've made in other customization tabs. If you've made manual adjustments you want to keep, document them before switching templates.

When to Use Templates vs. Custom Styling

Use Templates When...	Use Custom Styling When...
You want quick, professional results	You have specific brand guidelines
You're new to design	You need precise control over every detail
You like the preset combinations	Existing templates don't match your vision
You want a cohesive, tested look	You want to fine-tune individual elements

Template Customization

After applying a template, you can customize individual elements:

1. Start with a template as your foundation
2. Navigate to other tabs (Colors, Borders & Shapes, etc.)
3. Adjust specific elements to match your brand
4. Changes are layered on top of the template base

This approach gives you the best of both worlds: professional design with personalized touches.

Best Practices

Start with Theme Default

• Apply Theme Default first if you're unsure
• See how it looks with your store's existing design
• Only switch if you need something different

Test Before Committing

• Use the Live Preview extensively
• Check how options look with different product types
• Test interactive elements (dropdowns, checkboxes, etc.)
• Verify readability and visual hierarchy

Consider Your Brand

Choose templates that align with:

• Your brand personality (minimal, bold, elegant, playful)
• Your product type (luxury goods vs. casual items)
• Your customer expectations
• Your store's overall aesthetic

Document Custom Changes

If you plan to switch templates later:

• Screenshot your custom color values
• Note any specific settings you've adjusted
• Keep a reference of your preferred styling

Troubleshooting

Template Not Applying

Check:

• You clicked Save (not just previewed)
• Clear your browser cache
• Check the Live Preview updates correctly
• Verify "Current Style" shows the new template

Template Looks Different on Storefront

Possible causes:

• Browser cache needs clearing
• Custom CSS in your theme conflicts
• Theme styles overriding app styles
• Different device/browser rendering

Solution: Clear cache and test in an incognito window

Lost Custom Styling

Issue: Applied a template and lost previous customizations

Solution:

• This is expected behavior - templates reset all styling
• Reapply custom changes in individual tabs
• Next time, document settings before switching templates

Preview Doesn't Match Storefront

Check:

• Preview is representative but may differ slightly
• Test on actual product pages for final verification
• Check for theme-specific CSS conflicts

Next Steps

After selecting your template:

1. Customize colors to match your brand
2. Adjust borders and shapes for your preferred style
3. Configure storefront settings for functionality
4. Test on your live store to ensure everything looks perfect