The components one by one

The designer has 8 components. You change them in the component panel, see The component panel.

Where: The Components tab in the designer. Click the component's row.

#Overview

Product page is the gallery and the buy panel. Show bars turns the bars on and off. Which properties become bars is set under Products › Attributes. Where the bars go, in the buy panel or a section of their own, is set on the Properties section. The order of the sections below the buy panel is set under Pages › Product page, see Page templates. The panel links there.

• With no property shown as Bar, and no product with free-form attributes such as Speed or Control, the option is dimmed with No property is shown as Bar yet.
• With the option off, the Bar properties show as rows in Details.

Menu label exists only with the Icons + panel layout. Orders link has no effect in the storefront yet, since customer accounts are not available.

Cart under Content on Header chooses whether the cart icon opens the cart page or a panel. See The checkout as the customer sees it.

#Logo and favicon

The fields are under Content on Header.

1. Press Choose image under Logo. The media library opens.
2. Choose the image.
3. Choose the height: 24, 32, 40, 48 or 56 px. The width follows the image.

On a narrow phone the logo shrinks when the row does not fit, so the icons and the menu button always show.

With Transparent over hero on, the Light logo field shows, with the line Shown over the hero. The header uses that logo while it sits over the hero image. The footer uses it too.

Favicon is the picture in the browser tab. Use a square PNG or SVG of at least 64 px. It shows when you publish the theme.

App icon under Favicon is the icon on a phone's home screen when a customer puts the storefront there. The picture must be square and at least 512 × 512 px. Other pictures are refused. When you click in the field, the canvas shows the Home screen state. See The storefront as an app.

#Tagline and copyright

The Tagline and Copyright line fields are under Content on Footer.

• The tagline shows under the logo in the brand column. Turn on Brand column to show it.
• The copyright line shows at the bottom of the footer on every page. An empty field shows nothing.

Both are saved to the theme. ⌘Z undoes them, and they go live when you publish.

#The announcement bar

1. Turn on Announcement bar under Options on Header.
2. Type the text in the field under Content. Add a link if you want.
3. Press Put these words on the live shop.

The bar shows exactly what you type. An empty field shows no bar.

Note: The text is saved to the storefront, not to the theme draft. It shows on the live storefront when you press the button. Turning the bar on or off is a theme setting and shows only when you publish.

#Header and footer width

Width comes first under Options on Header and on Footer.

• Page lines the logo, links and icons up with the page content, at the page width from Theme › Layout.
• Full lets the row run out to the side margin, in line with sections on Full.

The row with the withdrawal link under a custom footer follows the footer's width. The announcement bar always runs edge to edge.

#Transparent header

Transparent over hero makes the header transparent on the home page, over a full-width image banner.

• The option is dimmed with Add a full-width image banner first on Home until the home page starts with such a banner.
• You can always turn off an option that is on.
• After 24 px of scrolling the header turns solid with the theme's colours. It also turns solid while the menu panel is open.
• Other pages always have a solid header.

While the header is transparent, text and icons have the colour Header text over hero under Theme › Colours. The default is white. The light logo shows. The modes have their own hooks in CSS, see Hooks and CSS reference.

#The menu panel

The menu panel opens from the Icons + panel header layout.

• When the header has another layout, the designer still shows the panel, with the line This panel opens from the Icons + panel header. Your header is set to another layout, so shoppers never reach it …
• A style of your own on Menu panel applies to the panel under Icons + panel and under a custom header. It also applies to the mobile menu the other layouts open.
• Under a custom header, the standard panel always has a button to close it. Escape closes it too.

#Links, products, contact

The panel lies over the page under the header. The big links are on the left with an arrow each, the small links under them. Product cards show on the right and the contact bar at the bottom.

• When a customer rests the pointer on a category link, or reaches it with the keyboard, the cards change to that category's products. Featured products come first, then the category's own order. The subcategories' products count too.
• Other links show the default cards: the featured products, in the order they have in the storefront. A small link does it only under the pointer, so Tab can go on from a category to its cards.
• With the keyboard the big links are one stop, and the arrow keys move between them. The panel closes when focus leaves the header.
• The cards are the storefront's product cards and show the price in the customer's currency.
• A computer shows 3 cards and a tablet 2. A phone shows the links only, without cards and contact bar.
• On a touch screen a tap opens the link straight away.
• The search icon opens the search box over the page. The panel has no search box of its own.

