Appearance & colours
The storefront panel is designed to look right on any store without you touching anything: white cards with a soft shadow standing directly on your page, small uppercase group labels, prices in steady numerals, and a receipt that opens on its own rule where the options hand over to the total. Behind that look sit three layers, and each one only takes over where the layer below has nothing to say.
Layer one: the built-in look
Section titled “Layer one: the built-in look”Out of the box the panel uses calm neutral colours: dark text, quiet hairlines, a green tick for answered questions and the coral accent for the Choose prompts. The panel’s own background is transparent, so your page shows through and the cards carry themselves. This layer works on any theme, classic or block, and needs no setup.
Layer two: your theme’s palette
Section titled “Layer two: your theme’s palette”A block theme publishes its colour palette, and AddOnBoss listens: the accent follows your theme’s primary or accent colour, the text follows its text colour, and the card surface follows its background, so the panel arrives already dressed in your theme’s colours. A classic theme publishes nothing, and the built-in look simply stands. There is nothing to configure and nothing to keep in sync; change your theme’s palette and the panel follows.
Layer three: the Colours screen
Section titled “Layer three: the Colours screen”For the colours you want to choose yourself, open BossMage → AddOnBoss. The Storefront colours card holds four choices, each sitting over the two layers below:
- Highlights and prompts. The accent that paints the Choose prompts and the panel’s other highlights.
- Selected choice. The fill behind a picked button and the ring around a picked swatch.
- Receipt line. The rule across the top of the price breakdown.
- Options background. Off by default so your page shows through. Set a colour and the options area draws itself as its own soft panel again.
Set a colour only where you want to overrule the theme, and press Clear to hand that choice back. Every colour applies everywhere the panel renders, on a product’s own page and inside the option groups’ cards alike.
The shape of the choices themselves, square, circle or photo card, is not set here; it belongs to each set, so a colour range and a finishes list can each draw the way that suits them. See colour swatches.
The layers never fight: clearing a colour on the Colours screen returns you to your theme's palette where one exists, and to the built-in look where it does not.