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.fields["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

Each variant is its own Product with its own page, and the add-to-cart form posts to whichever product it was given. There is no variant field on the form. Selecting options therefore navigates to the matching variant’s path, and the form on that page is already bound to it.

The standard pattern uses JavaScript to:

1. Capture the customer’s selections, one choice per variant type.
2. Find the entry whose choices match every selection.
3. Navigate to that variant’s path, which re-renders the price, availability, and add-to-cart form for the variant.

To expose variant data to JavaScript, serialize product.variant_options in a <script> tag. Each entry pairs a variant’s path with the form_value of its choice for each type:

```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 %} ```