​
Section Templates

Section templates in Glood.AI are the building blocks for displaying product recommendations in your Shopify store. They function similarly to Shopify themes, allowing you to create custom layouts and designs for your product recommendations.

​
What are Section Templates?

Section templates are modular components that determine how your product recommendations are displayed. They are:
  1. Similar to Shopify Themes: They follow the same principles as Shopify themes, using Liquid templating for dynamic content rendering.
  2. JavaScript-Powered: Templates are loaded dynamically using JavaScript through the Glood.AI app embed, which handles recommendation fetching and rendering.
  3. Headless Compatible: While templates are primarily for traditional Shopify stores, headless stores and Hydrogen apps can use our headless APIs instead.
  4. Multi-Component Structure: Each template consists of:
    • Liquid templates for markup
    • JavaScript for interactivity
    • CSS for styling
    • Settings schema for customization
    • Translation strings for internationalization
  5. Flexible Rendering: Templates can be rendered either on the frontend or backend, depending on your needs and configuration.
  6. Extensible: We provide built-in Tags, Filters, and JavaScript Hooks for easy customization and third-party app integration.

​
Template Components

A basic section template includes these core components: 
<div class="glood-section" data-section-id="{{ section.id }}">
  {%- comment -%} Template markup {%- endcomment -%}
</div>

{% stylesheet %}
  /* Template styles */
{% endstylesheet %}

{% javascript %}
  // Template JavaScript
{% javascript %}

​
Template Features

​
1. Settings Schema

  • Configurable options for layout, styling, and behavior
  • Support for various input types (text, select, color, etc.)
  • Section-specific configurations

​
2. Translations

  • Multi-language support
  • Customizable text strings
  • Fallback handling for missing translations

​
3. Liquid Markup

  • Dynamic content rendering
  • Built-in filters for data manipulation
  • Conditional rendering and loops

​
4. JavaScript

  • Event handling
  • DOM manipulation
  • API integrations
  • Cart operations

​
5. CSS

  • Responsive layouts
  • Custom styling
  • Animation support
  • Theme compatibility

​
Extension Points

We provide several ways to extend and customize templates:
  1. Tags: Custom Liquid tags for template functionality 
    {% product_ratings product_id: product.id %}
  2. Filters: Data manipulation filters 
    {{ product.price | format_money: glood.shop.money_format }}
  3. Hooks: JavaScript hooks for lifecycle events 
    initSection: (args, cb, utils) => {
  // Initialization logic
}

​
Best Practices

  1. Performance
    • Optimize images and assets
    • Minimize JavaScript execution time
    • Use efficient selectors
    • Implement lazy loading
  2. Compatibility
    • Test across different themes
    • Ensure mobile responsiveness
    • Handle edge cases gracefully
    • Support various browser versions
  3. Maintainability
    • Follow naming conventions
    • Document custom functionality
    • Use modular code structure
    • Implement error handling
  4. Accessibility
    • Use semantic HTML
    • Add ARIA attributes
    • Ensure keyboard navigation
    • Provide alt text for images

​
Libraries

The section template system uses the following core libraries that you’ll interact with when customizing templates:

​
Core Libraries

"preact": "^10.22.1"
Our UI library for building interactive components.Key Features:
  • React-compatible API
  • Lightweight (3kB)
  • Virtual DOM
  • Component-based architecture
View Preact Documentation →

​
Next Steps

  • Learn about Filters for data manipulation
  • Explore Tags for template functionality
  • Understand Hooks for JavaScript integration
  • Check out Template Structure for detailed component information

​
Support

If you need help with creating or customizing section templates, contact our support team at support@glood.ai