Understanding Core Components
The template system uses seven essential building blocks that work together:glood- Global store configurationproducts- Product data managementtranslations- Multi-language supportsection- Layout and behavior controltemplate- Appearance and styling settingsclientInfo- Device and viewport informationconfig- 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:
- All property keys are automatically converted to snake_case when used in Liquid templates. For example:
rootUrl→root_urldevicePixelRatio→device_pixel_ratiomoneyFormat→money_format
- If you want to get the content of glood object, you can access it through
window.gloodinside your store.
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:
-
addToCartModebehavior options:card_hover: Add to cart button slides up from the bottom of the card when hovering over the product cardimage_hover: Add to cart button appears over the product image on hoverfix: Add to cart button is always visible below the product details
-
The
translationskey in this table refers to the same structure as the translations object. -
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