Product Page
The Product Page 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 | Auto-enabled |
| Autoplay | Auto-advances images on mobile | On/Off |
| Gallery Arrows | Shows navigation arrows in mobile gallery | On/Off |
- Stacked: Modern, full-width images; great for lifestyle photography
- Thumbnails: Traditional layout with small preview images; better for products with many angles
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
Reorder blocks by dragging them in the theme editor. This allows you to customize the information hierarchy for your specific products.
Key Features
Product Siblings (Color Swatches)
Integrated with the theme's Product Siblings feature:
- 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
See the Product Siblings Guide for setup instructions.
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.)
- Clean, organized presentation
- Best for products with multiple information categories
Accordion:
- Collapsible sections with customizable titles
- Space-efficient display
- Better for mobile devices
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
Fixed mobile buttons can improve conversion but may cover important content. Test thoroughly on various mobile devices before enabling.
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
See the Product Siblings documentation for detailed setup.
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
- Test on both desktop and mobile devices
Product Information
- Use tabs for products with extensive information
- Keep tab titles clear and concise
- Structure content with headings and bullet points for readability
- Include size guides, care instructions, and shipping info
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
- Ensure inventory is synced to prevent overselling
Mobile Experience
- Test your product page on mobile devices
- Consider enabling fixed mobile buttons for better conversion
- Ensure text is readable on small screens
- Verify touch targets are large enough (minimum 44×44px)
Performance
- Optimize product images for fast loading (under 200KB each)
- Limit the number of additional information tabs (3-4 maximum)
- Test your page load speed after customization
- Use lazy loading for images below the fold
Place the most important information (price, variants, add to cart) above the fold. Customers should be able to purchase without scrolling on desktop.
Troubleshooting
Variant selector issues:
- Verify product has variants correctly set up in Shopify admin
- Check that all variant combinations exist
- Ensure inventory is properly tracked
Swatches not appearing:
- Check Product Siblings settings and metafields
- Verify products share the correct identifier
- See the Product Siblings Guide
Tabs not switching:
- Ensure custom tab content is properly formatted
- Check for JavaScript errors in browser console
- Clear browser cache
Mobile layout problems:
- Test on multiple devices and adjust block spacing
- Check that fixed buttons aren't covering content
- Verify touch targets are large enough
Add to cart button disabled:
- Check product inventory settings in Shopify admin
- Verify product is available for purchase
- Ensure at least one variant is in stock
Shopify's dynamic checkout buttons (Shop Pay, PayPal, etc.) are automatically included. They adapt based on what payment methods your store accepts.