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.

A/B test a page

Under Channels → A/B tests you can show part of your visitors another version of a published page and see which version gets more of them to act. A/B tests are on every plan.

1. Build the other version in the builder. Duplicate page is the easiest start: it makes a draft copy with the same sections, which you then change. The copy stays a draft, so visitors never see it at an address of its own.
2. In A/B tests, click New test. Choose the Page to test and the Goal: a visitor converts when they add something to the cart, start checkout, place an order, or click a link or button in a section you choose.
3. Add up to three versions. For each one, choose the page it comes from and What changes: The whole page shows that page's sections instead of the original's, and One section swaps one section of the page for one section of the other page.
4. Choose how many of your visitors are in the test (Visitors in the test) and each version's share. Shares are relative: 50 and 50 is an even split. You can also set a start and an end time.
5. Click Start. Within a minute, visitors in the test see their version.

• The original is always the page as it is published. The other versions are copied when the test starts, so changing their pages afterwards does not change the test.
• Each visitor keeps the same version on every visit, for 90 days after their last visit to the page.
• One test runs on a site at a time, on a page with one language version. A page with versions in several languages cannot be tested.
• Visitors are counted only where your store's statistics may run. A shopper who has not allowed analytics in your cookie banner sees the published page and is not counted, the same rule your store's other statistics follow. Search engines always see the published page. The test keeps a random visitor number in a cookie (bw_xv), which is removed when the shopper turns analytics off.
• The page's address, title and search settings stay the same during a test.

Reading the results

Click Results on a test. For each version you see its visitors, how many converted, the rate, and the 95% range: where the version's true rate most likely lies.

• A visitor counts once, from the first time they see the page under test, and converts once, if they reach the goal after that.
• Until every version has at least 100 visitors, the test has at least 20 conversions and it has run for 7 days, the results say Not enough data yet. A difference in the first days is usually chance.
• After that, a version is called better or worse than the original only when the gap is too large to be chance, at 95% confidence. With more than one version the bar is raised for each, so testing more versions does not make a false winner more likely. Otherwise the results say there is no clear difference.

Finishing a test

• Stop shows everyone the published page again. Resume carries on with the same versions, and visitors keep theirs.
• Choose next to a version ends the test. Choosing a version publishes its sections as the page; choosing the original leaves the page as it is. If the page has changes in the builder that are not published yet, publish or discard them first.
• A test that reaches its end time stops showing versions on its own, and you can still choose a winner.
• Deleting a test deletes its results. Deleting the page deletes its tests.

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.