ThemesContexts
Home
The home context in a StoreOS Fluid theme, with its route, widgets, the products object and an example widget.
The home context renders the store's front page.
Route
/
Widgets
The widgets listed under pages.home in the theme document.
{ "pages": { "home": ["announcement-bar", "hero", "featured-collection"] } }Data
| Object | Contents |
|---|---|
products | The latest 12 products. Each is a product |
Plus the data on every page.
products is a fixed list of the newest products. For a list the merchant picks, give the widget a collection setting instead. It then gets that collection, with the number of products and the sort order the merchant chose, in widget.data. See Collection data.
Filters
money for prices, image_url for images, t for text. See Filters and tags.
Example
{% comment %} widgets/latest-products.fluid {% endcomment %}
<section class="latest">
<h2>{{ props.heading }}</h2>
<ul class="latest-grid">
{% for product in products limit: 8 %}
<li>
<a href="{{ product.url }}">
{% if product.featured_image %}
<img src="{{ product.featured_image | image_url }}" alt="{{ product.featured_image.alt }}" loading="lazy">
{% endif %}
<h3>{{ product.title }}</h3>
<p>
{{ product.price | money }}
{% if product.compare_at_price %}<s>{{ product.compare_at_price | money }}</s>{% endif %}
</p>
{% unless product.available %}<p>{{ 'products.sold_out' | t }}</p>{% endunless %}
</a>
</li>
{% endfor %}
</ul>
</section>
{% schema %}
{
"settings": {
"heading": { "kind": "text", "default": "New arrivals" }
}
}
{% endschema %}