Sections and pages

A page is made of sections, for example a hero or a product row.

Where: The Sections tab and the Pages tab in the designer.

#Add a section

Three ways open the same library:

• Add section in the section list, or the Library tab. The section goes in after the selected section and becomes selected. Without a selection it goes last.
• Between two sections on the canvas. Hold the pointer between two sections. A line with a plus shows. Click the plus. The library says where the section lands, for example "Lands between Hero and Product grid".
• ⌘K › Add a section to this page.

The library has a search box and categories. A template with several sections goes in whole, in its order, at the place you chose.

A new section or template comes with placeholder text in the shop's language: Swedish when the shop's language is Swedish, otherwise English. The placeholder text promises nothing about shipping, returns or payment. Write in your own terms. Video and social links stay empty until you add your own addresses.

You choose images with Choose image, which opens the media library. You can also paste an address.

#Move, copy and delete

• Drag a row in the list under the Sections tab to move the section. You can only drag there. On the canvas the selected section has the buttons ▲ ▼ Dup Del.
• ⋯ Actions on the selected row opens the section's menu. A right-click on a row opens the same menu. Otherwise the row only has the ON/OFF badge.
• Delete in the menu removes the section. The notice says what was removed, for example "Removed Hero", and has the Undo button. The Delete key does the same. Backspace does not.
• Each row is named after the section's heading, label or first line of text.

The menu, top to bottom:

In the designer, a page without sections shows This page has no sections yet. The storefront then shows a standard page.

#The inspector

A click on a section opens Content first: heading, text, image and the button's label. A double-click on a text edits it on the canvas. ⏎ keeps the change and Esc throws it away. A double-click on formatted text opens the text editor instead, see Formatted text.

A section with many settings has four groups:

A section with few settings shows a list without groups. An explanation shows on a line under the control.

Open the deep inspector shows the Design tab: colours, margins, typography, borders, shadows and own CSS, per breakpoint and per state. The choice applies for the rest of the session. A section with Width and Per screen size shows its width and columns there as a pointer to Content. Your own CSS under Advanced still reaches the section. A width or max width the section's own style set earlier stays there until you clear it. It wins over Width.

#Width

Width comes first under Layout on every section except Spacer. A Custom component has it under LAYOUT in its own panel, with Show on. The Page text of the Text pages template has Reading width instead, see Page templates.

• On a screen narrower than the width, the content is the screen minus the side margin: 16 px on a phone, 24 px on a tablet and 32 px on a desktop.
• The width is the same on every screen. On a screen 1440 px wide, XL, 2XL and Full look the same.
• FAQ, Paragraph, Newsletter and Form start at XS, Callout at S and Video at M. An image banner follows the style: Full in Bold and Page in Classic. Other sections start at Page.
• An image banner with the old width shows it in the field: Narrow as S and Wide as 2XL. Nothing is rewritten.
• Once an image banner has a width of its own, Follow the style (…) under the buttons brings the style's width back. An old width goes too.
• The video player fills the section's width in the video's shape. It is never taller than 85 % of the screen, so a wide or upright video can be narrower than the section.
• In the category page's column beside the filters, every section fills the column.

With a section selected, the canvas shows a ruler and the side margin. See Design and variants.

#Per screen size

Per screen size under Layout has Desktop, Tablet and Mobile side by side. Mobile is up to 640 px, Tablet 641–1024 px and Desktop from 1025 px.

• An empty value reads auto in grey. The columns are worked out from Desktop: at most 3 on a tablet and 2 on a phone. Testimonials, Collection list and a product grid with 2 columns have 1 on a phone.
• An empty height follows the screen beside it: Tablet follows Desktop and Mobile follows Tablet.
• A value of your own is black. × auto brings auto back.
• The last screen under Show on cannot be switched off. The eye in Sections hides the section on every screen.
• When the first section is hidden on a screen, the next section shown there takes its place: no gap above it, and a Full banner sits right under the header.
• On each screen, the pictures in the first section with pictures there load first. Pictures in a section hidden on a screen are not downloaded there.
• A click on Desktop, Tablet or Mobile moves the canvas there, like the device buttons at the top. The column of the screen on show has a black frame.
• A section hidden on the screen on show is a grey strip on the canvas. You can select it. Preview and the shop do not show it.

#Size and shape

Each setting has presets as buttons. Custom takes a value of your own.

A setting you have not chosen shows the section's default, marked default next to its name. When the default comes from the style, it is marked follows the style. Once you choose something else, Follow the style (…) brings the style's choice back.

The designer ignores an invalid value of your own. The section then uses the preset.

