Quick Start Guide

This guide will help you activate all premium features in the Avenue Luxe theme.

Step 1: Verify Installation

All features are already integrated into your theme. Confirm by checking your Shopify theme files include snippets like image-zoom-modal.liquid, quick-view-modal.liquid, wishlist.liquid, scroll-animations.liquid, exit-intent-popup.liquid, free-shipping-bar.liquid, and sections like trust-badges.liquid.

Step 2: Enable Scroll Animations

Add animation attributes to any section:

<!-- Animate heading on scroll -->
<h2 data-animate="fade-up">
  {{ section.settings.heading }}
</h2>

<!-- Stagger product cards -->
<div class="product-grid" data-animate-stagger>
  {% for product in collection.products %}
    {% render 'product-card', product: product %}
  {% endfor %}
</div>

Popular animation types: fade-up, fade-in, scale-up, zoom-in

Step 3: Add Free Shipping Bar to Cart

Add at the top of your cart content:

{% render 'free-shipping-bar',
  threshold: 50000,
  position: 'cart'
%}

Change 50000 to your free shipping threshold in cents ($500 = 50000).

Step 4: Configure Exit Popup

1. Go to Theme Settings > Exit Popup
2. Check Enable Exit Popup
3. Set your delay, frequency, and offer details
4. Save

Step 5: Add Trust Badges Section

1. Go to Shopify Admin > Online Store > Themes > Customize
2. Add section > Trust Badges
3. Configure heading, layout, and 3-4 badge blocks

The section comes with presets: Free Shipping, Authenticity Guaranteed, Secure Payment, and Easy Returns.

Already Active (No Setup Required)

• Image Zoom — Click zoom button on product images
• Quick View — Click eye icon on product cards (if enabled)
• Product Image Gallery — Already in the product template
• Video Support — Upload videos to products

Testing Checklist

Desktop

• Click zoom button on product image
• Scroll page to see animations
• Add product to wishlist
• Open wishlist drawer (click header icon)
• Try to leave page (exit popup should appear)
• Add item to cart (free shipping bar updates)

Mobile

• Pinch to zoom on product images
• Swipe through product gallery
• Tap wishlist button
• All modals are mobile-friendly

Common Questions

How do I change the free shipping threshold? In the render tag, change threshold: 50000 to your amount in cents.

How do I disable the exit popup? Uncheck Enable Exit Popup in Theme Settings.

Can I customize animation speeds? Yes, adjust the animation duration in Theme Settings > Scroll Animations.

Where is the wishlist data stored? In browser localStorage. It persists across sessions but is device-specific.

Next Steps

1. Customize Colors — Edit CSS variables in Theme Settings to match your brand
2. Add Translations — Add keys to your locale files and translate for other languages
3. Test Performance — Run PageSpeed Insights and verify 90+ score