Store Pages and product detail pages can be customized to match your brand's design. Here's a comprehensive guide to styling your online store:

Store Pages vs Product Detail Pages Structure

Store Pages serve as landing pages for browsing products, while product detail pages show individual items. Both share common styling options but also have unique customization features.

Store Page Styling Options

Format settings include:

• Image width and aspect ratio
• Column and row spacing
• Number of columns (minimum 2)
• Text alignment
• Image-text spacing
• Add to Cart button visibility
• Price display
• Category navigation position
• Header text alignment
• Category title visibility

Product Detail Page Layouts

Choose from four main layouts:

• Simple: Side-by-side image and description
• Wrap: Images wrap around description
• Half: Split page with left-aligned image
• Full: Full-width image carousel above description

Additional customization options:

• Variant display style
• Image width and aspect ratio
• Text alignment
• Product navigation
• Description position
• Add to Cart button placement
• Image spacing and gallery width
• Content alignment
• Gallery design (Slideshow/Stacked/Carousel)
• Thumbnail positioning
• Image zoom and click actions

Key Features

Add to Cart and Checkout Buttons:

• Follow site's primary button styling
• Appear on both store and product pages
• Cannot be hidden in version 7.1
• Turn grey when products are out of stock

Variant Display:

• Button or dropdown menu options
• Follow secondary button styling
• Dropdown only for non-simple layouts
• Include waitlist signup option

Category Navigation:

• Displays after adding categories
• Can be top-positioned or sidebar
• Follows paragraph style fonts
• Shows nested subcategories
• Alphabetical ordering

Mobile Optimization:

• Vertical stacking of items
• Simplified navigation
• Responsive image galleries
• Optimized button placement
• Adjusted category display
• 1-2 column product display

Images maintain consistent styling across store pages for brand cohesion while adapting to different screen sizes and layouts.

[Note: Original article has been condensed and restructured for clarity while maintaining all essential information.]

Related Articles

Previous Articles