LittleJoy Documentation

This comprehensive guide covers everything you need to install, configure, and customize the LittleJoy Shopify theme. Use the sidebar navigation to jump to a specific section, or scroll through for the complete reference.

Getting Started

System Requirements

Luxe Fashion requires a Shopify store on any current plan (Basic Shopify, Shopify, Advanced, or Shopify Plus). The theme is built on Online Store 2.0 and requires no additional apps for core functionality.

Installation

After completing your purchase, you will receive a ZIP file containing the theme. Follow these steps to install it on your Shopify store:

1. Log in to your Shopify admin panel at your-store.myshopify.com/admin.
2. Navigate to Online Store > Themes in the left sidebar.
3. In the Theme library section, click the Add theme button.
4. Select Upload ZIP file from the dropdown menu.
5. Choose the downloaded ZIP file from your computer and wait for the upload to complete. This typically takes 15-30 seconds.
6. Once uploaded, the theme will appear in your theme library. Click Customize to open the visual theme editor, or click Actions > Publish to make it your live theme immediately.

Using Shopify CLI

If you prefer working with the command line, you can deploy the theme using Shopify CLI:

shopify theme push --store your-store.myshopify.com

This requires the Shopify CLI to be installed and authenticated with your store. Extract the ZIP file first, then run the command from the extracted directory. Refer to the official Shopify CLI documentation for setup instructions.

Theme Settings

Colors

Luxe Fashion provides a comprehensive color system that you can fully customize without any code changes. In the Shopify theme editor, navigate to Theme settings > Colors to configure:

• Primary color — Used for buttons, links, and accent elements throughout the theme. This is your brand's main action color.
• Secondary color — Applied to secondary buttons, badges, and supporting UI elements.
• Background color — The main background color for all pages.
• Text color — Body text color used across all content areas.
• Header background & text — Separate color controls for the site header, navigation links, and mobile menu.
• Footer background & text — Independent footer color settings for background, headings, and link colors.
• Sale / Badge colors — Customize the appearance of sale badges, "New" tags, and "Sold out" indicators independently.

Typography

Navigate to Theme settings > Typography to select fonts for headings and body text. You can choose from the full Shopify-hosted font library or provide a custom font URL. The theme supports:

• Heading font — Applied to all headings (h1 through h6), section titles, product names, and collection titles.
• Body font — Used for paragraphs, product descriptions, navigation links, form labels, and all general UI text.
• Font size scale — Adjust the base font size (default: 16px). All other sizes scale proportionally, so a single change updates the entire typographic hierarchy.

Layout

Under Theme settings > Layout, you can control the overall page structure and visual style:

• Content width — Set the maximum width of the main content area. Default is 1200px. Wider values work well for image-heavy stores.
• Section spacing — Control vertical padding between sections (small, medium, or large). Affects all pages globally.
• Border radius — Set the corner radius for buttons, cards, input fields, and image containers. Use 0 for sharp corners or larger values for a softer look.
• Enable animations — Toggle scroll-triggered fade and slide animations on or off globally. Disabling animations can improve performance on older devices.

Header & Navigation

Logo Setup

Upload your brand logo in the header section settings. For best results, use a transparent PNG or SVG file. Recommended dimensions: height between 40px and 60px. The theme will scale the logo proportionally based on the max-width value you set.

Navigation Menu

Select which Shopify navigation menu to display in the header. Create and manage your menus in Shopify Admin > Online Store > Navigation. The theme supports up to three levels of dropdown nesting for standard menus.

Mega Menu

For larger navigation structures, enable the mega menu on specific top-level menu items. Each mega menu column can display:

• Featured collections with product images
• Custom links organized in columns
• Promotional banners with images and CTAs
• Brand logos or category icons

To assign a mega menu, go to the header section in the theme editor and use the "Mega menu" blocks. Link each block to the corresponding top-level menu item handle.

Mobile Menu

The mobile menu automatically generates from your desktop navigation. On screens below 768px, the header collapses into a hamburger icon that opens a full-screen overlay menu. The mobile menu supports nested dropdowns with smooth accordion-style expand animations.

Hero Slider

Adding Slides

The hero slider displays full-width banner slides on your homepage. In the theme editor, select the hero slider section and click Add slide to create new slides. Each slide supports:

