Create a Page template file

There are two ways to add a Page template file: visual operation and command line operation:

Method 1: Create a page.xxx.liquid file, which can be added via Shopify, as shown below:

The page template added in this way has the following default code:

<h1>{{ page.title }}</h1>
<div>{{ page.content }}</div>
Copy the code

To add a template file in this mode, run the theme download command to synchronize it to the local PC. Liquid: theme download template/page.xxx.liquid

Method 2: Create a file in page.xxx.liquid format on a local PC and deploy it to an online topic.

Liquid: theme deploy template/page.xxx.liquid

Configure the online store access path for page

Login corresponding Store, Online Store – > Pages – > Add Page, can configure the following contents: reference: help.shopify.com/en/manual/s…

  • The Title itemHere:titleDetermines thepageOnline store access path; (where thetitleisliquidThe inside of theobject handle)
  • Content item: the Content here can be edited to add corresponding Content to the page; (If the active page is configured by section, you can leave this blank.)
  • Edit website SEO * : on page SEO, may refer to: help.shopify.com/en/manual/p… ;
  • Visibility items: You can configure whether the page can be accessed online and the time nodes that can be accessed.
  • The Template item:Template suffixSelect the correspondingpage.xxx. (where thexxxWith the newpageCorresponding to each other’s names;Template suffixOnly the current online store will be displayedthemeUnder thepageTemplate type is optional, so inDevelopment of the theme[Note: not online theme] addedpage, you must firstpublish themeOnly after theTemplate suffixOptions displayed).

Customize the Page Layout

From the command line theme download templates/pages. XXX. Liquid, can just download new page to the local, and then back to local development environment: If you do not specify a layout, the default layout is layout/theme. Liquid. If you do not want to use the default layout, such as active pages, you can customize the layout. Create my-activity.liquid in the layout directory. The key code is as follows.

<! --/layout/my-acitivity.liquid-->
<! doctypehtml>
<html class="supports-no-js" lang="{{shop.locale}}">
    <head>
        <meta charset="UTF-8">
        <title>
        {{shop.name}}
        </title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        {{content_for_header}}
    </head>
    <body>
    <! The section configured with page.xxx.liquid will not display its configuration properly -->
    {{content_for_layout}}
    </body>
</html>
Copy the code

Develop the sections required for the page

As an example, the effect is to implement a picture rotation section component my-carousel.liquid. See the article: Liquid Development’s Shopify Custom section for more details.

Configure page details

To add a page template via Shopify, the default code looks like this:

Because the page page does not have the way to dynamically add sections like the home page, the development process, currently only through the analysis of UI design draft, determine which sections the page needs, and then through the code to introduce the section to achieve. For example, with the newly created page.activity.liquid template, apply a custom my-activity layout and introduce the my-Carousel section component. You can write code as follows:

<! -- /templates/page.activity.liquid -->
<! -- You can specify a custom layout (equivalent to the HRML framework). If not, the default is theme Layout -->
{% lyaout 'my-activity' %}

<! {{content_for_layout}} sections are valid only if the liquid file of lyaout declares {{content_for_layout}} in the body tag.
{% section 'my-carousel' %}
Copy the code

Operation configuration page process

Log in to the Shopify Store, Online Store –> Theme –> Customize, find the corresponding page, and configure the dynamic content of the corresponding section, as shown below:

Matters needing attention

  • configurationAdd pageWhen,TitleItem determines customizationpageThe online accessible path, andTemplate suffixOnly online stores will be displayed herethemeUnder thepageOptional template type;
  • In general, iftemplatesthepagesThe document does not specifylayout, the default value islayout/theme.liquidthislayoutIf thetheme.liquid layoutIf the requirements do not meet the current requirements, customize the requirementslayoutAnd in the correspondingtemplateThrough the code{% layout 'xxx' %}Mode introduction;
  • asectionComponent whose configured content is common if two differentpageQuote the samesection. However, items with different configurations cannot be addedsectionTo achieve.