Pages, Menus and Redirects: Build Your Storefront's Pages

Overview

Every storefront is built from pages, and each page is built from sections: a banner, a product grid, text, images and more. Its menus are the links in the header and footer, and redirects send visitors from old addresses to new ones.

All three are on every plan, under Channels → Sites.

Step 1: Create a page

1. Go to Channels → Sites and open Pages on the site.
2. Click New page. Give it a Title, and a URL slug if you want a different address from the one made from the title.
3. Under Start from, choose a template for a ready-made layout, or Blank. Click Create & build.

Page for a purpose makes a draft for a page with set requirements, such as a wholesale page with its form. Fill in the parts in [brackets], then publish it.

To copy a page, click its Duplicate page button (the copy icon) in Pages. The copy is a draft at the same address with -copy added, and it keeps everything except the canonical URL.

Step 2: Build it from sections

• Add sections from the library, drag one into place, or use a template. Drag a section, or use Move up and Move down, to change the order.
• Select a section to edit its content: text, images, buttons, products and links.
• Images: every image field has Upload, to add a new picture, and Library, to pick one already in your media library (it fills in the image's alt text when the section has none). Pictures you upload here are added to the library too.
• Appearance sets a section's Vertical space, Background, Text colour, Corners, Shadow and Outline. Use On brand or On dark text with a Brand or Dark background so the text stays readable.
• Hide on hides a section on desktop, tablet or mobile.
• The builder draws your sections in your store's brand colour, corners and fonts, so the page looks as it will on your store. A change made with the Design assistant shows straight away.
• Improve this section with AI rewrites one section's content from what you ask, and Create section with AI adds a new one. You see the result before anything changes. It keeps your images and videos, and it writes placeholders in [brackets] rather than inventing quotes, names or prices.
• Undo and Redo step back and forward through your section changes. The Design assistant has a History tab that lists design changes and can put an earlier one back.
• Custom code shows the code you paste as plain text on the page. It does not run. To show a map, booking calendar, form or player, use an Embed section instead.

Products, collections and articles

• Product grid shows the products you pick in Products, in your order, or, when you pick none, the newest products with the tag you enter in Or show by tag. The builder shows the products your store will, at this site's prices, and tells you when a product you picked will not appear because it is a draft, hidden or not priced on this site.
• Featured product shows one product large: its picture, price, description and Add to cart. Choose it in Product. Only an active product that is shown and priced on this site appears on your store, and the builder tells you when the one you chose will not. A product with options, personalisation fields, a pre-order date or a minimum quantity gets a View product button instead, so shoppers choose on its page. Turn off Show the description to leave the description out.
• Collection list shows the collections you choose as tiles with their pictures, each linking to the collection. Add them in Collections and use the arrows to set the order. A hidden collection is left out on your store until you show it.
• Latest articles shows your newest published blog articles, with a link to all of them. Articles to show sets how many.

Pictures side by side, slideshows, maps and videos

• Image with text puts a picture beside a heading, text and a button. Picture on the chooses left or right on tablet and desktop. On a phone the picture always sits above the words. Featured product works the same way.
• Slideshow shows up to 8 slides, each a picture with an optional heading, text and button. Shoppers move between slides with the arrows, the dots, a swipe or the arrow keys. With Move to the next slide by itself on, it changes every few seconds (Seconds per slide) and shows a pause button. It stops while a shopper points at it or uses it, and stays still for shoppers whose device asks for reduced motion. Only the slide on screen and the next one load.
• Map shows a Google map of the Address you type, with the address and a Get directions link under it. Zoom sets how close it starts. It follows the same cookie rule as an Embed map: while your store asks shoppers about cookies, they see a Show map button until they allow them. The address and the directions link always show.
• Video: click Upload to add an MP4 or WebM file of up to 9 MB, or Library to pick one already in your media library. Either one sets the Source to a hosted file. For a longer video, choose YouTube or Vimeo as the Source and paste its link.

Collection list, Latest articles and Featured product show nothing on your store until they have something to show, and the builder says so on the section.

Maps, booking calendars, forms and players (Embed)

Add an Embed section and paste a link, or the embed code the service gives you, into Link or embed code. It works with:

• Google Maps: in Google Maps, choose Share, then Embed a map, and paste the code. A link to a place page is not enough. To show your own address, a Map section is simpler: you only type the address.
• YouTube and Vimeo: a video link, a playlist link or the embed code. YouTube plays from its privacy-enhanced address, and Vimeo is told not to track visitors.
• Calendly: your booking link or the inline widget code.
• Typeform: the form's share link or its embed code.
• Google Forms: Send, then the < > tab, and paste the embed code.
• Spotify and SoundCloud: a track, album, playlist or show link, or the embed code.
• Mailchimp: your hosted signup form's address (it ends in list-manage.com/subscribe…), or the embedded form code. A short eepurl.com link has to be opened first and the address it lands on pasted.
• Instagram: the link to one post or reel, or its embed code.

The box says which service it recognised. Only the service's own address is kept; the rest of the code you paste, including any scripts, is never saved or shown. Anything else gets a message saying what to paste instead, and the section does not appear on your store until it has a source that works.

Describe it is what screen readers announce, such as "Map to our shop". Size makes the section smaller or larger.

While your store asks shoppers about cookies, a map, calendar, form or player from a service that sets its own cookies shows a Show button and an Open on … link first, and loads when the shopper presses it or allows marketing cookies. Vimeo videos load straight away. If you turned the cookie banner off, embeds load straight away, unless a shopper said no to marketing cookies before you did. The builder always shows the real thing.

You can also add an Embed section to the header or footer, for example a map in the footer.

Different layouts on tablet and mobile

Use the desktop, tablet and phone buttons above the page to see it at each size. On tablet or mobile, the Alignment, Width and Gap fields can be set just for that size: they are marked Tablet override or Mobile override. Mobile uses the tablet setting when it has none of its own, and tablet uses the desktop one. Everything else, such as text and images, is the same at every size.

Step 3: Save, preview and publish

• Save draft keeps your changes. On a page that is already live, the live page does not change: your changes wait as a draft until you click Publish changes, and Discard draft goes back to the live version.
• Preview opens the page at desktop, tablet or mobile size. If you have unsaved changes, it saves them as a draft first, then shows the draft through a private link that only you have.
• Publish puts the page on your storefront, and Unpublish takes it off.

Page settings

The gear button opens Page settings: the page's Title, its URL slug (the address after your domain, /pages/your-slug) and its Excerpt, which search engines show when the page has no meta description of its own.

When you change the slug of a page that is live, the old address keeps working: a permanent redirect to the new one is added for you, and you can see it in Redirects.

Your home page is the page with the slug home, shown at the front of your store. If you rename it, the builder asks first, because your store's front page then shows the default layout until another page is called home.

Schedule, search and sharing

Click Visibility & SEO on a page in Pages (or the link in Page settings).

• Publish now, Move to draft and Preview.
• Schedule publish picks a date and time. A page that is not live goes live then. A page that is already live stays live as it is, and the changes you saved in the builder go live at that time.
• Search & sharing sets the Page title and Meta description search results show, the Social image URL shown when the page is shared, a Canonical URL, and Hide this page from search engines (noindex), which also leaves it out of your sitemap. The home page's settings are used for the front of your store.
• Language marks which language this version of the page is in. It cannot be a language another version at the same address already has.

Pages in more than one language

A page can have a version in each language, all at the same address.

1. Open the page in the builder and click the language menu in the toolbar. It shows the language you are editing, such as Default language.
2. Choose Add a language…, pick the language and click Create draft. The new version is a draft copy of the page, at the same address. Translate its sections, then click Publish.

• The language menu lists every version of the page with its own state (draft, published or scheduled). Choose one to edit it. Each version is published, unpublished and scheduled on its own, and Pages shows each one's language.
• Shoppers see the version in the language they chose in your store's footer, or the one their browser asks for. Everyone else sees the default version: the page with no language set, which is written in your store's language.
• Each version also has an address of its own for search engines, such as /pages/about?lang=fr-CA for the French version, and the page tells search engines about all its versions. Your sitemap lists each version. A version set to hide from search engines is left out.
• A page has one version per language. A language the page already has, including the language its default version is written in, is not offered.
• Changing the URL slug in Page settings moves every version to the new address. The old address redirects to the new one, and a version's own address keeps its language.
• Deleting one version leaves the others. While another version is live, its address keeps working and no redirect is added.
• The home page works the same way.

Deleting a page

Click a page's Delete page button (the bin icon) in Pages. When the page is live, visitors to its address are sent to your home page by a permanent redirect, which you can see in Redirects. A page that was never live leaves nothing behind. If you later create a page at the same address, that redirect is removed so the new page shows.

Menus

Go to Channels → Sites and open the Navigation tab.

1. Create a menu. Name it main for the header, or footer for the footer.
2. Add links. A link can go to a path on your store, such as /products, or a full web address.
3. Drag links to reorder them. Nest under puts a link inside another, which shows it as a dropdown.

Applies to chooses whether a menu is used on all your sites or on one.

Redirects

Open the Redirects tab when you move or retire a page, so old links and search results do not end at a missing page. Renaming or deleting a live page, or a collection, adds one for you.

1. Redirect from: the old path on your store, starting with /, such as /sale.
2. Redirect to: the new path or a full web address, such as /collections/sale.
3. Type: 301 — permanent when the page has moved for good, or 302 — temporary when it will come back.

A redirect can apply to all sites or one, and you can pause it without deleting it.