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 managementglood
ObjectThe global object contains the store information required by the glood application to work properly on your store.
The glood object provides essential store information and configuration settings that are used throughout the template. It’s particularly important for:
Key | Type | Description | Default Value |
---|---|---|---|
shopify.rootUrl | string | Base URL of the Shopify store | ”/“ |
Key | Type | Description | Default Value |
---|---|---|---|
localization.language.locale | string | Language code | ”en” |
localization.language.primary | boolean | Whether this is primary language | true |
localization.language.rootUrl | string | Base URL for language | ”/“ |
localization.country | string | Country code | ”IN” |
localization.currency | string | Currency code | ”INR” |
Key | Type | Description | Default Value |
---|---|---|---|
market.id | string | Unique market identifier | ”27455750381” |
market.handle | string | Market handle | ”in” |
Key | Type | Description | Default Value |
---|---|---|---|
shop.domain | string | Store’s domain | ”adarsh-test2-store.myshopify.com” |
shop.id | string | Shop identifier | ”73540239597” |
shop.productsCount | number | Total number of products | 15 |
shop.currencyRate | string | Currency conversion rate | ”1.0” |
shop.moneyFormat | string | Store’s currency format | "Rs. \{\{amount\}\}" |
shop.currencyCode | string | Store’s currency code | ”INR” |
Key | Type | Description | Default Value |
---|---|---|---|
product.id | number | Current product identifier | 8925145628909 |
product.title | string | Product title | ”(Sample) Coconut Bar Soap” |
product.handle | string | Product handle | ”soap” |
product.available | boolean | Product availability status | true |
product.price | number | Product price | 2000 |
product.vendor | string | Product vendor | ”adarsh-test2-store” |
product.type | string | Product type | "" |
Key | Type | Description | Default Value |
---|---|---|---|
cart.currency | string | Cart currency | ”INR” |
cart.itemCount | number | Number of items in cart | 16 |
cart.totalPrice | number | Total cart price | 752945 |
cart.requiresShipping | boolean | Whether cart requires shipping | true |
cart.totalWeight | number | Total cart weight | 250 |
Key | Type | Description | Default Value |
---|---|---|---|
config.pageType | string | Type of current page | ”product” |
config.pageUrl | string | Current page URL | ”adarsh-test2-store.myshopify.com/products/soap” |
config.uid | string | Unique identifier | ”1737978965-cd63b5e8-9f99-4519-a4bc-b0dac71ccead” |
NOTE:
rootUrl
→ root_url
devicePixelRatio
→ device_pixel_ratio
moneyFormat
→ money_format
window.glood
inside your store.Example usage in Liquid:
products
ArrayThe products array is a fundamental component that manages product data in the template system.
The products array is responsible for:
Key | Type | Description | Example |
---|---|---|---|
id | number | Product identifier | 8925145628909 |
title | string | Product name | ”Coconut Bar Soap” |
handle | string | Product URL handle | ”coconut-bar-soap” |
vendor | string | Product vendor name | ”Natural Essentials” |
tags | array | Product tags | [“new”, “organic”, “bestseller”] |
featuredImage.src | string | Main product image URL | ”https://cdn.shopify.com/s/files/1/soap.jpg” |
images[].src | string | Additional image URLs | [“https://cdn.shopify.com/s/files/1/soap-1.jpg”] |
variants | array | Product variants | [See variant example below] |
variants[].id | string | Variant identifier | ”40468007231725” |
variants[].title | string | Variant title | ”Small / Blue” |
variants[].availableForSale | boolean | Stock availability | true |
variants[].price | string | Variant price | ”19.99” |
variants[].compareAtPrice | string | Original price | ”24.99” |
variants[].image.src | string | Variant image URL | ”https://cdn.shopify.com/s/files/1/blue-soap.jpg” |
variants[].selectedOptions | array | Selected variant options | [See options example below] |
variants[].selectedOptions[].name | string | Option name | ”Size” |
variants[].selectedOptions[].value | string | Option value | ”Small” |
options | array | Product options | [See options example below] |
options[].name | string | Option name | ”Size” |
options[].optionValues | array | Available option values | [“Small”, “Medium”, “Large”] |
showComparePrice | boolean | Show compare at price | true |
firstVariant | object | First available variant | [See variant example above] |
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
ObjectThe translations object manages multi-language support and customizable text throughout the template.
The translations object serves multiple purposes:
Key | Type | Description | Default Value |
---|---|---|---|
oosText | string | Out of stock message | ”Out of stock” |
addedToCartText | string | Success message for cart addition | ”Added to cart” |
atcErrorText | string | Error message for cart addition | ”Error adding to cart” |
atcText | string | Add to cart button text | ”Add to cart” |
totalPriceText | string | Total price label | ”Total price” |
fbtAddToCartText | string | Bundle add to cart text | ”Add bundle to cart” |
fbtAddedToCartText | string | Bundle success message | ”Bundle added to cart” |
discountLabelText | string | Discount label text | ”Save “ |
discountSaveText | string | Savings amount text | ”Save “ |
fbtSaveText | string | Bundle savings text | ”Save with this bundle” |
new | string | New product badge text | ”New” |
trending | string | Trending product badge text | ”Trending” |
bestseller | string | Bestseller badge text | ”Bestseller” |
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
ObjectThe section object controls how your recommendation section is structured and behaves.
The section object is crucial for:
Key | Type | Description | Example |
---|---|---|---|
id | number | Unique section identifier | 12345 |
layout | string | Section layout type | ”horizontal_grid” |
location | string | Section placement location | ”product_page” |
position | number | Section position order | 1 |
title | string | Section heading text | ”You May Also Like” |
template | string | Template identifier | ”default” |
extra | object | Additional section configuration | {"maxProducts":4} |
discountConfig | object | Discount settings | {"type":"percentage","value":20} |
showDiscountLabel | boolean | Display discount labels | true |
translations | object | Section-specific translations | {"discountText":"Save"} |
templateV3 | boolean | Using template version 3 | true |
sectionServeId | string | Unique serve identifier | ”s-12345-abcd-9876” |
pageType | string | Page section appears on | ”product” |
template
ObjectThe template object is your control center for visual styling and responsive behavior.
The template object is responsible for:
Key | Type | Description | Example | Default Value |
---|---|---|---|---|
settings.breakpoints.small | object | Mobile device settings | See breakpoint example | |
settings.breakpoints.medium | object | Tablet device settings | See breakpoint example | |
settings.breakpoints.large | object | Desktop device settings | See breakpoint example | |
settings.breakpoints[].cardsPerView | number | Number of cards per row | 2 (mobile), 3 (tablet), 4 (desktop) | 4 |
settings.breakpoints[].gutter | number | Space between cards in pixels | 10 (mobile), 20 (desktop) | 20 |
settings.breakpoints[].justifyWidgetTitle | enum | Title alignment | "left" , "center" , "right" | ”left” |
settings.breakpoints[].widgetTitleAlignment | string | Widget title positioning | "left" , "center" , "right" | ”left” |
settings.breakpoints[].productTitleAlignment | string | Product title alignment | "left" , "center" , "right" | ”left” |
settings.breakpoints[].comparePriceVisible | boolean | Show/hide compare price | true , false | false |
settings.breakpoints[].imageWidth | number | Product image width | 300 | 300 |
settings.breakpoints[].imageHeight | number | Product image height | 300 | 300 |
settings.breakpoints[].screenSize | number | Breakpoint width threshold | 768 | 768 |
settings.breakpoints[].maxSectionTitleRows | number | Maximum section title rows | 2 | 2 |
settings.breakpoints[].maxProductTitleRows | number | Maximum product title rows | 2 | 2 |
settings.breakpoints[].widgetTitleFontSize | number | Section title font size | 24 | 24 |
settings.breakpoints[].productTitleFontSize | number | Product title font size | 16 | 16 |
settings.breakpoints[].productVendorFontSize | number | Vendor name font size | 14 | 14 |
settings.productCard.vendorPosition | enum | Vendor position | "above" , "below" , "hidden" | hidden |
settings.productCard.addToCartMode | enum | Add to cart behavior | "card_hover" , "image_hover" , "fix" | card_hover |
settings.productCard.imageHoverMode | enum | Image hover effect | "secondary" , "zoom" , "none" | secondary |
settings.productCard.imageObjectFit | enum | Image fitting mode | "contain" , "cover" | contain |
settings.productCard.priceCompareMode | enum | Compare price position | "before" , "after" , "hidden" | before |
settings.productCard.discountLabelPosition | enum | Discount badge position | "left" , "right" , "center" | center |
settings.productCard.variantSelectorType | enum | Variant selection UI | "integrated" , "selector" , "swatch" | integrated |
settings.productCard.showQuantitySelector | boolean | Show quantity selector | true , false | false |
settings.productCard.minQuantity | number | Minimum order quantity | 1 | |
settings.productCard.maxQuantity | number | Maximum order quantity | 10 | |
settings.productCard.imageAspectRatio | string | Image aspect ratio | "1:1" | |
settings.productCard.showVendor | boolean | Show/hide vendor name | true | |
settings.productCard.maxTitleLines | number | Maximum product title lines | 2 | |
settings.productCard.showDiscountPill | boolean | Show/hide discount badge | true | |
settings.labels | array | Product label configurations | See labels example | |
settings.labels[].name | string | Label name | "new" , "sale" | |
settings.labels[].textColor | string | Label text color | "#ffffff" | |
settings.labels[].backgroundColor | string | Label background color | "#ff0000" | |
settings.maxLabelsCount | number | Maximum labels to show | 2 | |
settings.swatches | array | Swatch configurations | See swatches example | |
settings.swatches[].type | enum | Swatch type | "color" , "size" | |
settings.swatches[].key | string | Option key to match | "color" , "size" | |
settings.swatches[].optionNames | array | Valid option names | ["Color", "Colour"] | |
settings.carousel.library | string | Carousel library to use | "swiper" | |
settings.carousel.showPagination | boolean | Show carousel pagination | true , false | false |
settings.amazonBoughtTogether.priceCompareAtMode | enum | Bundle price compare mode | "before" , "after" | before |
settings.amazonBoughtTogether.buttonBackgroundColor | string | Bundle button background | "#000000" | |
translations | object | Section-specific translations | See translations object | |
settings.intlOptions | object | Locale based currency formatting options | Intl DOM API options |
NOTE:
addToCartMode
behavior 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 detailsThe translations
key in this table refers to the same structure as the translations object.
Example intlOptions:
This configuration allows for customization of:
clientInfo
ObjectThe clientInfo object provides information about the client’s device and viewport settings.
The clientInfo object is essential for:
Key | Type | Description | Example |
---|---|---|---|
clientWidth | number | Current viewport width in pixels | 1440 |
clientHeight | number | Current viewport height in pixels | 900 |
devicePixelRatio | number | Device pixel ratio for image optimization | 2 |
userAgent | string | Browser’s user agent string | ”Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36” |
config
ObjectThe config object manages global configuration settings for the recommendation section.
The config object controls:
Key | Type | Description | Possible Values |
---|---|---|---|
config.integrationsEnabled | array | List of enabled integration slugs | ["judge_me", "loox", "stamped", "rivyo", "okendo", "ali", "ssw", "ryviu", "spr", "lai", "junip"] |
config.productReviewApp | string | Selected product review app name | "judge_me", "loox", "stamped", "rivyo", "okendo", "ali", "ryviu", "lai", "junip" (or none if not using reviews) |
config.swatchApp | string | Selected swatch app name | "variant_options_swatch_king", "csp" (or none if not using swatches) |
For help with template customization or troubleshooting, contact our support team at support@glood.ai
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 managementglood
ObjectThe global object contains the store information required by the glood application to work properly on your store.
The glood object provides essential store information and configuration settings that are used throughout the template. It’s particularly important for:
Key | Type | Description | Default Value |
---|---|---|---|
shopify.rootUrl | string | Base URL of the Shopify store | ”/“ |
Key | Type | Description | Default Value |
---|---|---|---|
localization.language.locale | string | Language code | ”en” |
localization.language.primary | boolean | Whether this is primary language | true |
localization.language.rootUrl | string | Base URL for language | ”/“ |
localization.country | string | Country code | ”IN” |
localization.currency | string | Currency code | ”INR” |
Key | Type | Description | Default Value |
---|---|---|---|
market.id | string | Unique market identifier | ”27455750381” |
market.handle | string | Market handle | ”in” |
Key | Type | Description | Default Value |
---|---|---|---|
shop.domain | string | Store’s domain | ”adarsh-test2-store.myshopify.com” |
shop.id | string | Shop identifier | ”73540239597” |
shop.productsCount | number | Total number of products | 15 |
shop.currencyRate | string | Currency conversion rate | ”1.0” |
shop.moneyFormat | string | Store’s currency format | "Rs. \{\{amount\}\}" |
shop.currencyCode | string | Store’s currency code | ”INR” |
Key | Type | Description | Default Value |
---|---|---|---|
product.id | number | Current product identifier | 8925145628909 |
product.title | string | Product title | ”(Sample) Coconut Bar Soap” |
product.handle | string | Product handle | ”soap” |
product.available | boolean | Product availability status | true |
product.price | number | Product price | 2000 |
product.vendor | string | Product vendor | ”adarsh-test2-store” |
product.type | string | Product type | "" |
Key | Type | Description | Default Value |
---|---|---|---|
cart.currency | string | Cart currency | ”INR” |
cart.itemCount | number | Number of items in cart | 16 |
cart.totalPrice | number | Total cart price | 752945 |
cart.requiresShipping | boolean | Whether cart requires shipping | true |
cart.totalWeight | number | Total cart weight | 250 |
Key | Type | Description | Default Value |
---|---|---|---|
config.pageType | string | Type of current page | ”product” |
config.pageUrl | string | Current page URL | ”adarsh-test2-store.myshopify.com/products/soap” |
config.uid | string | Unique identifier | ”1737978965-cd63b5e8-9f99-4519-a4bc-b0dac71ccead” |
NOTE:
rootUrl
→ root_url
devicePixelRatio
→ device_pixel_ratio
moneyFormat
→ money_format
window.glood
inside your store.Example usage in Liquid:
products
ArrayThe products array is a fundamental component that manages product data in the template system.
The products array is responsible for:
Key | Type | Description | Example |
---|---|---|---|
id | number | Product identifier | 8925145628909 |
title | string | Product name | ”Coconut Bar Soap” |
handle | string | Product URL handle | ”coconut-bar-soap” |
vendor | string | Product vendor name | ”Natural Essentials” |
tags | array | Product tags | [“new”, “organic”, “bestseller”] |
featuredImage.src | string | Main product image URL | ”https://cdn.shopify.com/s/files/1/soap.jpg” |
images[].src | string | Additional image URLs | [“https://cdn.shopify.com/s/files/1/soap-1.jpg”] |
variants | array | Product variants | [See variant example below] |
variants[].id | string | Variant identifier | ”40468007231725” |
variants[].title | string | Variant title | ”Small / Blue” |
variants[].availableForSale | boolean | Stock availability | true |
variants[].price | string | Variant price | ”19.99” |
variants[].compareAtPrice | string | Original price | ”24.99” |
variants[].image.src | string | Variant image URL | ”https://cdn.shopify.com/s/files/1/blue-soap.jpg” |
variants[].selectedOptions | array | Selected variant options | [See options example below] |
variants[].selectedOptions[].name | string | Option name | ”Size” |
variants[].selectedOptions[].value | string | Option value | ”Small” |
options | array | Product options | [See options example below] |
options[].name | string | Option name | ”Size” |
options[].optionValues | array | Available option values | [“Small”, “Medium”, “Large”] |
showComparePrice | boolean | Show compare at price | true |
firstVariant | object | First available variant | [See variant example above] |
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
ObjectThe translations object manages multi-language support and customizable text throughout the template.
The translations object serves multiple purposes:
Key | Type | Description | Default Value |
---|---|---|---|
oosText | string | Out of stock message | ”Out of stock” |
addedToCartText | string | Success message for cart addition | ”Added to cart” |
atcErrorText | string | Error message for cart addition | ”Error adding to cart” |
atcText | string | Add to cart button text | ”Add to cart” |
totalPriceText | string | Total price label | ”Total price” |
fbtAddToCartText | string | Bundle add to cart text | ”Add bundle to cart” |
fbtAddedToCartText | string | Bundle success message | ”Bundle added to cart” |
discountLabelText | string | Discount label text | ”Save “ |
discountSaveText | string | Savings amount text | ”Save “ |
fbtSaveText | string | Bundle savings text | ”Save with this bundle” |
new | string | New product badge text | ”New” |
trending | string | Trending product badge text | ”Trending” |
bestseller | string | Bestseller badge text | ”Bestseller” |
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
ObjectThe section object controls how your recommendation section is structured and behaves.
The section object is crucial for:
Key | Type | Description | Example |
---|---|---|---|
id | number | Unique section identifier | 12345 |
layout | string | Section layout type | ”horizontal_grid” |
location | string | Section placement location | ”product_page” |
position | number | Section position order | 1 |
title | string | Section heading text | ”You May Also Like” |
template | string | Template identifier | ”default” |
extra | object | Additional section configuration | {"maxProducts":4} |
discountConfig | object | Discount settings | {"type":"percentage","value":20} |
showDiscountLabel | boolean | Display discount labels | true |
translations | object | Section-specific translations | {"discountText":"Save"} |
templateV3 | boolean | Using template version 3 | true |
sectionServeId | string | Unique serve identifier | ”s-12345-abcd-9876” |
pageType | string | Page section appears on | ”product” |
template
ObjectThe template object is your control center for visual styling and responsive behavior.
The template object is responsible for:
Key | Type | Description | Example | Default Value |
---|---|---|---|---|
settings.breakpoints.small | object | Mobile device settings | See breakpoint example | |
settings.breakpoints.medium | object | Tablet device settings | See breakpoint example | |
settings.breakpoints.large | object | Desktop device settings | See breakpoint example | |
settings.breakpoints[].cardsPerView | number | Number of cards per row | 2 (mobile), 3 (tablet), 4 (desktop) | 4 |
settings.breakpoints[].gutter | number | Space between cards in pixels | 10 (mobile), 20 (desktop) | 20 |
settings.breakpoints[].justifyWidgetTitle | enum | Title alignment | "left" , "center" , "right" | ”left” |
settings.breakpoints[].widgetTitleAlignment | string | Widget title positioning | "left" , "center" , "right" | ”left” |
settings.breakpoints[].productTitleAlignment | string | Product title alignment | "left" , "center" , "right" | ”left” |
settings.breakpoints[].comparePriceVisible | boolean | Show/hide compare price | true , false | false |
settings.breakpoints[].imageWidth | number | Product image width | 300 | 300 |
settings.breakpoints[].imageHeight | number | Product image height | 300 | 300 |
settings.breakpoints[].screenSize | number | Breakpoint width threshold | 768 | 768 |
settings.breakpoints[].maxSectionTitleRows | number | Maximum section title rows | 2 | 2 |
settings.breakpoints[].maxProductTitleRows | number | Maximum product title rows | 2 | 2 |
settings.breakpoints[].widgetTitleFontSize | number | Section title font size | 24 | 24 |
settings.breakpoints[].productTitleFontSize | number | Product title font size | 16 | 16 |
settings.breakpoints[].productVendorFontSize | number | Vendor name font size | 14 | 14 |
settings.productCard.vendorPosition | enum | Vendor position | "above" , "below" , "hidden" | hidden |
settings.productCard.addToCartMode | enum | Add to cart behavior | "card_hover" , "image_hover" , "fix" | card_hover |
settings.productCard.imageHoverMode | enum | Image hover effect | "secondary" , "zoom" , "none" | secondary |
settings.productCard.imageObjectFit | enum | Image fitting mode | "contain" , "cover" | contain |
settings.productCard.priceCompareMode | enum | Compare price position | "before" , "after" , "hidden" | before |
settings.productCard.discountLabelPosition | enum | Discount badge position | "left" , "right" , "center" | center |
settings.productCard.variantSelectorType | enum | Variant selection UI | "integrated" , "selector" , "swatch" | integrated |
settings.productCard.showQuantitySelector | boolean | Show quantity selector | true , false | false |
settings.productCard.minQuantity | number | Minimum order quantity | 1 | |
settings.productCard.maxQuantity | number | Maximum order quantity | 10 | |
settings.productCard.imageAspectRatio | string | Image aspect ratio | "1:1" | |
settings.productCard.showVendor | boolean | Show/hide vendor name | true | |
settings.productCard.maxTitleLines | number | Maximum product title lines | 2 | |
settings.productCard.showDiscountPill | boolean | Show/hide discount badge | true | |
settings.labels | array | Product label configurations | See labels example | |
settings.labels[].name | string | Label name | "new" , "sale" | |
settings.labels[].textColor | string | Label text color | "#ffffff" | |
settings.labels[].backgroundColor | string | Label background color | "#ff0000" | |
settings.maxLabelsCount | number | Maximum labels to show | 2 | |
settings.swatches | array | Swatch configurations | See swatches example | |
settings.swatches[].type | enum | Swatch type | "color" , "size" | |
settings.swatches[].key | string | Option key to match | "color" , "size" | |
settings.swatches[].optionNames | array | Valid option names | ["Color", "Colour"] | |
settings.carousel.library | string | Carousel library to use | "swiper" | |
settings.carousel.showPagination | boolean | Show carousel pagination | true , false | false |
settings.amazonBoughtTogether.priceCompareAtMode | enum | Bundle price compare mode | "before" , "after" | before |
settings.amazonBoughtTogether.buttonBackgroundColor | string | Bundle button background | "#000000" | |
translations | object | Section-specific translations | See translations object | |
settings.intlOptions | object | Locale based currency formatting options | Intl DOM API options |
NOTE:
addToCartMode
behavior 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 detailsThe translations
key in this table refers to the same structure as the translations object.
Example intlOptions:
This configuration allows for customization of:
clientInfo
ObjectThe clientInfo object provides information about the client’s device and viewport settings.
The clientInfo object is essential for:
Key | Type | Description | Example |
---|---|---|---|
clientWidth | number | Current viewport width in pixels | 1440 |
clientHeight | number | Current viewport height in pixels | 900 |
devicePixelRatio | number | Device pixel ratio for image optimization | 2 |
userAgent | string | Browser’s user agent string | ”Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36” |
config
ObjectThe config object manages global configuration settings for the recommendation section.
The config object controls:
Key | Type | Description | Possible Values |
---|---|---|---|
config.integrationsEnabled | array | List of enabled integration slugs | ["judge_me", "loox", "stamped", "rivyo", "okendo", "ali", "ssw", "ryviu", "spr", "lai", "junip"] |
config.productReviewApp | string | Selected product review app name | "judge_me", "loox", "stamped", "rivyo", "okendo", "ali", "ryviu", "lai", "junip" (or none if not using reviews) |
config.swatchApp | string | Selected swatch app name | "variant_options_swatch_king", "csp" (or none if not using swatches) |
For help with template customization or troubleshooting, contact our support team at support@glood.ai