LoginSign Up

Template Structure

The Liquify Pro 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.

Webflow
li-page = product

Here is a List of all available page templates by Shopify:

  • 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

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.

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

Webflow
li-page = remove

By default, every li-page generates its own layout 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:

Webflow
li-layout = theme

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

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). 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.

Webflow Navigator with Liquiflow Theme Structure

PreviousGetting StartedNextHow to Convert Your Theme

Last updated

Was this helpful?