Pixelmart Documentation

This comprehensive guide covers everything you need to install, configure, and customize the Pixelmart 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.

Digital Products Features

Dark Mode

Pixelmart is a full dark mode theme. Every element — header, footer, product cards, cart drawer, modals, popups, and all UI components — is styled with a dark background palette, glassmorphism card effects, and neon accent colors.

Setup:

1. Dark mode is the default and only mode for Pixelmart. No toggle is needed.
2. To customize dark colors, go to Theme settings > Colors.
3. Adjustable settings include:

• Background — Main page background (default: #0a0a0f)
• Surface — Card and section backgrounds (default: #14141f)
• Border — Subtle borders and dividers
• Text — Primary and secondary text colors
• Accent — Neon highlight color used for buttons, links, and badges

File Info Display

The file info display shows format, file size, version number, and last update date on product pages, giving buyers essential details about the digital product before purchasing.

Setup:

1. Create the following product metafields in Shopify Admin:

• custom.file_format (Single line text) — e.g., "PSD", "AI", "FIGMA", "ZIP"
• custom.file_size (Single line text) — e.g., "245 MB"
• custom.file_version (Single line text) — e.g., "2.1.0"
• custom.last_updated (Date) — The date of the last file update

1. The info box renders automatically on any product page where at least one metafield has a value.
2. To reorder or hide specific fields, go to Theme settings > Product Page > File Info.

File Tree Preview

The file tree preview displays a terminal-style representation of the ZIP file structure, so buyers can see exactly what files are included before purchasing.

Setup:

1. Create a product metafield with the namespace and key custom.file_tree.
2. Set the metafield type to Multi-line text.
3. Enter the file structure using indented plain text, for example:

   ui-kit-v2.zip
           ├── Components/
           │   ├── Buttons.psd
           │   ├── Cards.psd
           │   └── Forms.psd
           ├── Icons/
           │   ├── icon-set-outlined.svg
           │   └── icon-set-filled.svg
           ├── README.md
           └── License.txt

1. If no metafield is set, a default placeholder tree is displayed showing a generic file structure.

Compatibility Checker

The compatibility checker displays checkmark badges for supported software (Photoshop, Figma, Sketch, Illustrator, etc.) on the product page, helping buyers confirm the file works with their tools.

Setup:

1. Create a product metafield with the namespace and key custom.compatibility.
2. Set the metafield type to Single line text (List).
3. Add entries for each supported application, e.g., Photoshop, Figma, Sketch, Illustrator, XD.
4. The theme renders each entry as a checkmark badge with the application icon.

License Selector

The license selector displays product variants as styled radio cards instead of a standard dropdown, ideal for Personal, Commercial, and Extended license tiers.

Setup:

1. In Shopify Admin > Products, create a product option named License (or your preferred name).
2. Add variants such as:

• Personal — $29
• Commercial — $59
• Extended — $99

1. The theme automatically detects the variant option and renders radio cards with the variant name and price.
2. To add descriptions to each license tier, create a product metafield custom.license_descriptions (JSON) with the format:

   {
             "Personal": "For personal, non-commercial projects",
             "Commercial": "For client work and commercial projects",
             "Extended": "Unlimited usage including SaaS and resale"
           }

License Table

The license table section displays a side-by-side comparison of license tiers with feature checkmarks, helping buyers choose the right license.

Setup:

1. In the theme editor, click Add section > License Table on the product page template.
2. Configure the table columns (one per license tier).
3. For each tier, set:

• Tier Name — e.g., "Personal", "Commercial", "Extended"
• Price — e.g., "$29", "$59", "$99"
• Features — Toggle checkmarks for each feature row

1. Feature rows are shared across all tiers and configured in the section settings.

Default feature rows include:

• Use in personal projects
• Use in commercial projects
• Use in client projects
• Modify and edit
• Remove attribution
• Use in SaaS products
• Resale/redistribution rights

Bundle Builder

The bundle builder section lets customers select multiple digital products and add them all to cart with a bundle discount.

Setup:

1. In the theme editor, click Add section > Bundle Builder on any page template.
2. Configure the section settings:

• Title — e.g., "Build Your Bundle"
• Collection — Select the collection of products to display
• Minimum items — Minimum products to qualify for discount (default: 2)
• Discount percentage — Bundle discount amount (default: 20%)

1. Customers check products they want, the section calculates the total with discount, and clicking "Add Bundle to Cart" adds all selected products.

Format Badge

Format badges display file type indicators (PSD, AI, FIGMA, SVG, etc.) on product cards in collection pages and grids, helping buyers identify file formats at a glance.

Setup:

1. Add product tags using the format format:PSD, format:AI, format:FIGMA, etc.
2. The theme automatically reads tags prefixed with format: and renders them as small colored badges on the product card.
3. To customize badge colors per format, go to Theme settings > Product Card > Format Badges.

Default format colors:

• PSD — Blue
• AI — Orange
• FIGMA — Purple
• SKETCH — Yellow
• SVG — Green
• ZIP — Gray

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.

Subscription Products (App Required)

The theme displays "Subscribe & Save" badges on product cards for products tagged with subscription. However, actual subscription checkout requires a Shopify subscription app.

| App | Cost | Best For | |-----|------|----------| | Shopify Subscriptions | Free | Basic subscription needs | | Recharge | $99/mo | Advanced features, analytics | | Loop Subscriptions | $99/mo | Growing brands | | Seal Subscriptions | Free tier | Small stores getting started |

What the theme provides:

• Visual "Subscribe & Save" badge on product cards (tag-based)
• Badge text customizable in Theme Settings > Product Card

What the app provides:

• Subscription checkout widget on product pages
• Recurring billing and order management
• Customer subscription portal

After installing a subscription app, its widget will appear on product pages automatically alongside the theme's visual badges.

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.