​
Understanding Core Components

The template system uses seven essential building blocks that work together:
  1. glood - Global store configuration
  2. products - Product data management
  3. translations - Multi-language support
  4. section - Layout and behavior control
  5. template - Appearance and styling settings
  6. clientInfo - Device and viewport information
  7. config - 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

KeyTypeDescriptionDefault Value
shopify.rootUrlstringBase URL of the Shopify store”/“

​
Localization Properties

KeyTypeDescriptionDefault Value
localization.language.localestringLanguage code”en”
localization.language.primarybooleanWhether this is primary languagetrue
localization.language.rootUrlstringBase URL for language”/“
localization.countrystringCountry code”IN”
localization.currencystringCurrency code”INR”

​
Market Properties

KeyTypeDescriptionDefault Value
market.idstringUnique market identifier”27455750381”
market.handlestringMarket handle”in”

​
Shop Properties

KeyTypeDescriptionDefault Value
shop.domainstringStore’s domain”adarsh-test2-store.myshopify.com”
shop.idstringShop identifier”73540239597”
shop.productsCountnumberTotal number of products15
shop.currencyRatestringCurrency conversion rate”1.0”
shop.moneyFormatstringStore’s currency format"Rs. \{\{amount\}\}"
shop.currencyCodestringStore’s currency code”INR”

​
Product Properties

KeyTypeDescriptionDefault Value
product.idnumberCurrent product identifier8925145628909
product.titlestringProduct title”(Sample) Coconut Bar Soap”
product.handlestringProduct handle”soap”
product.availablebooleanProduct availability statustrue
product.pricenumberProduct price2000
product.vendorstringProduct vendor”adarsh-test2-store”
product.typestringProduct type""

​
Cart Properties

KeyTypeDescriptionDefault Value
cart.currencystringCart currency”INR”
cart.itemCountnumberNumber of items in cart16
cart.totalPricenumberTotal cart price752945
cart.requiresShippingbooleanWhether cart requires shippingtrue
cart.totalWeightnumberTotal cart weight250

​
Config Properties

KeyTypeDescriptionDefault Value
config.pageTypestringType of current page”product”
config.pageUrlstringCurrent page URL”adarsh-test2-store.myshopify.com/products/soap”
config.uidstringUnique identifier”1737978965-cd63b5e8-9f99-4519-a4bc-b0dac71ccead”
NOTE:
  1. All property keys are automatically converted to snake_case when used in Liquid templates. For example:
  • rootUrl → root_url
  • devicePixelRatio → device_pixel_ratio
  • moneyFormat → money_format
  1. If you want to get the content of glood object, you can access it through window.glood inside your store.
Example usage in Liquid: 
{{ glood.shop.moneyFormat }}
{{ glood.localization.language.rootUrl }}

​
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

