​

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:

​

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

​

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:

1. 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.
2. 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

​

Label Classes

Special classes for product status and badges:

​

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