Skip to main content

Default Theme Reference

Complete reference documentation for the O2VEND default theme. This theme serves as the foundation for all O2VEND storefronts and demonstrates best practices for theme development.

Theme Structure​

The default theme follows a standard Shopify-compatible structure:

themes/default/
  layout/
    theme.liquid              # Main layout template
  templates/                  # Page templates
    index.liquid              # Homepage
    product-detail.liquid    # Product detail page
    products.liquid          # Product listing page
    categories.liquid        # Categories listing
    cart.liquid              # Shopping cart
    checkout.liquid          # Checkout page
    search.liquid            # Search results
    page.liquid              # Custom pages
    login.liquid             # Login page
    address-book.liquid      # Address book
    order-confirmation.liquid # Order confirmation
    error.liquid             # Error page
    account/                 # Account pages
      dashboard.liquid
      orders.liquid
      order-detail.liquid
      profile.liquid
      wishlist.liquid
      loyalty.liquid
      subscriptions.liquid
      return-orders.liquid
      store-credit.liquid
      loyalty-redemption.liquid
      register.liquid
  sections/                  # Reusable sections
    header.liquid
    header-fallback.liquid
    footer.liquid
    footer-fallback.liquid
    hero.liquid
    hero-fallback.liquid
    content.liquid
    content-fallback.liquid
  snippets/                  # Reusable components
    product-card.liquid
    product-card-simple.liquid
    product-card-related.liquid
    cart-drawer.liquid
    breadcrumbs.liquid
    pagination.liquid
    mega-menu.liquid
    icon.liquid
    price.liquid
    rating.liquid
    login-modal.liquid
    account-sidebar.liquid
    delivery-zone-modal.liquid
    delivery-zone-search.liquid
    delivery-zone-city-selector.liquid
    social-sharing.liquid
    add-to-cart-modal.liquid
    skeleton-product-grid.liquid
    skeleton-product-card.liquid
    skeleton-collection-grid.liquid
    news-thumbnail.liquid
  widgets/                   # Widget templates
    header.liquid
    header-menu.liquid
    footer.liquid
    footer-menu.liquid
    product.liquid
    product-carousel.liquid
    single-product.liquid
    simple-product.liquid
    category.liquid
    category-list.liquid
    category-list-carousel.liquid
    brand.liquid
    brand-carousel.liquid
    carousel.liquid
    gallery.liquid
    html.liquid
    spacebar.liquid
    space-bar.liquid
    spacebar-carousel.liquid
    space-bar-widget-carousel.liquid
    splash.liquid
    news.liquid
    recently-viewed.liquid
    product-canvas.liquid
    discount-time.liquid
    testimonial-carousel.liquid
    shared/
      product-grid.liquid
  assets/                    # CSS, JS, images
    theme.css
    theme.js
    components.css
    sections.css
    delivery-zone.css
    delivery-zone.js
    cart-drawer.js
    cart-manager.js
    checkout-price-handler.js
    async-sections.js
    logo.png
  config/                    # Theme configuration
    settings_schema.json     # Settings schema
    settings_data.json       # Default settings
  locales/                   # Translations
    en.default.json

Layout Template​

layout/theme.liquid​

The main layout template that wraps all pages.

Key Features:

  • HTML5 semantic structure
  • Responsive viewport meta tag
  • Font loading optimization
  • App hook support (theme_head, theme_body_begin, theme_body_end)
  • Section-based header and footer
  • Skip links for accessibility
  • Currency and locale data attributes

Structure:

<!DOCTYPE html>
<html lang="{{ shop.language | default: 'en' }}">
<head>
  <!-- Meta tags, CSS, fonts -->
  {% hook 'theme_head' %}
</head>
<body>
  {% hook 'theme_body_begin' %}
  
  <header>
    {% section 'sections/header' %}
  </header>
  
  <main>
    {{ content }}
  </main>
  
  <footer>
    {% section 'sections/footer' %}
  </footer>
  
  {% hook 'theme_body_end' %}
</body>
</html>

Page Templates​

Homepage (templates/index.liquid)​

Simple template using sections:

{% layout 'layout/theme' %}

{% section 'sections/hero' %}
{% section 'sections/content' %}

Available Objects:

  • widgets.hero - Hero section widgets
  • widgets.content - Content section widgets
  • All global objects (shop, customer, menus, etc.)

Product Detail (templates/product-detail.liquid)​