• Desktop image — Recommended size: 1920 x 800px or larger. Use high-resolution images for retina displays.
• Mobile image — Optional. If not provided, the desktop image is used with responsive cropping. Recommended: 750 x 1000px for a taller mobile-optimized view.
• Heading & subheading — Overlay text with customizable alignment (left, center, right) and color.
• Button — Call-to-action button with configurable text, URL, and style (filled or outline).
• Overlay opacity — Darken the background image (0% to 80%) for better text readability against busy images.

Autoplay Settings

Enable automatic slide transitions under the slider section settings. Configure the delay between slides (3 to 10 seconds). Autoplay pauses automatically when a user interacts with the slider or when the browser tab is not active, which is better for accessibility and performance.

Product Page

Variant Picker

The product page supports multiple variant picker styles. In the product section settings, choose between:

• Dropdown — Standard dropdown selectors for each option (Size, Color, Material, etc.).
• Buttons — Inline pill-style buttons that let customers select variants without opening a dropdown.
• Color swatches — Visual color circles for color-type options that swap the product image on selection.

Color Swatches

Color swatches display a visual circle representing each color option. When a customer selects a different color, the product image gallery automatically scrolls to the corresponding variant image. To set up color swatches:

1. Ensure your product has a variant option named Color (or the localized equivalent for your store language).
2. Assign a unique image to each color variant in the Shopify product editor. The swatch will pull the image for that variant.
3. In the theme editor, navigate to the product section and enable Show color swatches.
4. Swatch colors are automatically derived from the variant option value name (e.g., "Black" renders a black circle). For custom colors that don't match a standard color name, add a product metafield product.color_hex with the hex value.

Image Gallery

The product page image gallery supports multiple layouts: stacked, carousel, or thumbnail grid. Images support pinch-to-zoom on mobile and click-to-zoom on desktop. The gallery automatically groups images by variant when variant-specific images are assigned.

Product Tabs

Product tabs appear below the main product details and organize supplementary content into collapsible sections:

• Description — Automatically populated from the product description field in Shopify.
• Shipping & Returns — Static content configured in Theme settings > Product tabs. Write once, display on all products.
• Size Guide — Displays a size chart table or links to a custom page with detailed sizing information.
• Reviews — Integrates with the Shopify Product Reviews app or compatible third-party review apps like Judge.me and Loox.

You can add custom tabs by creating pages in Shopify and assigning them in the product section settings. Each custom tab displays the full page content inline.

Collection Page

Filters

Collection pages include a sidebar filter panel powered by Shopify's native storefront filtering API. Filters are automatically generated based on your product data and configured filters. Available filter types include:

• Price range slider — Interactive dual-handle slider for min/max price filtering.
• Product type — Filter by product type assigned in the Shopify product editor.
• Vendor / Brand — Filter by product vendor for multi-brand stores.
• Color, Size, and variant options — Checkbox or swatch-based filters for all variant options.
• Availability — Toggle between in-stock and out-of-stock products.
• Tags — Filter by product tags for custom categorization.

To configure which filters appear, go to Shopify Admin > Online Store > Navigation > Collection and search filters. The theme displays all filters you enable there, styled to match your theme design.

Sort Options

A sort dropdown appears at the top of every collection page. Customers can sort products by: Featured (manual order), Best selling, Alphabetical (A-Z and Z-A), Price (low to high and high to low), and Date (newest and oldest). The selected sort preference updates the page URL for bookmarkable results.

Grid/List Toggle

Customers can switch between grid view and list view on collection pages using toggle buttons at the top of the product grid. Grid view shows product cards in a multi-column layout (2, 3, 4, or 5 columns configurable). List view displays products in a single-column layout with larger images and more visible descriptions. The selected view preference is saved in the browser's localStorage so it persists across page loads and sessions.

Cart Drawer

Setup

The AJAX cart drawer slides in from the right side of the screen when a customer adds a product to the cart, updates without a page reload for a seamless shopping experience. To configure:

1. In the theme editor, go to Theme settings > Cart.
2. Set Cart type to Drawer. Alternatively, choose Page for a traditional full-page cart, or Popup for a brief notification.
3. Enable Cart recommendations to show complementary products inside the cart drawer.
4. Enable Cart note to let customers add special instructions to their order.
5. Toggle Trust badges to display security and payment icons below the checkout button.

Free Shipping Bar

The free shipping bar displays a progress indicator showing how much more the customer needs to spend to qualify for free shipping. It updates dynamically as items are added or removed.

1. Navigate to Theme settings > Cart > Free shipping bar.
2. Enable the free shipping bar toggle.
3. Set the Free shipping threshold amount (e.g., $75, $100). This should match your actual shipping policy.
4. Customize the message text. Use the {amount} placeholder for the remaining amount. Example: "You're only {amount} away from free shipping!"