Products beside the links and Contact bar under Options turn on the cards and the contact bar. The cards are fetched only when the customer moves towards the menu button, so pages do not load more slowly. On a phone they are not fetched at all.

#The links

The menu's links are chosen in one place only: the Links list under Content on Menu panel. The list applies to every look and every header.

1. Open a link in the list.
2. Choose where it goes under Links to: Category, Page or Address.
3. Type your own text under Label if you want. An empty field means the category's or the page's own name.
4. Choose Big or Small under Size.

• Drag the rows to change the order, or use ↑ and ↓.
• With Shop + information the big links become the Shop column and the small ones the Information column.
• Once you have changed the list, it also fills the header's link row and the mobile menu.
• Not in the menu shows categories with products and live pages that are not in the list. New categories and pages are not added on their own.
• Reset to automatic links brings back the automatic links: All products, the first four categories and the pages.
• A link to a page that is not live does not show in the storefront. On the canvas it is marked, for example Draft. Publish tells you about such a link.
• A storefront with more than one language gets the Languages choice on each link.

When you point at a row, or have it open, the canvas shows that link as active with its products. A page's settings show whether the page is in the menu, see Sections and pages. Admin › Pages shows the place on the page's row too, see Pages and legal texts.

Note: The list is saved to the theme and waits for Publish, like the rest of the design. It stays when you change style or press Reset to.

#The heading over the products

The Heading over the products field is under the list. An empty field shows no heading. When the field has a text, the category's name shows instead while the customer points at a category. The field shows with Links, products, contact and Products beside the links on. The heading waits for Publish.

#Contact details and social links

The Contact and social form is under Content on Menu panel and Footer.

On Menu panel the form is folded, marked Straight to the live shop. Press Put these on the live shop. The details are saved to the storefront, not to the theme draft, and show on the live storefront at once. The canvas shows what you type while you type. The contact line and the social icons are dimmed until the details exist.

#The banner component

The Banners component sets the default text placement for the page's image banners. The width is on each banner under Layout › Width. A banner without its own width follows the style: Full in Bold and Page in Classic. A section with its own width or text placement keeps it. The canvas shows how many such sections the page has.

#Collection pages

The Collection page component covers every category page, All products (/products) and search results. One choice applies to all of them.

• Look: Sidebar, Row above the grid or Hidden. The sidebar has headings in capitals that fold the group, and long lists scroll inside their group. On a category page the groups start open. On All products and in search results only Category starts open.
• Filters stay in view is on from the start. On a computer the sidebar stays 16 px under the header, and the row right under the header, while the shopper scrolls. The row stays only while its filters fit on one line. The Clear filters button does not count. While a filter is open, a tick does not move the row. The row is measured again when the filter closes. A row that wraps to two lines scrolls with the page. The option is gone with Hidden.
• Columns per screen size sets how many columns the product grid has on Desktop, Tablet and Mobile, in the same table as a section's Per screen size. Desktop starts at the style's count, 4 in most styles and 3 in Boutique. Tablet and Mobile are on auto and worked out from Desktop: 4 gives 3 and 2, 3 gives 3 and 2. The grid in the Collection pages template follows it.

On phones and tablets, up to 1024 px, the filters become a slim bar: "Filters (2) · Sort" ("Filter (2) · Sortera" in Swedish). With Filters stay in view the bar follows under the header. The bar opens a panel from the left. Every tick filters at once. Show 7 products closes the panel and Clear empties the ticks. With Hidden the bar shows only Sort. With Sort control off as well, it shows only the number of products, as on a computer. The panel closes when the window gets wider than 1024 px.

Which filters a page shows, and in what order, is set per category. The link Products › Categories at the bottom of the panel goes there. See Categories.

Preview with above the canvas chooses what the canvas shows: one category with its products, filters and description, All products, or search results for a word. It starts on the category with the most filters. The list shows how many filters each category has. The filters and the sorting work here. Other clicks are off. The Collection pages template uses the same list, see Page templates.