KeyTypeDescriptionExample
idnumberProduct identifier8925145628909
titlestringProduct name”Coconut Bar Soap”
handlestringProduct URL handle”coconut-bar-soap”
vendorstringProduct vendor name”Natural Essentials”
tagsarrayProduct tags[“new”, “organic”, “bestseller”]
featuredImage.srcstringMain product image URL”https://cdn.shopify.com/s/files/1/soap.jpg”
images[].srcstringAdditional image URLs[“https://cdn.shopify.com/s/files/1/soap-1.jpg”]
variantsarrayProduct variants[See variant example below]
variants[].idstringVariant identifier”40468007231725”
variants[].titlestringVariant title”Small / Blue”
variants[].availableForSalebooleanStock availabilitytrue
variants[].pricestringVariant price”19.99”
variants[].compareAtPricestringOriginal price”24.99”
variants[].image.srcstringVariant image URL”https://cdn.shopify.com/s/files/1/blue-soap.jpg”
variants[].selectedOptionsarraySelected variant options[See options example below]
variants[].selectedOptions[].namestringOption name”Size”
variants[].selectedOptions[].valuestringOption value”Small”
optionsarrayProduct options[See options example below]
options[].namestringOption name”Size”
options[].optionValuesarrayAvailable option values[“Small”, “Medium”, “Large”]
showComparePricebooleanShow compare at pricetrue
firstVariantobjectFirst 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 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

KeyTypeDescriptionDefault Value
oosTextstringOut of stock message”Out of stock”
addedToCartTextstringSuccess message for cart addition”Added to cart”
atcErrorTextstringError message for cart addition”Error adding to cart”
atcTextstringAdd to cart button text”Add to cart”
totalPriceTextstringTotal price label”Total price”
fbtAddToCartTextstringBundle add to cart text”Add bundle to cart”
fbtAddedToCartTextstringBundle success message”Bundle added to cart”
discountLabelTextstringDiscount label text”Save “
discountSaveTextstringSavings amount text”Save “
fbtSaveTextstringBundle savings text”Save with this bundle”
newstringNew product badge text”New”
trendingstringTrending product badge text”Trending”
bestsellerstringBestseller 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 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

KeyTypeDescriptionExample
idnumberUnique section identifier12345
layoutstringSection layout type”horizontal_grid”
locationstringSection placement location”product_page”
positionnumberSection position order1
titlestringSection heading text”You May Also Like”
templatestringTemplate identifier”default”
extraobjectAdditional section configuration{"maxProducts":4}
discountConfigobjectDiscount settings{"type":"percentage","value":20}
showDiscountLabelbooleanDisplay discount labelstrue
translationsobjectSection-specific translations{"discountText":"Save"}
templateV3booleanUsing template version 3true
sectionServeIdstringUnique serve identifier”s-12345-abcd-9876”
pageTypestringPage section appears on”product”

​
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

KeyTypeDescriptionExampleDefault Value
settings.breakpoints.smallobjectMobile device settingsSee breakpoint example
settings.breakpoints.mediumobjectTablet device settingsSee breakpoint example
settings.breakpoints.largeobjectDesktop device settingsSee breakpoint example
settings.breakpoints[].cardsPerViewnumberNumber of cards per row2 (mobile), 3 (tablet), 4 (desktop)4
settings.breakpoints[].gutternumberSpace between cards in pixels10 (mobile), 20 (desktop)20
settings.breakpoints[].justifyWidgetTitleenumTitle alignment"left", "center", "right"”left”
settings.breakpoints[].widgetTitleAlignmentstringWidget title positioning"left", "center", "right"”left”
settings.breakpoints[].productTitleAlignmentstringProduct title alignment"left", "center", "right"”left”
settings.breakpoints[].comparePriceVisiblebooleanShow/hide compare pricetrue, falsefalse
settings.breakpoints[].imageWidthnumberProduct image width300300
settings.breakpoints[].imageHeightnumberProduct image height300300
settings.breakpoints[].screenSizenumberBreakpoint width threshold768768
settings.breakpoints[].maxSectionTitleRowsnumberMaximum section title rows22
settings.breakpoints[].maxProductTitleRowsnumberMaximum product title rows22
settings.breakpoints[].widgetTitleFontSizenumberSection title font size2424
settings.breakpoints[].productTitleFontSizenumberProduct title font size1616
settings.breakpoints[].productVendorFontSizenumberVendor name font size1414
settings.productCard.vendorPositionenumVendor position"above", "below", "hidden"hidden
settings.productCard.addToCartModeenumAdd to cart behavior"card_hover", "image_hover", "fix"card_hover
settings.productCard.imageHoverModeenumImage hover effect"secondary", "zoom", "none"secondary
settings.productCard.imageObjectFitenumImage fitting mode"contain", "cover"contain
settings.productCard.priceCompareModeenumCompare price position"before", "after", "hidden"before
settings.productCard.discountLabelPositionenumDiscount badge position"left", "right", "center"center
settings.productCard.variantSelectorTypeenumVariant selection UI"integrated", "selector", "swatch"integrated
settings.productCard.showQuantitySelectorbooleanShow quantity selectortrue, falsefalse
settings.productCard.minQuantitynumberMinimum order quantity1
settings.productCard.maxQuantitynumberMaximum order quantity10
settings.productCard.imageAspectRatiostringImage aspect ratio"1:1"
settings.productCard.showVendorbooleanShow/hide vendor nametrue
settings.productCard.maxTitleLinesnumberMaximum product title lines2
settings.productCard.showDiscountPillbooleanShow/hide discount badgetrue
settings.labelsarrayProduct label configurationsSee labels example
settings.labels[].namestringLabel name"new", "sale"
settings.labels[].textColorstringLabel text color"#ffffff"
settings.labels[].backgroundColorstringLabel background color"#ff0000"
settings.maxLabelsCountnumberMaximum labels to show2
settings.swatchesarraySwatch configurationsSee swatches example
settings.swatches[].typeenumSwatch type"color", "size"
settings.swatches[].keystringOption key to match"color", "size"
settings.swatches[].optionNamesarrayValid option names["Color", "Colour"]
settings.carousel.librarystringCarousel library to use"swiper"
settings.carousel.showPaginationbooleanShow carousel paginationtrue, falsefalse
settings.amazonBoughtTogether.priceCompareAtModeenumBundle price compare mode"before", "after"before
settings.amazonBoughtTogether.buttonBackgroundColorstringBundle button background"#000000"
translationsobjectSection-specific translationsSee translations object
settings.intlOptionsobjectLocale based currency formatting optionsIntl DOM API options
NOTE:
  1. addToCartMode behavior options:
    • card_hover: Add to cart button slides up from the bottom of the card when hovering over the product card
    • image_hover: Add to cart button appears over the product image on hover
    • fix: Add to cart button is always visible below the product details
  2. The translations key in this table refers to the same structure as the translations object.
  3. Example intlOptions: 
    {
   "en": {
      "style": "currency",
      "currency": "USD",
      "minimumFractionDigits": 2,
      "maximumFractionDigits": 2,
      "currencyDisplay": "symbol"
   }
}
    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

KeyTypeDescriptionExample
clientWidthnumberCurrent viewport width in pixels1440
clientHeightnumberCurrent viewport height in pixels900
devicePixelRationumberDevice pixel ratio for image optimization2
userAgentstringBrowser’s user agent string”Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36”

​
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

​
Properties Reference

KeyTypeDescriptionPossible Values
config.integrationsEnabledarrayList of enabled integration slugs["judge_me", "loox", "stamped", "rivyo", "okendo", "ali", "ssw", "ryviu", "spr", "lai", "junip"]
config.productReviewAppstringSelected product review app name"judge_me", "loox", "stamped", "rivyo", "okendo", "ali", "ryviu", "lai", "junip" (or none if not using reviews)
config.swatchAppstringSelected swatch app name"variant_options_swatch_king", "csp" (or none if not using swatches)

​
Support

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