Product Page
Overview
The Product Page in Label One theme offers a highly customizable shopping experience with a modular block-based design. It combines a responsive media gallery with a flexible product form that supports variant selection, product siblings (color swatches), inventory tracking, and multiple checkout options.
Key Components
The product page consists of two main components:
- Product Gallery - Displays product images and media in various layouts
- Product Form - Contains all product information, variant options, and purchase controls
Product Gallery Features
| Feature | Description | Options |
|---|---|---|
| Gallery Layout | Controls how images display on desktop | Stacked, Thumbnails |
| Product Modal | Enables lightbox view of product images | On/Off |
| Mobile Gallery | Swipe-enabled gallery for mobile devices | - |
| Autoplay | Auto-advances images on mobile | On/Off |
| Gallery Arrows | Shows navigation arrows in mobile gallery | On/Off |
Product Form Structure
The product form uses a modular block-based system where each element can be added, removed, reordered, and customized individually.
General Settings
| Setting | Description | Options |
|---|---|---|
| Product Info Style | Controls how product information is displayed | Tabs, Accordion |
| Product Info Layout | Controls positioning of product information | Default, Sticky |
| Container Width | Sets the overall width of the product container | Full width, With gap, Large, Medium, Small |
| Color Scheme | Sets the color scheme for the product section | Theme color schemes |
| Fixed Mobile Buttons | Fixes checkout buttons to bottom of screen on mobile | On/Off |
Available Blocks
- Vendor - Displays the product vendor name
- Title - Displays the product title
- Social Sharing - Adds social sharing buttons
- Availability - Shows product inventory status
- Price - Displays product pricing information
- Variant Selector - Provides options for selecting product variants
- Quantity - Adds quantity selector
- Description - Shows product description with tabs or accordion
- Size Guide - Adds a size guide popup button
- Checkout Buttons - Adds purchase buttons
- Custom HTML - Allows for custom HTML content
Key Features
Product Siblings (Color Swatches)
Integrated with the theme's Product Siblings feature, the product form can display color swatches that link to related product variants. When enabled in Theme Settings → Product Siblings:
- Swatches appear below variant selectors
- Clicking a swatch navigates to the related product
- The current product's swatch is highlighted
- Can be configured to hide variant dropdown for the color option
Variant Selection
The variant selector supports:
- Multiple option types (color, size, material, etc.)
- Dropdown selectors styled to match theme design
- Dynamic price and availability updates
- Product image swapping based on variant selection
Flexible Information Display
Product information can be displayed in two styles:
- Tabs - Information organized in clickable tabs (Description, Features, etc.)
- Accordion - Collapsible sections with customizable titles
Both styles support:
- Default product description
- Up to three additional custom tabs/sections
- Custom content for each tab/section
Gift Card Functionality
For gift card products, the form includes:
- Gift card checkbox toggle
- Recipient information fields (name, email)
- Optional message field
- Scheduled delivery date picker
Mobile Optimization
The product form includes specialized mobile features:
- Optional fixed bottom checkout buttons
- Streamlined variant selection
- Touch-friendly quantity controls
- Responsive layout adjustments
Setup Instructions
Customizing Your Product Page
- Navigate to your Shopify admin → Online Store → Themes
- Click Customize on your current theme
- Select a product page to edit
- Configure the main settings in the "Product" section
Adding and Arranging Blocks
- Click "Add block" to add a new content element
- Choose from available block types
- Configure the block settings
- Use the drag handles to reorder blocks
Setting Up Product Siblings
- Enable Product Siblings in Theme Settings → Product siblings
- Add required metafields to your products
- Choose between image or text swatches
Best Practices
Layout and Visual Hierarchy
- Arrange blocks in a logical order (title, price, variants, buttons)
- Use consistent text sizes for visual hierarchy
- Add appropriate spacing between elements
Product Information
- Use tabs for products with extensive information
- Keep tab titles clear and concise
- Structure content with headings and bullet points for readability
Variant Selection
- List the most important variant option first (typically size or color)
- Use clear option names that match your inventory setup
- For products with many variants, consider using Product Siblings for color options
Mobile Experience
- Test your product page on mobile devices
- Consider enabling fixed mobile buttons for better conversion
- Ensure text is readable on small screens
Performance
- Optimize product images for fast loading
- Limit the number of additional information tabs
- Test your page load speed after customization
Troubleshooting
- Variant selector issues: Verify product has variants correctly set up in Shopify admin
- Swatches not appearing: Check Product Siblings settings and metafields
- Tabs not switching: Ensure custom tab content is properly formatted
- Mobile layout problems: Test on multiple devices and adjust block spacing
- Add to cart button disabled: Check product inventory settings in Shopify admin
Advanced Features
- Fixed mobile buttons: Creates a mobile-optimized checkout experience with controls fixed to the bottom of the screen
- Size guide popup: Links to a dedicated size guide page displayed in a modal overlay
- Custom HTML: Allows for advanced customization through custom code
- Inventory tracking: Shows live inventory numbers when stock is below threshold
- Gift card customization: Special fields for gift card products
This documentation covers all aspects of the Label One theme's product form system, helping you create effective and conversion-optimized product pages for your store.