Auto Discount

If you have automatic discounts configured in Shopify (Admin > Discounts), the cart drawer automatically calculates and displays the discount amount. No additional theme configuration is needed. The discounted price, original price, and savings amount are all shown clearly.

Terms Checkbox

Require customers to agree to your terms and conditions before proceeding to checkout. Enable this under Theme settings > Cart > Terms checkbox. Link the checkbox label text to your terms and conditions page. When enabled, the checkout button remains disabled until the checkbox is checked.

Wishlist & Compare

Luxe Fashion includes a built-in wishlist and product comparison feature that requires no third-party apps or external services.

How They Work

Both features use the browser's localStorage API to save product selections on the client side. This means data persists across browser sessions on the same device without requiring customer accounts, logins, or any server-side storage.

• Wishlist — Customers click the heart icon on any product card or product page to add it to their wishlist. A dedicated wishlist page (automatically created at /pages/wishlist) displays all saved products in a grid layout. Products can be added to cart directly from the wishlist or removed individually.
• Compare — Customers can add up to 4 products to a comparison list using the compare icon on product cards. A floating compare bar appears at the bottom of the screen showing selected products. Clicking "Compare" opens a modal with a side-by-side table of product attributes including price, availability, variant options, and description.

Data Storage

Wishlist and compare data is stored under the keys bebriz_wishlist and bebriz_compare in localStorage. Each entry stores the product handle, title, image URL, price, and availability status. The data is automatically cleaned up if a product is no longer available when the wishlist page loads.

Social Proof

Social proof notifications display small toast-style popup messages at the bottom of the screen, showing recent purchases or product activity to create urgency and build customer confidence.

Configuration

Enable social proof in Theme settings > Social proof. Configure the following options:

• Enable notifications — Master toggle for the entire feature. Disable to remove all social proof popups.
• Notification type — Choose between "Recent purchases" (displays product name with a randomly generated name and location) or "Current viewers" (shows a count of people viewing a product, e.g., "12 people are viewing this right now").
• Products to show — Select specific products for notifications, or let the theme automatically pull from your best sellers collection.
• Position — Bottom-left or bottom-right corner of the viewport.

Timing Configuration

Control how often notifications appear and how long they stay visible to balance urgency with user experience:

• Initial delay — Time in seconds before the first notification appears after page load. Default: 5 seconds. Set higher for a less aggressive feel.
• Display duration — How long each notification stays visible on screen. Default: 4 seconds.
• Interval — Time between consecutive notifications. Default: 15 seconds.
• Maximum per session — Limit the total number of notifications shown per visitor session to avoid fatigue. Default: 10.

Newsletter Popup

The newsletter popup encourages visitors to subscribe to your mailing list, typically in exchange for a discount code on their first purchase.

Setup

Navigate to Theme settings > Newsletter popup to configure all popup options:

• Enable/Disable — Master toggle. When disabled, the popup never appears.
• Trigger delay — Number of seconds after page load before the popup appears. Default: 5 seconds. Set to 0 for immediate display (not recommended for user experience).
• Exit intent — Display the popup when the visitor moves their cursor toward the browser close or back button. Desktop only. This catches visitors who are about to leave.
• Show frequency — Control how often returning visitors see the popup: every visit, once per session, once per day, or once per week. The frequency is tracked via a cookie.

Content & Styling

• Heading — The popup title, e.g., "Get 10% Off Your First Order".
• Body text — Supporting text below the heading explaining the offer.
• Discount code — Optionally display a copyable discount code after successful email submission.
• Background image — Add a promotional image to the left side of the popup for a split-layout design.
• Form integration — The form integrates with your Shopify customer list by default. It can also be connected to Klaviyo, Mailchimp, or other email platforms using their Shopify app integrations.

Kids & Baby Features

Shop by Age

LittleJoy organizes products into visual emoji-based age group cards, making it easy for parents to find age-appropriate items quickly.

Setup:

1. In the theme editor, click Add section > Shop by Age.
2. Click Add block to create age group cards.
3. For each age group, set:

• Emoji — e.g., "👶", "🧒", "🎒"
• Label — e.g., "Newborn (0-3m)", "Infant (3-12m)", "Toddler (1-3y)", "Preschool (3-5y)", "Big Kids (5+)"
• Collection Link — Link to a collection filtered for that age group

