ThemesContexts
Product
The product context in a StoreOS Fluid theme, with its route, widgets, the product object, related products and an example widget.
The product context renders a single product.
Route
/products/:handle
:handle is the product's handle, such as /products/linen-shirt. A handle that matches no product isn't rendered by the theme.
Widgets
The widgets listed under pages.product in the theme document.
{ "pages": { "product": ["main-product", "related-products"] } }Data
| Object | Contents |
|---|---|
product | The product being viewed. See product and variant |
products | Up to 12 related products: others from the product's first collection. The product itself is left out |
page_title | The product's title |
page_description | The product's short description |
Plus the data on every page.
Useful fields
| Field | Use |
|---|---|
product.price, product.compare_at_price | Print with money. compare_at_price is empty when there is no sale |
product.available | false when sold out |
product.featured_image, product.images | Images, printed with image_url |
product.options, product.variants | What to choose, and every combination. product.has_only_default_variant is true when there is nothing to choose |
product.description | HTML from the merchant, printed as-is |
product.technical_specs, product.information_sections | Spec rows and titled sections |
Filters
money, image_url, t, and json to pass a value to JavaScript. See Filters and tags.
Example
{% comment %} widgets/main-product.fluid {% endcomment %}
<article class="product">
<div class="product-gallery">
{% for image in product.images %}
<img src="{{ image | image_url }}" alt="{{ image.alt }}" loading="{% if forloop.first %}eager{% else %}lazy{% endif %}">
{% endfor %}
</div>
<div class="product-info">
<h1>{{ product.title }}</h1>
<p class="price">
{{ product.price | money }}
{% if product.compare_at_price %}<s>{{ product.compare_at_price | money }}</s>{% endif %}
</p>
{% unless product.has_only_default_variant %}
<select name="variant">
{% for variant in product.variants %}
<option value="{{ variant.id }}" {% unless variant.available %}disabled{% endunless %}>
{{ variant.title }} · {{ variant.price | money }}
</option>
{% endfor %}
</select>
{% endunless %}
<div class="description">{{ product.description }}</div>
</div>
</article>