shop

Shop Item Guide

Shop Item Configuration Guide

Overview

This guide explains how to create and configure shop items in the Snowlake Jekyll theme, covering product presentation, metadata, and content structure.

Front Matter Configuration

Layout and Basic Information

layout: product                    # Required layout for shop items
title: "Product Title"             # Main product title
sub_title: "Product Subtitle"      # Optional descriptive subtitle
position: 8                        # Optional sorting/display order

Visual Assets

shop_page_cover: "/path/to/cover-image.webp"          # Main product image
shop_page_cover_hover: "/path/to/hover-image.webp"    # Image on hover (optional)

carousel_images:                   # Optional product image gallery
  - "/path/to/image1.webp"
  - "/path/to/image2.webp"
  - "/path/to/image3.webp"

Product Information

product_info:
  title: "Product Name"            # Detailed product title
  price: "$22.00"                  # Product price
  text: "Short product description" # Brief product description
  rating: "three"                  # Optional product rating

Product Details Tab

product_details_tab:
  title: "Product Detail"          # Tab title
  text: |                           # Detailed product description
    Comprehensive product information
  list:                            # Optional feature list
    - Feature 1
    - Feature 2
    - Feature 3

Shipping and Returns Tab

shipping_tab:
  title: "Shipping and Returns"    # Tab title
  text: |                           # Shipping policy details
    Comprehensive shipping information

Reviews Tab

review_tab:
  title: "Reviews (3)"             # Reviews section title

permalink: "/shop/product-slug/"   # Custom product URL

Product Presentation Strategies

Image Management

  • Use high-quality product images
  • Provide multiple angles
  • Include hover state images
  • Optimize for web performance
  • Support zoom functionality

Pricing and Rating

  • Display clear pricing
  • Use consistent rating system
  • Highlight special offers
  • Show price variations
  • Implement currency formatting

Customization Options

  • Modify product layout
  • Add custom product attributes
  • Create dynamic pricing
  • Implement product variations
  • Support multiple languages

Performance Optimization

  • Compress product images
  • Implement lazy loading
  • Minimize initial page load
  • Use efficient image formats
  • Optimize product metadata

SEO Considerations

  • Write descriptive titles
  • Create comprehensive descriptions
  • Use relevant keywords
  • Implement schema.org markup
  • Optimize image alt texts

Accessibility Guidelines

  • Provide descriptive product details
  • Ensure color contrast
  • Support screen readers
  • Add ARIA labels
  • Create keyboard-navigable interfaces

Troubleshooting

  • Verify image paths
  • Check product metadata
  • Validate permalink structure
  • Test responsive design
  • Ensure consistent formatting

Example Workflow

  1. Prepare product assets
  2. Configure front matter
  3. Write detailed descriptions
  4. Add product details
  5. Configure shipping information
  6. Review and refine
  7. Publish

Advanced Product Features

  • Support product variations
  • Implement dynamic pricing
  • Create comparison tools
  • Add customer reviews
  • Support multi-currency display