The component panel

The component panel changes a part that is on every page, for example the header.

Where: The Components tab in the designer. The components one by one are under The components one by one.

The tab lists 8 components: Header, Menu panel, Footer, Product card, Product page, Gallery, Collection page and Banners. Each row shows a sketch of the component and a summary of its settings.

#Two modes

The designer starts with Advanced off. Then you change colours, fonts and texts, move and add sections and choose how the components look. No code shows.

Advanced is the switch at the top of the designer. With Advanced on, these show:

• the Customize with code button at the bottom of the component panel
• the code editor behind the button
• the Custom component section in the section library, see Your own code on a component
• the Code panel in the icon rail

The browser keeps the choice for the next time you open the designer on the same computer. When you turn Advanced off, the designer hides the ways into the code. Code you have already written stays and shows in the storefront.

#One surface per component

Click a component. The component panel opens on the right and the page stays on the canvas. It has no tabs. The panel has five parts, top to bottom:

• Look: the cards that choose the look.
• Options: the component's choices and the Shape block.
• Colours: the theme colours the component uses.
• Content: logo, texts and contact details on Header, Menu panel and Footer.
• Customize with code: opens the code editor. Only with Advanced on.

A click on a component shows it alone on the canvas, in its first state, and opens the panel. At the top of the panel are the component's name and a line with the style and the settings. Back to page in the band above the canvas closes the panel and shows the page again. A click on a section closes the panel and opens the section's inspector.

#Three ways in

• Click the component's row in the Components tab.
• Click the header or the footer on the canvas.
• Hold the pointer over a product card or a banner. Click Edit product card or Edit banner in the box that shows.

#States

A state is a mode of the component. Choose the mode with the chips under the component's name. The canvas shows the component in that mode while you change it. All states use the same style.

• Header: Top of page (top, transparent over the hero when the option is on), Scrolled (solid, as after 24 px of scrolling), Menu open (panel open) and Home screen (a phone's home screen with the app icon, the name and the colours, see The storefront as an app).
• Product card: Default and Hover (the image zooms, the second image fades in and the quick-buy button shows). On a custom card, the hover state shows the image, the second image and the quick-buy button, but not the card's own :hover rules.
• Product page: In stock, Sold out and Preorder. The stock line, the buy button and the sold-out text change with the chip on the canvas. The storefront always shows the product's own stock.
• Collection page: Default (with products) and Empty (without products, with the message and the way back).

Menu panel, Footer, Gallery and Banners have one look and therefore no chips.

#Look

At the top are the standard looks as picture cards. The theme's style decides which cards exist. You choose the style when you create the theme, see Styles and parts.

Below them is Your header styles: the styles you have saved for the component. For the footer the list is called Your footer styles, for the product card Your product card styles.

• The chosen card has an outline.
• A click on a style card puts the style on the component: look, options, the Design tab and the code.
• A click on a standard card drops the style and writes the look to the theme. The style stays in the library, and you can put it on again.
• A style without a name shows as Custom style.
• You cannot overwrite the standard looks.

You can rename and delete the style in use. Rename and Delete are under the cards. Delete asks twice:

1. Press Delete.
2. Read what stays. Press Continue, or Keep to stop.
3. Type the style's name in the field under Type My navbar to confirm. Upper or lower case does not matter.
4. Press Delete "My navbar".

The style leaves the library in every storefront of the workspace. You cannot undo it. A component that uses the style keeps its look.

#Options

The component's choices are switches and lists. The panel always shows the value the storefront uses. If the component has a saved style, the change goes to the style, and Update in the code editor becomes clickable. Otherwise the change goes to the theme.

• An option that lacks content is dimmed. The line says what is missing and where you add it. Example: social icons without social links.
• An option that is already on can always be turned off. The text under it then shows how to turn it on again, for example On. To turn it on again later, add a full-width image banner on Home first.
• An option that a saved style sets has reset beside the label. Reset drops the style's value and the theme's value applies.

Under the options is Shape with the corners of the component's images and buttons. See Styles and parts.

#Colours

Colours shows the theme colours the component uses. The list per component is under Styles and parts.

Note: The colours here are the theme's. A change changes the colour everywhere it is used. Colours that apply to the component only go under the Design tab in the code editor.

#Content

Header, Menu panel and Footer have the fields Logo, Light logo, Favicon, App icon, Tagline, Copyright line, the announcement bar's text and Contact and social. The components one by one describes the fields. The content belongs to the theme or the storefront, never to a saved style. That goes for the menu's links and the heading over the products too. A style you put on in another storefront does not bring the logo.

#What the canvas shows

While a component is selected, "Add to cart" and the filters on the canvas do not respond. The prices are the storefront's, in the same currency and conversion the customer sees.

Some components need a setup to be seen on the canvas. The canvas holds the menu panel open, shows the product card as 4 cards in 4 columns and fills the category page with the storefront's first products. A line under the canvas says what it set up:

• "The panel is held open so you can judge it. In the shop a shopper opens it from the header."
• "The category name is your shop’s. The products are the first in your shop, not this category’s, and the category description and image are left out."
• "Transparent over hero is on: shown on a dark studio surface here. In the shop it sits over the first full-width banner of the home page."

The category page's style shows only here. The Collection page on the canvas draws the sections without the category band and the filters. The storefront shows the style on every category page.

#The code editor

The code editor exists only in advanced mode and opens with Customize with code at the bottom of the component panel. The canvas shows the component alone. At the top is Custom style · Header, or the style's name when the component has a saved style. The editor has two tabs, Design and Code. Back at the top, beside the name, returns to the panel.

The look and the options stay on the panel. What you change shows on the canvas at once, and BunStack saves it to the component's active style.

#Design

The Design tab controls the component's root: typography, colours, margins, padding, borders and shadows. You set values per breakpoint (desktop, tablet, mobile) and per state (hover, focus, active). The tab exists on all 8 components. The values become CSS on the component's root and go live when you publish the theme.

#Code

The Code tab has three editors, CSS, JS and HTML, on all 8 components.

Variables and actions opens the reference for the component. Insert puts a variable where the cursor is. Above the JS field is the Run JS in the builder switch. Turned off, it pauses your JS on the canvas for the session. The storefront and Preview (⌘P) in the designer still run it. The rules are under Your own code on a component and Template reference.

#Save as your own style

At the bottom of the code editor are three buttons:

• Save as new style asks for a name. It saves the component's whole style in the library: look, options, the Design tab and the code. The component then has the style, and the card shows under Your header styles.
• Update "name" shows when the active style comes from the library and becomes clickable when it differs from the saved one. That includes an option you changed on the panel. The button overwrites the saved style. Other storefronts get the change only when they put the style on again.
• Reset to standard asks you to confirm, for example Put header back to the standard look? It removes the component's active style: look, options, the Design tab and the code. The component shows the style's standard look with the theme's settings. The library does not change.

#Where it is saved

Removing a style from the library changes no storefront. Publishing a theme where the component has no style of its own removes the style from the live storefront.