Pages

Pages in LemonStand refer to the individual pages that will be used in your store. The edit page form is where you will input the code to be rendered when the page is output. You also have the ability to set a number of page attributes such as the Title, Description, URL and the Template the page will be rendered with. The Edit Page form also gives you the ability to create Code Blocks and CMS Actions.

Let's go through the process of creating a Hello World! page to better explain the features and functionality of pages.

##Adding a Page

Click the Editor button on the sidebar and then click on Pages under the editor menu.

This will open the Pages section. Click on the + button at the top of this section to create a new page.

This will bring you to the Add Page editor form. The Edit Page section will be expanded by default.

Begin by entering a Title for your Page. In this case we will enter Hello World!. Keep in mind that the value you enter in the Title field will also be output in the HTML TITLE tag for your page. This means the title you set here will be visible when a user views this page.

The Published checkbox is checked by default. This will ensure that when we save the page it will be available on the front-end of your store. If you ever need to hide a page from your front end, simply uncheck this box and save your page.

In the Description field enter a brief description for your page. Let's enter Hello World! page example.

The Page URL is specified relative to the website root. You will notice that the URL is auto-populated as you enter a value for Title.

The Template field is currently defaulted to Home. Let's set this to our test-template that we created in our Templates example.

The Code field will let you set a value for the pages subdirectory name in the theme directory. The code field is also auto-populated as you enter the page title. You can also set the Code field to be any value your prefer.

In the Content field add the following code:

<h1>Hello, World!</h1>
<p>This is my first page!</p>

Your Add Page form should now look like the following:

Hit Save & close to confirm the addition of your new page.

Now let's navigate to the our new page in the browser.

Open your store an navigate to the following URL: my-store/hello-world

Your page should look like the following.

The Edit Page form also contains 2 additional sections, Code Blocks and Action.

##Code Blocks

Code Blocks allow you to output page-specific blocks of code to your Templates, Pages and Partials. This feature is extremely useful when you have recurring code elements like a sidebar or sub-footer that you want to be rendered a little differently depending the Page that is being loaded. For our example we will create a sub-footer in the Code Block section of our Hello World! page and then render it as part of our test-template.

Let's begin by navigating to the Pages section via the Editor link in the sidebar and open our Hello World! page. Expand the Code Block section and enter sub-footer in the Code field.

Paste the following code into the Content field:

<p>This is my sub footer</p>

Your Edit Page form should now look like the following:

Hit Save & close. We will now set our newly created Code Block to render as part of our test-template. Open the Templates section via the Editor sidebar and then click on test-template to open the Edit Template form.

Paste the following code right above original footer in the Content section.

{{ code_block('sub-footer') }}

Your Edit Template form should now look like the following:

Hit Save & close and then navigate to our Hello World! page once more. You will see that our sub-footer Code Block is now rendered as part of the page.