Liquid drops reference — catalog

This article covers the Liquid drops for StoreConnect’s catalog domain: products, pricing, categories, brands, variants, and traits.

• For global/store drops, see Liquid drops — global context.
• For cart, order, and checkout drops, see Liquid drops — cart and order.
• For content, account, and location drops, see Liquid drops — content and accounts.

ProductDrop

The primary product object. Available as current_product on product detail pages, and as individual items in all_products or category product collections.

ProductPricingDrop

Detailed pricing information. Accessed via product.pricing.

```liquid

{% if product.pricing.on_sale? %} {{ product.pricing.original_price | money }} {{ product.pricing.price | money }} {% else %} {{ product.pricing.price | money }} {% endif %} ```

ProductCategoryDrop

A product category. Available as current_product_category on category pages.

BrandDrop

A product brand.

Variant drops

StoreConnect uses an n-ary variant system — products can have any number of variant types (Color, Size, Material, etc.).

VariantTypeDrop

A variant dimension (e.g., “Color”, “Size”).

VariantOptionDrop

A specific value for a variant type (e.g., “Red”, “Large”).

VariantChoiceDrop

Links a variant option to a specific product variant.

Rendering a variant selector:

```liquid

{% for type in current_product.variant_types %}

{% endfor %} ```

Trait drops

TraitDrop

A product attribute/characteristic.

TraitTypeDrop

A trait type definition.

TraitGroupDrop

A group of related traits.

TraitCategoryDrop

A category organizing trait groups.

Rendering traits:

```liquid

{% for group in product.trait_groups %}

{{ group.name }}

{% for trait in product.traits %} {% if trait.trait_type.trait_group.name == group.name %}

{{ trait.name }}

{{ trait.value }}

{% endif %} {% endfor %}

{% endfor %} ```

Or use the built-in filter for the default rendering:

```liquid

{{ current_product | show_traits }} ```

Common patterns

Accessing products

```liquid

{{ current_product.name }}

{% for product in all_products %} {{ product.name }} {% endfor %}

{{ all_products.my-product-slug.name }}

{% for product in current_product_category.products %} {{ product.name }} {% endfor %} ```

Product card

A minimal product card covering image, brand, name, pricing, and availability:

```liquid

{% if product.image %} {% endif %} {% if product.brand %} {{ product.brand.name }} {% endif %}

{{ product.name }}

{% unless product.pricing.hide_price? %} {% if product.pricing.on_sale? %} {{ product.pricing.original_price | money }} {{ product.pricing.price | money }} {% else %} {{ product.pricing.price | money }} {% endif %} {% else %} {{ product.pricing.hide_price_text }} {% endunless %} {% if product.out_of_stock? %} {{ product.out_of_stock_text | default: "Out of stock" }} {% endif %}

```

Image gallery

```liquid

{% if product.images.size > 0 %}

{% assign primary = product.images | first %}

{% if product.images.size > 1 %}

{% for image in product.images %} {% endfor %}

{% endif %}

{% endif %} ```

Add to cart

```liquid

{% if product.can_add_to_cart? %} {% form “add-to-cart”, product: product %} {% if product.variant_types.size > 0 %} {% render “products/variant_selector”, product: product %} {% endif %}

<input type="number"
  name="{{ form.quantity.name }}"
  value="1"
  min="1"
  {% if product.maximum_quantity > 0 %}max="{{ product.maximum_quantity }}"{% endif %}>

<button type="submit">{{ product.add_to_cart_text | default: "Add to cart" }}</button>   {% endform %} {% elsif product.out_of_stock? %}

{{ product.out_of_stock_text }}

{% elsif product.restricted? %}

{{ product.restricted_text }}

{% endif %} ```

Variant selector

StoreConnect uses an n-ary variant system — products can have any number of variant types (Color, Size, Material, etc.), with each type having its own options.

Product (master) ├── VariantType: "Color" → VariantOptions: Red, Blue, Green ├── VariantType: "Size" → VariantOptions: Small, Medium, Large └── Variants (ProductDrops) ├── "Red / Small" ← VariantChoices link options to this variant ├── "Red / Medium" └── ...

```liquid

{% if product.variant_types.size > 0 %}

{% endif %} ```

Variant resolution in JavaScript

The add-to-cart form needs the selected variant’s id in the variant_id field. The standard pattern uses JavaScript to:

1. Capture the customer’s selections (one option per variant type).
2. Iterate through product.variants to find the variant whose variant_choices match all selections.
3. Update the hidden variant_id field and display the matching variant’s price and availability.

To expose variant data to JavaScript, serialize the variants in a <script> tag:

```liquid

```

Theme variables for variant selectors

Trait rendering

Quick rendering using the built-in filter:

```liquid

{{ product | show_traits }} ```

Custom rendering grouped by category and group:

```liquid

{% if product.trait_category %} {% for group in product.trait_category.trait_groups %} <section> <h4>{{ group.name }}</h4> <dl> {% for type in group.trait_types %} {% for trait in product.traits %} {% if trait.trait_type.name == type.name %} <dt>{{ trait.name }}</dt> <dd>{{ trait.value }}</dd> {% endif %} {% endfor %} {% endfor %} </dl> </section> {% endfor %} {% endif %} ```

Related products

```liquid

{% if product.related_products.size > 0 %}

{% endif %} ```

Product content sections

Rich content sections (features, specifications, support, warranty, downloads) are accessible as rendered HTML:

```liquid

{% if product.features_content %}

{% endif %}

{% if product.specifications_content %}

{% endif %} ```

Or use the typed content block filters:

```liquid

{{ product | features_content_blocks }} {{ product | specifications_content_blocks }} {{ product | downloads_content_blocks }} ```

Bundle products

```liquid

{% if product.is_bundle? %}

This product is a bundle

{% endif %}

{% if product.available_only_in_bundle? %}

Available only as part of a bundle

{% for bundle in product.contained_in_bundles %} {{ bundle.name }} {% endfor %} {% endif %} ```