Available Objects:

  • product - Full product object with all properties
  • relatedProducts - Array of related products
  • widgets.product - Product page widgets

Key Features:

  • Product image gallery with thumbnails
  • Variant selection
  • Add to cart functionality
  • Product information tabs
  • Related products section
  • Social sharing
  • Product data JSON for JavaScript

Product Object Properties Used:

{{ product.productId }}
{{ product.name }}
{{ product.description }}
{{ product.prices.price }}
{{ product.prices.mrp }}
{{ product.images }}
{{ product.variations }}
{{ product.combinations }}
{{ product.attributes }}
{{ product.brand }}
{{ product.category }}
{{ product.inStock }}
{{ product.available }}
{{ product.stockQuantity }}

Product Listing (templates/products.liquid)​

Available Objects:

  • products - Array of products
  • collection - Current collection/category
  • pagination - Pagination object
  • currentQuery - Current query parameters

Features:

  • Product grid display
  • Filtering and sorting
  • Pagination
  • Skeleton loading states

Categories (templates/categories.liquid)​

Available Objects:

  • categories - Array of categories
  • pagination - Pagination object

Features:

  • Category grid display
  • Category hierarchy
  • Category images

Cart (templates/cart.liquid)​

Available Objects:

  • cart - Cart object with items and totals

Features:

  • Cart item list
  • Quantity updates
  • Remove items
  • Cart totals
  • Continue shopping
  • Proceed to checkout

Checkout (templates/checkout.liquid)​

Available Objects:

  • cart - Cart items and totals
  • checkout - Checkout object
  • checkout.shippingAddress - Shipping address
  • checkout.billingAddress - Billing address
  • checkout.paymentMethods - Available payment methods
  • checkout.paymentMethodsGrouped - Grouped payment methods
  • checkout.accountData - Loyalty points, store credit
  • countries - Available countries
  • states - States by country

Features:

  • Address forms
  • Shipping method selection
  • Payment method selection
  • Order summary
  • Discount code application
  • Order notes

Search (templates/search.liquid)​

Available Objects:

  • search.query - Search query
  • search.results - Search results
  • search.results.products - Product results
  • search.results.total - Total results
  • pagination - Pagination object

Sections​

Header Section (sections/header.liquid)​

Features:

  • Logo display
  • Main navigation menu
  • Search bar
  • Cart icon with count
  • Account icon
  • Mobile hamburger menu
  • Responsive design

Widget Support:

  • widgets.header - Header widgets
  • Header menu widget integration

Settings:

  • Logo URL
  • Logo width
  • Show search
  • Show cart icon
  • Menu selection

Features:

  • Footer menu
  • Newsletter signup
  • Social links
  • Copyright information
  • Footer widgets support

Widget Support:

  • widgets.footer - Footer widgets

Hero Section (sections/hero.liquid)​

Features:

  • Hero banner display
  • Widget support for dynamic content

Widget Support:

  • widgets.hero - Hero section widgets

Content Section (sections/content.liquid)​

Features:

  • Main content area
  • Widget support

Widget Support:

  • widgets.content - Content section widgets

Snippets​

Product Card (snippets/product-card.liquid)​

Parameters:

  • product (required) - Product object
  • loading (optional) - Image loading attribute

Usage:

{% render 'snippets/product-card', product: product %}
{% render 'snippets/product-card', product: product, loading: 'eager' %}

Features:

  • Product image with fallback
  • Product name and price
  • Variant selection
  • Add to cart button
  • Stock status badges
  • Product URL generation
  • Responsive design

Product Properties Used:

{{ product.productId }}
{{ product.name }}
{{ product.prices.price }}
{{ product.prices.mrp }}
{{ product.images }}
{{ product.thumbnailImage1 }}
{{ product.variations }}
{{ product.inStock }}
{{ product.available }}
{{ product.stockQuantity }}

Product Card Simple (snippets/product-card-simple.liquid)​

Simplified product card variant for quick displays.

Product card optimized for related products display.

Cart Drawer (snippets/cart-drawer.liquid)​

Features:

  • Slide-out cart drawer
  • Cart items list
  • Quantity updates
  • Remove items
  • Cart totals
  • Checkout button

Usage:

{% render 'snippets/breadcrumbs' %}

Features:

  • Automatic breadcrumb generation
  • Home link
  • Current page indication

Pagination (snippets/pagination.liquid)​

Parameters:

  • pagination - Pagination object

