# Template Structure

The <code class="expression">space.vars.Company</code> starter Template comes with a pre-defined structure for your Template. All the pages Shopify needs for a working theme are already setup and working. The pages are tagged with a `li-page` tag which defines which pages refer to which purpose. These tags are already applied in [our Starting theme.](https://www.liquify.pro/docu/liquify-starter-template)

{% code title="Webflow" fullWidth="false" %}

```
li-page = product
```

{% endcode %}

Here is a List of all available page [templates by Shopify](https://shopify.dev/docs/storefronts/themes/architecture/templates):

* 404
* article
* blog
* cart
* collection
* account
* activate\_account
* addresses
* login
* order
* register
* reset\_password
* gift\_card
* index (always the Home page in Webflow)
* list-collections
* page
* password
* product
* search

{% hint style="info" %}
Pages without a li-page tag are considered as Shopify pages and are converted as `page.templates`. The name of the page in Webflow will be the name of the template in Shopify. For example, a page called `About Us` will get the template file `page.about_us`.
{% endhint %}

When you do not want a site to be converted, simply add the tag `remove`:

{% code title="Webflow" fullWidth="false" %}

```
li-page = remove
```

{% endcode %}

By default, every `li-page` generates its own [layout](https://shopify.dev/docs/storefronts/themes/architecture/layouts) file. This leads to a large number of unnecessary files. However, if you are not modifying `<head>`, `<body>`, or anything outside the `li-content-for-layout` element, you can use the `li-layout` attribute directly on the `li-page` element. This tells the converter to skip creating a new layout file for that page.

You can simply reference the layout you want to use for this page:

{% code title="Webflow" fullWidth="false" %}

```
li-layout = theme
```

{% endcode %}

## **Page Structure**

Your page will be saved in two separate files in Shopify:

* Layout file: everything outside the `li-content-for-layout` attribute.
* Template file: everything inside the `li-content-for-layout` attribute.

If you’re using Shopify 2.0, the template will be saved as a .json file instead of an HTML Liquid file.

That’s why the `li-content-for-layout` attribute is required on all pages. It’s usually placed on the `<main>` element of your site. In the Starter theme, you can find it on the `main-wrapper`.

![Webflow Navigator with Liquiflow Theme Structure](/files/aT2BBeByRZH10m4hUrDr)

## **Shopify 2.0**

To unlock the potential of Shopify 2.0, make sure all your page content is organized into sections (tagged with `li-section` tag, learn more [here](https://www.liquify.pro/docu/getting-started#settings-sections)). The page structure should match the image below. Just remember not to change the HTML tag `main` oft the main wrapper. You can always rearrange everything inside `main` in Shopify later on.

{% columns %}
{% column %}
![Webflow Navigator with Liquiflow Theme Structure](/files/aT2BBeByRZH10m4hUrDr)
{% endcolumn %}

{% column %}

<figure><img src="/files/n5mnFtPsdvS5uRqCS93Q" alt=""><figcaption></figcaption></figure>

{% endcolumn %}
{% endcolumns %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.liquiflow.app/fundamentals/template-structure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
