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

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.

Last updated

Was this helpful?