StoreFront Pages

Every page on your StoreFront is managed from one screen. Go to Main Menu → StoreFronts, choose your host, then select Pages.

Each page has a template applied to it, and the template is what decides what the page actually renders. That is why a product page shows products and a blog page shows posts without you laying either out by hand. Change the template and you change what the page does.

Add a page

1. On the Pages screen, select Add Page.
2. Name the page.
3. Save it.

The new page appears on your StoreFront, and under its parent page if it has one.

Apply a different template

1. On the Pages screen, select the Edit icon on the right of the page's row.
2. Use the template dropdown to pick a different template.
3. Select Save Page, or Save and Preview to open the result in a new tab.

Publish and hide a page

A page can exist without being visible. Hiding is useful for a page you are still building, or a landing page you only want reached from a campaign link.

Toggle visibility from the page itself in the page editor. A hidden page stops appearing on your StoreFront and under its parent, but keeps its content and its URL.

Order child pages

Child Page Sort Order controls the order that pages nested under a parent appear in. It is set on the parent page, not on the children.

There are two ways to reach the setting, and they do the same thing:

• From the Pages screen, select Edit on the parent page, then choose Child Page Sort Order.
• From your StoreFront's admin panel, select Page → Edit → Settings.

Pick a sort order and select Save Page. The default is Title Ascending.

Arrange child pages by hand

Choosing Custom lets you drag pages into the order you want.

1. Set the parent's Child Page Sort Order to Custom and save.
2. In the page list, select the blue tree icon on the parent to expand its children.
3. Drag a child page to its new position. The hierarchy updates as soon as you drop it.

Refresh your StoreFront to see the new order.

note

Page order does not control your navigation menus. Menus are managed separately under StoreFronts → Menus.

Restrict a page to a pricing tier

Page permissions limit a page and its content to customers on a particular pricing tier. The setting only appears once you have at least one pricing tier configured. See Pricing Tiers to set one up.

1. On the Pages screen, edit the page.
2. Select the pricing tier that should have access.
3. Select Save Page.

The page is then reachable only by someone logged in under that pricing tier. The more pricing tiers you have, the more finely you can divide access.

Delete a page

1. On the Pages screen, select the delete icon on the right of the page's row.
2. Type DELETE in the confirmation field.
3. Select Proceed.

"Parent page template does not support child pages"

This warning in the page editor means the parent's template does not automatically render links to its children. It is not necessarily a problem.

Templates differ in how they link onward. A home page template might contain four menus, whose links come from the Menus tab, plus one section listing the items assigned to the home page. None of those automatically pick up a new child page.

If you want the page linked from its parent, add it to one of the menus and the warning clears. If the page is a landing or promotional page you deliberately do not want linked, ignore the warning. That is a normal thing to want.

Fix mismatched HTML in page content

On a responsive site, an unclosed div or one closing tag too many can break the whole page layout. The content editor points these out for you.

1. In the page editor, select the full screen icon next to the content field.
2. In full screen mode the editor highlights tags that do not match up or are out of order.
3. Fix them, toggle full screen off, and save the page.

Edit a page's content

Each theme decides what content fields a page type offers, and what kind of data each one takes. That is why two pages on the same StoreFront can present different fields.

1. Go to Content → Pages, click the edit icon for the page, and open the Content tab.

   

2. Fill in the fields the theme defines for this page type. A large text area usually holds the page's main content and a single-line field usually holds something like the title.

   

3. Click Save Page, or Save and Preview to see the result. Cancel Changes discards them.

You can use HTML in any multi-line field. Do not put it in a single-line field.

Two things make longer edits easier: the icon in the top right corner of the editor opens it full screen, and the blue icon to its left switches on the WYSIWYG editor.

tip

If Save and Preview appears to do nothing, check that your browser is not blocking popups on secure.ultracart.com. Blocked popups usually show a warning in the address bar.

Home page slider

Several themes, including Mr. Teas, put a slider on the home page. It is configured on the Home page's Content tab, the same place as any other page content: go to StoreFronts → Pages, click the pencil icon for Home, then open Content.

Four fields control it:

Field	What it does
home slider	Holds two buttons. settings opens the slider settings described below. add adds a slider page URL, then edit opens the screen where you configure it.
home slider autoplay	Starts the slider automatically once the page loads.
home slider autoplay speed	Time between slides, in milliseconds. 3000 is a common setting.
home slider items	The items included in the slider.

The settings button opens four controls: Auto Play, Auto Play Speed in milliseconds, Cover Mode, and Overlay, which lays 30% opacity over the slide. Overlay looks good on most images but works against sliders that already have a black or white background.

Cover mode

Cover mode fills the whole slider area with the image whatever its dimensions, scaling it, keeping its aspect ratio, and centering it, without causing scrollbars. It crops to do this: a 500 x 1000 image is fitted to the maximum width and cropped top and bottom, and a 1000 x 500 image is fitted to the maximum height and cropped left and right. The cropping is recalculated as the browser or screen size changes.

Add and remove slider items

To add an item, type into the home slider items field and click the result you want.

To remove one, use the remove control on its row.

tip

After assigning an item to the slider, open that item and set the content the slider uses. There is usually a featured image and featured text that overlay the slide. Which image the slider picks is covered in Images.

Next steps

• File Manager for the files behind these pages: templates, stylesheets, and images.
• How StoreFronts resolves a URL explains why a given address lands on a given page, which is worth knowing before you rename anything.
• Product and Group Pages for the pages StoreFronts creates from your catalog, rather than the ones you add by hand.
• Images for uploading artwork and the sizes each theme expects.