2.3 Catalog Pages

Catalog Pages

In Storefront Pages serve two purposes:

  1. They are standard pages like your Home page, your About Us page, etc.
  2. They are dynamic catalog pages or as some may be familiar to them category pages.

So when grouping products into “categories” you’re actually grouping them into “Pages”.  This type of structure simplifies content management and makes it possible to create a hybrid of static content pages with dynamic products injected into them.

Managing Catalog Pages

To manage the pages of your site, click on Catalog in the top menu and then select “Pages” as shown below:

cf0b34e1-608e-4f54-813a-08d342bdb728_a65906d0

This will cause the list of Pages to display

c5e5aa6c-b639-4754-b9dd-4b84e8271ead_75709b75

From this screen you’re able to manage your catalog pages

Adding Pages

To Add a new page to your site, select the parent page from the dropbox box and then enter the name for the new page and click “Add Page”

49b2a5d7-1281-4015-8710-43133e4b89b5_7cb06612

Your page will now appear in the list of pages.

Sorting Pages

To sort pages from the Catalog -> Pages menu simply click the “+” icon and drag the page up or down in the hierarchy.

b05c2240-1952-4ddd-ac6e-f7626a9ce161_944cb7a8

Deleting Pages

To delete a page, simply click on the Red Button with a trash can on it and the page will be permanently deleted.  Please note this is a permanent action and should only be done when absolutely necessary.

Editing Page Settings

To edit the page settings for a page simply click on the page name from the Pages menu.  This brings up the “Edit Page” screen as shown below

761edc1d-8ef7-463e-870d-457176f363e8_1752b0b0

Adding Products to a Page

To add products to a page, from the Edit Page screen, click on the button: Add Products

adc60b5d-1b0e-4b4c-be74-466d7d1e3b1b_435ac59e

This will bring up the Products list and you can add products to the page by clicking on the green Add button next to the product name.

043042d7-8f7f-4035-8107-c55f750e1332_a07df884

Sorting Products on a Page

To sort products on a page, click on the button “Edit / Sort Products”.

f6c3f940-ff13-4115-8c98-2b4376599f29_177d63af

This brings up a list of products and you can sort the products by clicking on the “+” button and dragging the product up and down.

c8e82d1d-8b3b-401a-8e26-a431c41ae0ee_1d9167a6

Deleting Products From a Page

To Delete products from a page, click on the “Edit / Sort Products” button and then click on the red garbage can icon to delete the product permanently.

Setting Page Name

To Set a page name, from the Edit page screen, enter a new name in the field “Name” highlighted below and then click the save button.

507e3652-647d-4084-8239-8ea764ece2a8_8d00d598

Setting Page URL

To Set a page URL, from the Edit page screen, enter a new URL in the field “URL” highlighted below and then click the save button. Please note that only letters, numbers and dashes should be used when creating URLS and when pages are nested below other pages the URL will also be nested.

a90685ee-10ce-49c9-97d6-8efc2b204c4b_7a5a5453

Making a Page Hidden

To make a page ‘Hidden” simply check the box next to “Hidden” and click save. The page will still exist but will not be displayed to searchs or visitors.

c1771292-7532-4de5-b629-198f6613f72d_2eed33b7

Selecting the Template for a Page

Each Theme in Storefront has several different page templates. You can quickly change the Template a page uses by clicking on the Template dropbox down and selecting the template you wish to use and then clicking the Save button.  Please note not all template pages uses the same content areas in their pages and your content areas that were edited or modified may be lost.  

e5fabb1f-8dee-4d4d-bb17-92c15baca5ff_94faf892

Editing a Page Description

The Description area of a page can be edited by using the HTML editor highlighted below. This content will display in the “description” area of the page and can only be edited here.

To edit the description simply enter your content in the box highlighted below and click the “Save” button to save the changes.

5a625bad-7fdd-4dfd-b72b-31255c748a0a_9e656e55

Setting Optional Meta Tags for a Page

In storefront you have control over a range of Optional Meta Tags for your pages. These tags are an important part of how search engines index pages and display the pages in search results. To access these settings, click on the button “Optional Meta Information” highlighted below.

d5d860f2-3ea5-46a5-a2a8-221571b840b3_9ad3b04

This will expand the Optional Meta Information fields as shown below

76c9834e-9fea-4a8e-9cd3-b3c4eb014733_605bf66b

From here you can enter the Meta Title.  This is the title tag that displays in search results.  The Meta Keywords, these are Keywords your product page is optimized for and the Meta Description, this is a short description about the page and also appears in search results.  Once you’ve edited this content click the save button to continue.

Saving a Page

To save a page, simply click on the “Save” button at the bottom of the page

    in 2. Catalog Management