An image banner with text also has Text align, Text position and Button style. Text align is centred, or left-aligned with a dark gradient from the left. Text position is Center, Top or Bottom. Button style is Primary (the theme's button colour), Light (white button) or Outline.

#The Categories section

The Categories section shows categories as tiles with a picture and a name, for example under the heading "Shop by category".

Where: Select the section. The field Categories is under What it shows.

• One row per category: picture, name, ↑ ↓ and ×. The order of the rows is the order in the shop.
• + Add a category… adds the category last. The list shows the whole tree. A subcategory shows with its parent, for example "Clothing › Jackets". Chosen categories are marked in the list and cannot be chosen again. Categories without products in the shop are marked no products.
• × takes the category out of the section, together with the section's own picture for it. ⌘Z undoes.
• Hold the pointer over a row and the category's tile on the canvas gets a dashed frame.

An empty list is automatic: the box Automatic shows every top-level category with products, in the order from Products › Categories. A category whose products are in its subcategories is included. Pick them myself turns them into rows you can order and give pictures of their own. If you pick a category under Add a category… instead, the section shows only that one.

A category that has been deleted shows as Not found with only ×. If you change a category's slug in the admin, the row follows. When none of the chosen categories is left, the shop does not show the section.

#The picture on the tile

The row shows which picture the tile has:

• Change image opens the media library. The picture you pick applies to this section only. The category's picture does not change. When the category has no picture, the button is Choose image.
• ↺ Use category image removes the section's own picture.
• The section's own pictures are in the draft and go live when you publish. The category's own picture is changed in Products › Categories, see Categories. It goes live when you save, and the designer shows it the next time it loads.

#Formatted text

Rich text, Paragraph, the text in Image + text and Callout, the cards' text in Cards and the answers in FAQ are formatted text. They have the same editor as the product description.

• Double-click the text on the canvas, or press Edit text in the inspector. The editor opens over the text.
• The toolbar has headings, bold, italic, lists, links, images, tables and video. The images come from the media library.
• A link goes to a Product, a Page or an Address. A link to a product follows the product when its address changes.
• The text is saved as you type. Done or Esc closes the editor.
• With Advanced on, the editor also has the HTML view.

Text written before the editor shows as before. It becomes formatted text the first time you change it in the editor.

#Cards

Cards shows a picture, a title, text and links per card. Use it for players, staff, features or columns.

1. Add Cards from the library. The section comes with three cards.
2. Press Add card in the inspector for more. Drag a card's row to move the card.
3. Open a card's row and press Choose picture. Fill in Alt text when the picture says something the title does not.
4. Double-click the title or the text on the canvas and write. The text also opens with Edit text on the card's row.
5. Add links under Links: an address and a label per link, at most 6.

The columns per screen are under Layout › Per screen size, as for the other grids.

A link to Instagram, Facebook, TikTok, YouTube, LinkedIn or X shows as the network's mark, for example IG. Other links become buttons with the label. A card with nothing in it does not show in the storefront.

The Collection list section is no longer in the library. One already on a page shows as before. Its inspector has Convert to Cards, which makes a Heading and Cards of the same items.

#FAQ

FAQ lists questions. In the storefront a click on a question opens its answer.

1. Add FAQ from the library. The section comes with two questions.
2. Press Add question in the inspector for more. Drag a question's row to move the question.
3. Open a question's row and write the question under Question. A double-click on the question on the canvas works too. The answer stays open or closed while you type.
4. Press Edit answer. The answer is formatted text, see Formatted text.

• A question without text does not show in the storefront.
• An FAQ written as one line per question, question | answer, shows as before. The inspector lists its questions, and the first change saves them as a list.

#Product showcase

Product showcase shows one product, or a list you choose, with a big picture, the price, a short text and a button.

The short text is the product's Short description, otherwise the first paragraph of the description. The bars are the product's Bar properties, each on its own scale, as on the product page. A product with no Bar property shows its free-form Speed, Spin, Control, Power, Feel and Hardness with a value from 0 to 100. See Attributes. An empty Button label gives Shop now, or Handla nu in a Swedish storefront.

#Background

Every section has Background in the Content tab. It puts a band of colour behind the section.

The colours come from Theme › Colours. The band always runs from edge to edge of the screen. The section's content keeps its width. Two sections in a row with the same background become one band. A button in the shop's primary colour on Brand takes the band's colours the other way round. A section that shows nothing in the storefront gets no band.

The Design tab shows Background: set in Content. for a section. A fill set there before stays until you press Clear the old fill.

#Pages

The Pages tab lists the storefront's pages. The templates under Templates open like Home and have locked sections, see Page templates. The cog on a row opens the page's settings. The ⋯ menu has Duplicate and Delete. How you create a page is under Design and variants.

#What is saved when

• A page's sections are saved in the theme draft and go live when you publish.
• A page's settings apply in the storefront as soon as you change them. The panel says They are not part of the draft you publish.
• The Menu row in the settings changes the menu's links. It waits for Publish, like the rest of the design.

Product sections on a page of their own, such as product grid, new arrivals and bestsellers, show the same products as on the home page.

#The settings

A page with sections but without settings has the Set up button in the list. It gives the page an address and a status.

Warning: The schedule controls when the page shows, not what it contains. Publish the theme before the time. Otherwise an empty page goes live.

#Delete a page

Press Delete in the ⋯ menu and then the red button in the dialog. Enter does not confirm. Deleting removes the page, its draft and all its versions.

#Code per page

The Code panel has the page's own CSS, JS and <head> code. The panel shows with Advanced on. See Your own CSS and head code.