1. Cards display in a horizontal scrollable row on mobile.

Default age groups:

• Newborn — 0-3 months
• Infant — 3-12 months
• Toddler — 1-3 years
• Preschool — 3-5 years
• Big Kids — 5+ years

Milestone Cards

Milestone cards display growth milestones (First Steps, First Words, Starting School, etc.) with links to relevant product collections, helping parents shop by developmental stage.

Setup:

1. In the theme editor, click Add section > Milestone Cards.
2. Click Add block to add milestones.
3. For each milestone, set:

• Emoji — e.g., "👣", "🗣️", "🎓"
• Title — e.g., "First Steps"
• Description — e.g., "Walking shoes and safety gear for new walkers"
• Collection Link — Link to a relevant product collection

1. Cards display in a grid with pastel backgrounds.

Safety Badges

Safety certification badges appear automatically on product pages when products are tagged with safety-related tags, building trust with safety-conscious parents.

How to enable:

1. Add any of the following tags to products in Shopify Admin > Products:

• bpa-free — Displays BPA-Free badge
• non-toxic — Displays Non-Toxic badge
• cpsc-certified — Displays CPSC Certified badge
• organic — Displays Organic badge
• eco-friendly — Displays Eco-Friendly badge

1. Badges appear below the Add to Cart button with colored icons.
2. Multiple badges can be displayed on a single product.

Size Recommender

The size recommender widget helps parents choose the right clothing size based on their child's age, reducing returns and improving customer satisfaction.

Setup:

1. The size recommender appears automatically on products with a Size variant option.
2. To customize the age-to-size mapping, create a shop metafield custom.kids_size_chart (JSON) with the format:

   {
             "Newborn": "NB / 0-3M",
             "3-6 months": "3-6M",
             "6-12 months": "6-12M",
             "12-18 months": "12-18M",
             "18-24 months": "18-24M",
             "2-3 years": "2T-3T",
             "4-5 years": "4T-5T",
             "6-7 years": "6-7"
           }

1. Parents select the child's age from a dropdown and the recommended size is highlighted.

Age Filter Bar

The age filter bar displays emoji-based filter buttons on collection pages, allowing customers to quickly filter products by age group.

Setup:

1. Go to Theme settings > Collection Page.
2. Check Show Age Filter Bar.
3. The filter reads product tags prefixed with age- (e.g., age-newborn, age-toddler).
4. Each age group displays as a rounded pill button with its emoji.

Bouncy Animations

LittleJoy includes playful CSS animations that give the theme a fun, kid-friendly feel without impacting performance.

Available animations:

• Bounce — Elements gently bounce on hover (product cards, buttons)
• Wiggle — Subtle wiggle animation on emoji and icon elements
• Float — Gentle floating motion on hero section bubbles
• Pop — Scale-up effect when elements enter the viewport

To disable animations:

1. Go to Theme settings > Animations.
2. Uncheck Enable Playful Animations.
3. Individual animation types can also be toggled independently.

Reviews (App Required)

The theme provides a "Reviews" tab on product pages and star rating displays on product cards. However, actual review collection and display requires a Shopify app.

| App | Cost | Best For | |-----|------|----------| | Shopify Product Reviews | Free | Basic review needs | | Judge.me | Free tier | Most popular, photo reviews, email requests | | Loox | $9.99/mo | Photo & video reviews | | Stamped.io | Free tier | Reviews + loyalty integration |

After installing a review app, reviews will automatically appear in the Reviews tab. Star ratings on product cards pull from the app's data.

License & Activation

License Terms

Each Luxe Fashion purchase grants you a single-store license. This means you may install and use the theme on:

• One (1) live production Shopify store
• One (1) development or staging store for testing purposes

Using the theme on additional production stores requires purchasing additional licenses. Contact our support team for multi-license pricing.

Activation Process

After purchasing the theme, you will receive a license key via email. To activate:

1. Install the theme on your Shopify store following the installation steps above.
2. Open the theme editor and navigate to Theme settings > License.
3. Enter your license key in the License key field.
4. Click Save. The theme will verify your license against our server and activate all premium features.

Domain Verification

Your license is tied to a single Shopify store domain. During activation, the theme records your store's .myshopify.com domain as the authorized installation. This is a one-time process. If you need to transfer the theme to a different store or change your store domain, contact our support team with your license key and the new domain to update the verification record.

Need Help?

If you cannot find the answer to your question in this documentation, visit our support page to contact our team directly. We typically respond within 24 hours on business days.