The fixed products component displays a grid of products with configurable vertical or horizontal layouts.
Component usage
Add fixed products section to your home page:
{% set is_vertical = theme.settings.get('vertical_fixed_products', true) %}
<section class="s-block container">
{% if title %}
<div class="s-block__title">
<div class="right-side">
<h2>{{ title }}</h2>
</div>
{% if display_all_url %}
<a href="{{ display_all_url }}" class="s-block__display-all">
{{ trans('blocks.home.display_all') }} <i class="sicon-arrow-left"></i>
</a>
{% endif %}
</div>
{% endif %}
<salla-products-list
source="{{ products.source }}"
limit="{{ limit }}"
source-value="{{ products.source_value|json_encode }}"
class="{{ is_vertical ? 'vertical-products' : 'horizontal-products' }}"
{{ is_vertical ? '' : 'horizontal-cards' }}
></salla-products-list>
</section>
Variables
Source type for products:
latest - Latest productsmost_sales - Best selling productschosen_products - Manually selected productscategory - Products from specific categorybrand - Products from specific brand
Array of IDs when source is chosen_products, category, or brand. Example: [123, 456, 789]
Section heading displayed above the products
URL for “View All” link. If empty, the link is hidden
Number of products to display
Sorting number for component placement (starts from zero)
Layout configuration
The layout is controlled by the vertical_fixed_products theme setting in twilight.json:
{
"settings": [
{
"type": "boolean",
"id": "vertical_fixed_products",
"label": "Vertical layout for fixed products in home page",
"format": "switch",
"value": false,
"selected": false
}
]
}
Vertical layout
<salla-products-list
source="latest"
limit="8"
class="vertical-products"
></salla-products-list>
Horizontal layout
<salla-products-list
source="most_sales"
limit="6"
class="horizontal-products"
horizontal-cards
></salla-products-list>
Example with latest products
<section class="s-block container">
<div class="s-block__title">
<div class="right-side">
<h2>New Arrivals</h2>
</div>
<a href="/products" class="s-block__display-all">
View All <i class="sicon-arrow-left"></i>
</a>
</div>
<salla-products-list
source="latest"
limit="8"
class="vertical-products"
></salla-products-list>
</section>
Example with category products
<section class="s-block container">
<div class="s-block__title">
<div class="right-side">
<h2>Electronics</h2>
</div>
<a href="/category/electronics" class="s-block__display-all">
View All <i class="sicon-arrow-left"></i>
</a>
</div>
<salla-products-list
source="category"
source-value="[123]"
limit="6"
class="horizontal-products"
horizontal-cards
></salla-products-list>
</section>
Example with chosen products
<section class="s-block container">
<div class="s-block__title">
<div class="right-side">
<h2>Featured Products</h2>
</div>
</div>
<salla-products-list
source="chosen_products"
source-value="[101, 102, 103, 104, 105, 106, 107, 108]"
limit="8"
class="vertical-products"
></salla-products-list>
</section>
Unlike the product slider component, this component displays products in a static grid without animation or autoplay.
Configuration in twilight.json
This component is registered in twilight.json under features:
{
"features": [
"component-fixed-products"
]
}