Skip to main content
The home page is the main landing page of your store, rendered by the index.twig template.

​
Template location

src/views/pages/index.twig

​
Page structure

The home page uses a simple component-based structure: 
{% extends "layouts.master" %}
{% block content %}
    {% component home %}
{% endblock %}
{% block scripts %}
    <script defer src="{{ 'home.js' | asset }}"></script>
{% endblock %}

​
Available variables

VariableTypeDescription
pageobjectPage object
page.titlestringPage title (could be HTML)
page.slugstringPage slug (e.g., “cat.show”)

​
Usage example

<h1>{{ page.title }}</h1>
<p>Welcome to {{ page.slug }}</p>

​
Home component

The home page renders using the {% component home %} tag, which displays the configured home page sections from your store’s theme settings.

​
JavaScript assets

The page loads home.js for interactive functionality like sliders, product carousels, and other dynamic elements.
The home page content is primarily controlled through the home component, which allows merchants to customize sections without editing template files.

Build docs developers (and LLMs) love

Get started for freeTalk to us