Usage:

{% render 'snippets/pagination', pagination: pagination %}

Features:

  • Previous/Next links
  • Page number links
  • Current page indication
  • Responsive design

Mega Menu (snippets/mega-menu.liquid)​

Features:

  • Multi-level menu display
  • Category images
  • Responsive dropdown

Price (snippets/price.liquid)​

Parameters:

  • price - Price value
  • compare_at_price (optional) - Compare at price

Usage:

{% render 'snippets/price', price: product.prices.price, compare_at_price: product.prices.mrp %}

Features:

  • Formatted price display
  • Compare at price (strikethrough)
  • Currency formatting

Rating (snippets/rating.liquid)​

Parameters:

  • rating - Rating value (0-5)
  • count (optional) - Review count

Usage:

{% render 'snippets/rating', rating: product.ratingAverage, count: product.reviewsCount %}

Delivery Zone Modal (snippets/delivery-zone-modal.liquid)​

Features:

  • Zone selection modal
  • Zipcode search
  • City selector
  • Zone information display

Skeleton Loaders​

Skeleton Product Grid (snippets/skeleton-product-grid.liquid)

  • Loading placeholder for product grids

Skeleton Product Card (snippets/skeleton-product-card.liquid)

  • Loading placeholder for product cards

Skeleton Collection Grid (snippets/skeleton-collection-grid.liquid)

  • Loading placeholder for collection grids

Widgets​

The default theme includes comprehensive widget templates for all widget types.

Product Widgets​

widgets/product.liquid​

  • Single product display
  • Full product information

widgets/product-carousel.liquid​

  • Product carousel/slider
  • Multiple products
  • Navigation controls

widgets/single-product.liquid​

  • Single product showcase
  • Large product display

widgets/simple-product.liquid​

  • Simplified product display
  • Minimal information

widgets/recently-viewed.liquid​

  • Recently viewed products
  • Browser storage integration

Category Widgets​

widgets/category.liquid​

  • Single category display
  • Category image and name

widgets/category-list.liquid​

  • Category list/grid
  • Multiple categories

widgets/category-list-carousel.liquid​

  • Category carousel
  • Sliding category display

Brand Widgets​

widgets/brand.liquid​

  • Single brand display

widgets/brand-carousel.liquid​

  • Brand carousel
  • Multiple brands

widgets/header.liquid​

  • Header widget
  • Announcement bar support

widgets/header-menu.liquid​

  • Header menu widget
  • Navigation menu display

widgets/footer.liquid​

  • Footer widget
  • Footer content

widgets/footer-menu.liquid​

  • Footer menu widget
  • Footer navigation

Content Widgets​

widgets/carousel.liquid​

  • Generic carousel widget
  • Custom content support

widgets/gallery.liquid​

  • Image gallery widget
  • Multiple images

widgets/html.liquid​

  • HTML content widget
  • Custom HTML support

widgets/spacebar.liquid​

  • Spacing widget
  • Vertical spacing

widgets/splash.liquid​

  • Splash screen widget
  • Full-screen content

widgets/news.liquid​

  • News/blog widget
  • News items display

widgets/discount-time.liquid​

  • Discount timer widget
  • Countdown timer

widgets/testimonial-carousel.liquid​

  • Testimonial carousel
  • Customer testimonials

widgets/product-canvas.liquid​

  • Product canvas widget
  • Custom product display

Shared Widgets​

widgets/shared/product-grid.liquid​

  • Shared product grid component
  • Used by multiple widget types

Assets​

CSS Files​

assets/theme.css​

  • Main theme styles
  • Global styles
  • Component styles
  • Responsive breakpoints

assets/components.css​

  • Component-specific styles
  • Reusable component classes

assets/sections.css​

  • Section-specific styles
  • Header, footer, hero styles

assets/delivery-zone.css​

  • Delivery zone modal styles
  • Zone selector styles

JavaScript Files​

assets/theme.js​

  • Main theme JavaScript
  • Global functionality
  • Event handlers

assets/cart-drawer.js​

  • Cart drawer functionality
  • Cart management

assets/cart-manager.js​

  • Cart operations
  • Add/remove/update items
  • Cart API integration

assets/checkout-price-handler.js​

  • Checkout price calculations
  • Payment method fees
  • Shipping costs

assets/delivery-zone.js​

  • Delivery zone selection
  • Zone API integration
  • Zone modal management

