Skip to main content

Understanding Core Components

The template system uses seven essential building blocks that work together:
  1. glood - Global store configuration
  2. products - Product data management
  3. translations - Multi-language support
  4. section - Layout and behavior control
  5. template - Appearance and styling settings
  6. clientInfo - Device and viewport information
  7. config - Integration and feature management

glood Object

The global object contains the store information required by the glood application to work properly on your store.

Purpose and Usage

The glood object provides essential store information and configuration settings that are used throughout the template. It’s particularly important for:
  • Building correct store URLs
  • Formatting prices according to store settings
  • Handling localization

Properties Reference

Core Properties

Localization Properties

Market Properties

Shop Properties

Product Properties

Cart Properties

Config Properties

NOTE:
  1. All property keys are automatically converted to snake_case when used in Liquid templates. For example:
  • rootUrlroot_url
  • devicePixelRatiodevice_pixel_ratio
  • moneyFormatmoney_format
  1. If you want to get the content of glood object, you can access it through window.glood inside your store.
Example usage in Liquid:

products Array

The products array is a fundamental component that manages product data in the template system.

Purpose and Usage

The products array is responsible for:
  • Managing the collection of products to be displayed
  • Handling product data organization
  • Controls variant and option configurations
  • Managing pricing and inventory information
  • Providing media assets for product display

Properties Reference

NOTE: Product array structure is not fixed and it can be changed. If you want to change product array, you can visit the transformProductData hook in the hooks section.

translations Object

The translations object manages multi-language support and customizable text throughout the template.

Purpose and Usage

The translations object serves multiple purposes:
  • Provides language-specific text content
  • Enables customizable UI messages
  • Supports fallback text handling

Properties Reference

NOTE: The new, trending, and bestseller translations are used to display text inside badge on product cards. These badges help highlight product status or popularity to customers. The badges will automatically appear on products based on their tags or other criteria set in the template settings.

section Object

The section object controls how your recommendation section is structured and behaves.

Purpose and Usage

The section object is crucial for:
  • Defining the section’s basic structure
  • Managing product display layouts
  • Controlling interactive features
  • Setting up titles and descriptions
  • Handling responsive behaviors

Properties Reference

template Object

The template object is your control center for visual styling and responsive behavior.

Purpose and Usage

The template object is responsible for:
  • Managing responsive breakpoints
  • Controlling visual styling
  • Handling product card appearance
  • Managing interactive behaviors
  • Implementing custom themes

Properties Reference

NOTE:
  1. addToCartMode behavior options:
    • card_hover: Add to cart button slides up from the bottom of the card when hovering over the product card
    • image_hover: Add to cart button appears over the product image on hover
    • fix: Add to cart button is always visible below the product details
  2. The translations key in this table refers to the same structure as the translations object.
  3. Example intlOptions:
    This configuration allows for customization of:
    • Currency display format
    • Decimal place handling
    • Currency symbol presentation
    • Localized number formatting

clientInfo Object

The clientInfo object provides information about the client’s device and viewport settings.

Purpose and Usage

The clientInfo object is essential for:
  • Responsive design decisions
  • Image optimization

Properties Reference

config Object

The config object manages global configuration settings for the recommendation section.

Purpose and Usage

The config object controls:
  • Integration enablement and management
  • Third-party app configurations
  • Feature availability
  • App-specific settings

Properties Reference

Support

For help with template customization or troubleshooting, contact our support team at support@glood.ai