Template Code

Every section template in Glood.AI consists of several core files that work together to create a complete recommendation section. We use the liquidJS library to render Liquid code at the client side. For any queries regarding Liquid-specific data structures, filters, or tags, please refer to the Shopify Liquid documentation.

Core Parts

1. Section Template

The main template that defines the HTML structure and dynamic content rendering. It uses data structures defined in the Object Definitions.

Dynamic Implementation

Uses translations object for text content
Accesses glood object for store configuration
Renders product data in templates
Applies template settings for styling

Liquid Filters

Our filters used in the template:

Filter	Purpose	Parameters	Output	Example
`money`	Price formatting	Number/String, `money_format`: Override default format	Formatted price	`19.99 \| money` → `"$19.99"`
`optimize_image`	Image optimization	URL, `width`: Desired width, `height`: Desired height, `crop`: Crop mode	Optimized URL	`product.image \| optimize_image: width: 300, height: 300`
`tracking_url`	Add tracking	Product, `section` (required): Section context, `ref_product_id`: Reference product ID	URL with params	`product \| tracking_url: section`
`section_discount`	Format discount	Section, `money_format`: Price format, `locale`: Language code	Discount string	`section \| section_discount: money_format: shop.money_format`

2. JS Hooks

The JavaScript hooks system provides a powerful way to customize and extend section behavior. These hooks are called at specific points in the section’s lifecycle, allowing you to implement custom functionality and handle various events.

Core callBacks available

Method Name	Parameters	Description	Return
`initSwiper`	`(Swiper, templateSettings, container, params, defaultSettings, utils)`	Initializes carousel functionality	`Swiper instance`
`onSectionInit`	`(args, cb, gloodUtils)`	Called when section initializes	`void`
`onSectionRenderComplete`	`(args, utils)`	Called after section rendering	`void`
`onVariantChange`	`(args, utils)`	Handles variant selection	`void`
`onSwatchChange`	`(args, utils)`	Handles swatch selection	`void`
`validateCartOperation`	`(payload, recommendation, utils)`	Validates cart operations	`{payload, error}`
`onCartOperationComplete`	`(args, utils)`	Called after cart operation	`void`
`onProductDataReceived`	`(args, utils)`	Handles product data	`void`
`getProductDetailsQuery`	`(recommendation, glood)`	Returns GraphQL query	`string`
`transformProductData`	`(product, recommendation)`	Transforms product data	`object`
`onSectionRendered`	`(section, products)`	Fired when section is fully rendered	`void`
`onProductClick`	`(section, products, productId)`	Fired when product is clicked	`void`
`onAddToCart`	`(section, products, items, response)`	Fired on successful cart addition	`void`
`onVariantSelected`	`(section, products, productId, variantId)`	Fired when variant is selected	`void`

Example Implementation

// Example: Carousel Initialization Hook
initSwiper: (Swiper, templateSettings, container, params) => {
    const carouselContainer = container.querySelector('._gai-crz-cnt');
    if (!carouselContainer) return;
    
    return new Swiper(carouselContainer, {
        slidesPerView: templateSettings.breakpoints.small.cardsPerView,
        spaceBetween: templateSettings.breakpoints.small.gutter
    });
}

// Example: Variant Change Hook
onVariantChange: (args, utils) => {
    const { variant, product, container } = args;
    const priceElement = container.querySelector('._gai-prod-prc');
    if (priceElement && variant.price) {
        priceElement.textContent = utils.formatMoney(variant.price);
    }
}

3. CSS Template

The CSS template system provides a flexible way to style your recommendation sections. It uses Liquid templating for dynamic styling based on section settings and configuration. Both section template and CSS template have access to the same template object. For a complete reference of available objects and their structure, see Template Objects.

Structure and Organization

The CSS is organized by components and breakpoints:

Base styles for mobile-first approach
Tablet styles (default: 768px)
Desktop styles (default: 1024px)

NOTE:

The CSS follows a mobile-first approach, where base styles are written for mobile devices and then progressively enhanced for larger screens through media queries. This ensures optimal performance and maintainability while providing a solid foundation for responsive design.
These breakpoint values are customizable through the template settings. For detailed configuration options, see settings.breakpoints[].screenSize in the Template Object documentation.

CSS Class Reference

Class Name	Purpose	Properties Controlled	Example Usage
`._gai-grid`	Main product grid container	- Grid layout (`grid-template-columns`) - Gap between items - Responsive columns	Controls overall product grid layout
`._gai-sec-tit`	Section title styling	- Font size - Text alignment - Line clamping - Display properties - Webkit box orientation	Main section heading appearance
`._gai-prod-card`	Individual product card	- Background color - Font family - Max width (for bundle layout)	Container for each product
`._gai-prod-img`	Product image container	- Aspect ratio - Object-fit	Product image display
`._gai-prod-img-wrap`	Image wrapper	- Aspect ratio	Controls image container proportions
`._gai-prod-tit`	Product title	- Color - Font weight - Line clamping - Text alignment - Font size - Font family	Product name styling
`._gai-prod-vndr`	Vendor name	- Font size - Display properties	Brand/vendor name display
`._gai-prod-vndr--above-title`	Vendor name above title	- Display (block/none)	Vendor positioning above title
`._gai-prod-vndr--below-title`	Vendor name below title	- Display (block/none)	Vendor positioning below title
`._gai-prod-prc`	Product price	- Color - Font family - Font size	Main price display
`._gai-prod-prc--compare-at`	Compare-at price	- Color - Display - Visibility conditions	Original/compare price styling
`._gai-atc-btn`	Add to cart button	- Background color - Text color - Border - Border radius - Disabled state	Add to cart button styling
`._gai-dis-cnt`	Discount container	- Justification - Background color - Display (flex/none)	Discount information wrapper
`._gai-dis-txt`	Discount text	- Color - Font size	Discount amount/percentage text
`._gai-dis`	Discount badge	- Background color - Text color - Opacity	Discount label styling
`._gai-container`	Main section container	- Background color	Section wrapper styling
`._gai-bundle-products`	Bundle products grid	- Grid template columns	Layout for bundled products
`._gai-skl-atc`	Skeleton add to cart	- Display visibility	Loading state for add to cart
`._gai-bndl-sec`	Bundle section	- Justify content	Bundle section layout
`._gai-amz-tit`	Amazon bundle title	- Text alignment	Title for Amazon-style bundles

Label Classes

Special classes for product status and badges:

Class Name	Purpose	Customizable Properties
`._gai-oos`	Out of stock badge	- Background color - Text color
`._gai-bestseller`	Bestseller badge	- Background color - Text color
`._gai-new`	New product badge	- Background color - Text color
`._gai-trending`	Trending item badge	- Background color - Text color

Responsive Behavior

The code includes media queries for different screen sizes:

/* Mobile (default) */
[data-gai-section-id="{{ section_id }}"] ._gai-grid {
  grid-template-columns: repeat({{- settings.breakpoints.small.cards_per_view -}}, 1fr);
  gap: {{ settings.breakpoints.small.gutter }}px;
}

/* Tablet */
@media (min-width: {{ settings.breakpoints.medium.screen_size }}px) {
  /* Tablet-specific styles */
}

/* Desktop */
@media (min-width: {{ settings.breakpoints.large.screen_size }}px) {
  /* Desktop-specific styles */
}

Support

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

​Template Code

​Core Parts

​1. Section Template

​Dynamic Implementation

​Liquid Filters

​2. JS Hooks

​Core callBacks available

​Example Implementation

​3. CSS Template

​Structure and Organization

​CSS Class Reference

​Label Classes

​Responsive Behavior

​Support