assets/async-sections.js​

  • Async section loading
  • Performance optimization

Configuration​

Settings Schema (config/settings_schema.json)​

The default theme includes comprehensive settings:

Color Scheme:

  • Primary colors
  • Secondary colors
  • Accent colors
  • Background colors
  • Text colors
  • Semantic colors (success, error, warning, info)

Typography:

  • Font families (primary, display, mono)
  • Font sizes
  • Font weights
  • Line heights
  • Letter spacing

Layout & Spacing:

  • Container width and padding
  • Spacing system (section, component, element, large, small)
  • Layout style (boxed, full width, fluid)
  • Border radius

Header Settings:

  • Logo
  • Logo width
  • Show search
  • Show cart icon
  • Menu selection

Footer Settings:

  • Footer text
  • Footer menu
  • Newsletter signup
  • Social links

Product Display:

  • Products per page
  • Product image ratio
  • Show vendor
  • Show SKU

Cart Settings:

  • Cart type (drawer/page)
  • Continue shopping link
  • Order notes

Social Media:

  • Facebook, Instagram, Twitter, YouTube, Pinterest URLs

Animations & Effects:

  • Enable animations
  • Animation speed
  • Parallax effects
  • Hover effects
  • Scroll effects

Shadows & Depth:

  • Shadow opacity
  • Shadow blur
  • Shadow spread
  • Depth levels

Button Styles:

  • Button style (modern, minimal, classic)
  • Button padding
  • Button effects

Performance:

  • Lazy load images
  • Preload critical CSS
  • Optimize animations
  • Loading skeletons

Widgets & Sections:

  • Enable widgets
  • Widget fallbacks
  • Widget cache TTL
  • Section defaults

Settings Data (config/settings_data.json)​

Default values for all settings. This file is generated by the theme editor and contains the current theme configuration.

Theme Features​

Responsive Design​

The default theme is fully responsive with breakpoints:

  • Mobile: < 768px
  • Tablet: 768px - 1024px
  • Desktop: > 1024px

Accessibility​

  • Semantic HTML5 elements
  • ARIA labels
  • Skip links
  • Keyboard navigation support
  • Screen reader compatibility

Performance​

  • Lazy loading images
  • Optimized asset loading
  • Skeleton loaders
  • Async section loading
  • Efficient CSS/JS

Browser Support​

  • Modern browsers (Chrome, Firefox, Safari, Edge)
  • Mobile browsers
  • Progressive enhancement

Widget Integration​

The default theme fully supports the widget system:

{% for widget in widgets.hero %}
  {{ widget | render_widget }}
{% endfor %}

Widget Sections:

  • widgets.hero - Hero section
  • widgets.content - Main content
  • widgets.footer - Footer
  • widgets.header - Header
  • widgets.sidebar - Sidebar (product/category pages)

Hook Integration​

The default theme includes app hook support:

{% hook 'theme_head' %}
{% hook 'theme_body_begin' %}
{% hook 'theme_body_end' %}
{% hook 'product_before' %}
{% hook 'product_images_before' %}
{% hook 'product_title_before' %}
{% hook 'product_price_before' %}
{% hook 'product_form_before' %}
{% hook 'product_variants_before' %}
{% hook 'header_before' %}
{% hook 'header_after' %}

Best Practices Demonstrated​

  1. Semantic HTML: Proper use of HTML5 elements
  2. Liquid Best Practices: Efficient template logic
  3. Performance: Optimized loading and rendering
  4. Accessibility: WCAG compliance
  5. Responsive Design: Mobile-first approach
  6. Code Organization: Clear file structure
  7. Reusability: Extensive use of snippets
  8. Widget Support: Full widget system integration
  9. App Support: Hook integration throughout
  10. Error Handling: Graceful fallbacks

Customization Guide​

Changing Colors​

Update settings in theme editor or config/settings_data.json:

{
  "color_primary": "#your-color",
  "color_background": "#your-bg-color"
}

Modifying Layout​

Edit layout/theme.liquid or section files:

  • sections/header.liquid - Header layout
  • sections/footer.liquid - Footer layout

Adding Custom Snippets​

  1. Create snippet in snippets/ directory
  2. Use with {% render 'snippets/your-snippet' %}

Customizing Widgets​

  1. Edit widget template in widgets/ directory
  2. Widget will automatically use updated template

Adding Custom Pages​

  1. Create template in templates/ directory
  2. Template will be available for use