The Theme Hub: Browse, Apply & Fine-Tune

Browse theme packs, preview one against your current storefront, apply it store-wide, and fine-tune individual colour tokens.

A theme pack is a complete visual language for your store — colours, depth, borders, and typography feel, all defined together. Applying one changes your entire storefront at once; you don't set it page by page.

Screen: Store Editor → Settings → Theme. Open the editor from Online Store → Theme → Page Layouts → Customers browse → Product page. The Online Store group is called storefront in the new admin sidebar. The Theme hub has six tabs: Fine-tune, Custom, Identities, Store templates, Browse, and Featured. Store templates restyles your whole store at once and is covered in Store Templates.

Browse tab

The Browse tab shows every available theme pack as a grid of cards.

• Search by theme name using the search box.
• Filter using the chip filters — All, Light, Dark, Structural, Palette only — or by theme family (Surface/Depth, Anti-Aesthetic, Retro/Futurist, Atmospheric).
• Click any card to open a preview on the right, rendering a mini-storefront in that theme. The same click also previews the theme on the editor canvas, so you can judge it against your real pages. This is only a preview: nothing is saved until you press Apply Theme. Leaving the Theme hub or cancelling the apply dialog puts the canvas back on your saved theme.

Featured tab

Curated picks — seasonal themes, trending looks, and editor's choices. Browse and apply them the same way as the Browse tab.

Custom tab

Any custom themes your store has saved — either created through the Fine-tune panel or by your brand team — appear here.

Viewing your live store and the live preview

Screen: Online Store → Theme.

The Theme page has two different things that look alike: the live preview (your storefront drawn inside the editor, so you can judge a change before saving) and the View store controls (which open your real, public storefront in a new browser tab).

Open your real storefront

1. Open Online Store → Theme.
2. Select View store. On the classic layout it is the outlined button in the page header; on the new (v2) layout it is the main button in the masthead at the top of the page.
3. Your storefront opens in a new tab. Each Theme page also has a small open-in-new-tab icon in the preview's toolbar (tooltip Open in new tab) that does the same thing.

These controls open your store's real address, picked in this order: your active custom domain, then your store's BillionBiz address, then the Website URL saved under Online Store → Theme → Look & Feel → General. A custom domain only counts once its status is active.

When none of those addresses is set, the classic layout disables View store and the preview-toolbar icon (they look greyed out and do nothing). On the new layout the toolbar icon is disabled and View store shows the message Your storefront link isn't ready yet — it'll appear here soon. instead of opening a tab. The live preview picks its address by a separate rule (your store's BillionBiz address first), so the preview and the open button can occasionally disagree: the preview may render while the open button is disabled, or the preview may show your BillionBiz address while the button opens your custom domain.

How the live preview loads and resizes

• The preview waits for your store to load. For the first moment after you open the Theme page, the preview pane stays blank while your store's settings load, then the preview appears. This is so the preview never requests the wrong site first.
• On a phone-width screen the preview moves below the form. On the new layout at about 640 pixels wide or narrower, the settings form takes the full width and the preview stacks underneath it, full width and a fixed height, instead of sitting beside the form. Scroll down to see it. The open-in-new-tab icon in the preview toolbar stays reachable there. On wider screens the two sit side by side as before.

Applied badge and Compare mode

The theme currently active on your store shows an Applied badge on its card. Hover over a different theme card to reveal a compare option, which opens a side-by-side preview of your current theme against the one you're considering.

Applying a theme

Apply a theme from Look & Feel (v2 admin)

If your admin uses the v2 layout, Online Store → Theme → Look & Feel also has a Theme section in its section selector, with an Appearance card and a Theme library grid of curated themes plus Browse all 100+ themes.

Product listings and product pages follow the applied theme

After you explicitly apply a theme preset in the current Store Editor, your product listing and individual product pages inherit the preset's heading and body fonts, primary colours, and button corner radius. Their selected page layouts remain in place; the applied theme changes the shared visual treatment around those layouts.

Stores that have never explicitly applied a preset keep their existing product-listing and product-page styling. Browsing or previewing a theme alone does not opt those pages into a new visual treatment.

The product listing page follows the store theme unless you pick one for it

The product listing (Category) page has its own optional theme choice in the Store Editor. Opening the Category page in the Store Editor no longer saves a page theme on its own: unless you explicitly pick a theme or Look for that page, the page saves without one and shows the store-wide theme from Settings → Theme. In the editor's preview, an un-picked Category page is drawn with that store-wide theme too, so the preview matches the storefront.

• Never picked: the listing page follows the store theme, and changing the store theme changes the listing page with it.
• Picked once: choosing a theme or Look card for the Category page in the Store Editor's template gallery and applying it saves that theme on the page. It then stays put when the store theme changes. Applying the gallery with only a layout change does not count as picking a theme. A saved custom theme chosen under Your Custom Themes in the page's Theme section counts as picking a theme too, so the page keeps that custom theme instead of following the store theme.
• Already had a saved theme: pages that carried a saved page theme before this change keep it. Picking a theme again for the page (even the same one) sets it explicitly.

For page-specific Type pairing, Motion, spacing, and supported region or text-element overrides, see Style and motion in the current Store Editor. An explicit element font or colour can take priority over the shared page and theme fallback.

Store-wide Product cards style

Use one shared card treatment for the products customers browse in a listing and the products recommended on a product detail page. Keep a local override when one page needs a different look; otherwise let both surfaces follow the store style.

Set up a shared card treatment

Screen: Store Editor → Site-wide → Product cards. Open the editor from Online Store → Theme → Page Layouts → Customers browse → Product page or Category page, then choose the Site-wide tile and Product cards category. The panel heading is Site-wide settings. Use the current Store Editor; the classic page-layout picker does not provide this shared group.

Card appearance controls

Open Product cards → Card · Appearance. Each row can inherit independently. The style changes the card container; page layout and catalogue content remain separate.

For example, combine Surface style → Filled, Padding → Md, and Corner radius → Lg for a filled card with breathing room. To return to a plain surface, reset any explicit Background colour and Shadow too; changing only the surface preset may leave a separate override in force. Border width and Border colour are hidden when Surface style is None; saved values are retained.

The shared panel is not tied to one selected page template, so its rows are editable without a page support matrix. Each consuming template still needs to render the relevant card element. A details line or secondary button that is absent cannot be created by changing its style.

Title, price, and details typography

Screen: Store Editor → Site-wide → Product cards → Card · Text → Title, Price, or Details. The third element is product metadata: styling it will not add a details line to a card that has none. Each element gets its own settings, so you can emphasize the price without changing the title.

Start by setting Font role or family → Heading on the title and Font role or family → Body on details. Adjust the price's Weight separately. Check a long product name on mobile before increasing Size scale. An explicit family can keep an element different from the theme's shared font roles; reset that property when you want it to inherit again.

Primary and secondary card buttons

Screen: Store Editor → Site-wide → Product cards → Buttons and controls → Primary button · Style or Secondary button · Style. The roles style existing card actions. Which action uses each role depends on the template; styling a role does not add an add-to-cart or wishlist button where none is rendered.

Both roles use the same controls. The state colours let you distinguish an interactive action, a selected action, an unavailable action, and keyboard focus.

After changing colours, test pointer hover and keyboard focus as well as the normal state. Check an unavailable product action too. Mobile touch does not provide a persistent hover state, so keep the default and selected treatments clear without relying on hover.

Local overrides, store style, and template defaults

For each property, the intended order is explicit local page override → store card style → template default. Setting one local property does not intentionally replace the entire store style. For example, a local title colour can differ while the card still inherits store padding and corner radius. Resetting a local property should reveal the store value; resetting the store property should reveal the template value when no local override remains.

The existing listing page's Card · Appearance group includes styling for its grid surface. That is separate from a shared treatment applied to individual card containers. Changing grid spacing or a recommendation rail's surrounding section does not mean you have changed the store-wide card style. The product page's Buybox · Appearance styles its purchase panel, which is also a separate surface from its recommendation cards.

Screen: Store Editor → Pages → Browse → Product Listing → Design → Card · Appearance or Card · Text for local listing properties; Buttons and controls holds its local button roles. A local value shows Overrides store card style. An unset row says Uses store card style when set; otherwise template default. Use Reset to store card style on a local card row to remove that override. For a button role, this resets the role's whole appearance object, not just one colour. These hints apply to listing card and listing button keys; product-detail controls keep their own template support and do not gain a new local recommendation-card editor here.

In the shared panel, use Reset to template default on a row to remove that store override. Reset text clears changed text rows; Reset zone clears changed appearance and text rows; Reset controls clears changed button roles. To clear the whole shared style, choose Reset all product cards to template default and wait for Saved. These store actions do not delete local page overrides.

Rows show Template default or Custom value, and groups count controls changed from template default. These count explicit saved choices, not differences from the last publish. Inside the store style, setting Template default on a background, border, or shadow row keeps the Surface style preset from filling that property. On a page's own card rows, a value left at or set to Template default is treated as unset, so the store style still applies there; only a saved custom value, or a saved button-role appearance, overrides it.

Which surfaces follow the shared style

Why does my product page card look different?

First decide which surface you are comparing. The main product gallery and purchase panel are not recommendation cards. They retain their page and zone styling. A recommendation rail can also have its own surrounding spacing, heading, image ratio, or layout even when the card properties match the listing.

Check whether the difference comes from a local listing override. A listing's explicit colour, font, radius, or button treatment wins on that listing; it is not automatically copied to the product-page recommendations. On the listing's card row, use Reset to store card style when both surfaces should follow the shared value. The product-detail inspector has no new local recommendation-card controls in this release. Leaving a shared property unset lets each template choose its own default, so two unconfigured cards can legitimately look different.

If both surfaces should match but do not, confirm that the shared panel reached Saved. Publish any local page changes and open fresh storefront pages. Check that the cards and actions exist in the chosen template and viewport, with populated recommendations. Compare a property covered by the shared style rather than an image crop or rail layout. If a product list still looks unchanged, check the three common causes. The page may have its own saved card value for that property, which wins over the store style; use Reset to store card style on that row. The layout may be Category drilldown, which has no product cards. Or the style may be unset or invalid: the storefront ignores a style it cannot read and falls back to the template rendering, so reset it with Reset all product cards to template default and set it again. On a product page, check the Related products Appearance group in the product-detail inspector: a saved value there (for example a corner radius) keeps that property on the cross-sell cards while the store style paints the rest. Button colours only ever change a card's own button, never the filter or toolbar buttons of the page.

Fine-tune

The Fine-tune sub-tab lets you adjust individual colour tokens — primary colour, background colour, accent colour — on top of whichever theme pack is currently applied. It also has separate Heading font and Body font pickers. Fine-tune changes layer on top of the theme; they don't modify the underlying theme pack itself, and you can save the result as a custom theme that then appears in the Custom tab.

Choose a type pairing

In Fine-tune, the Typography section starts with a Type pairing drop-down above the separate Heading font, Body font and monospace pickers. Each entry names a heading and body combination, such as Playfair Display + Inter or DM Serif Display + DM Sans; a few are a single family, such as Barlow (single-family).

Choose Custom at the top of the drop-down to stop using a named pairing. Your current heading and body fonts stay as they are; they simply are no longer tied to a pairing. The same happens when you then pick a font in the Heading font or Body font picker: the drop-down returns to Custom. A store that never chose a pairing shows Custom and its fonts are not changed.

In Store Editor → Site-wide → Branding → Typography, the font control is labelled Body font. Changing it there also clears a chosen pairing back to Custom.

Preview and apply a preset from Fine-tune

Go to Store Editor → Settings → Theme → Fine-tune. The preset cards separate trying a look from applying it, so browsing cannot accidentally replace your edited theme.

Set exact corner radii

The Corner radius card in Fine-tune offers three presets: Sharp (zero-radius corners), Soft (subtle rounding) and Pill (fully rounded cards and buttons). Under the presets, an Exact corners (px) block lets you set each corner yourself.

Typography & buttons

Below the spacing, corner and motion presets, Fine-tune has a Typography & buttons panel. Its description reads: "Store-wide look for titles, headings, buttons, links and product cards. Leave a control empty to keep the template default." Every control is optional, and a control you never touch changes nothing.

Identities

The Identities sub-tab applies a complete design direction to your entire storefront — landing page, product listing, checkout, and all 19 page types — in a single click, instead of picking a template per page. Identities are grouped by the plan tier they require: Max Plan, Growth Plan, and Starter.

Applying a theme preset after an Identity

An Identity gives every standard page its own theme pack as a starting point. If you later apply a different theme preset, your store's standard pages follow the newer preset rather than staying on the Identity's pack. This covers these 14 pages: About, Contact, the 404 (page not found) page, Login, Register, Forgot password, Email verification, Thank you, Order confirmation, Order tracking, Profile, Orders, Order detail and Wishlist. Your header, footer, product listing and product pages already follow the applied preset, so the whole storefront now matches.

Which theme a standard page shows is decided in this order, first match wins:

1. A theme you chose for that one page. A page-specific theme you saved yourself, one that differs from the theme the Identity gave the page, always wins over the store-wide preset. A page theme that is still the one the Identity seeded does not count as your own pick, so it follows the newer store-wide preset (rule 2).
2. The store-wide preset you applied last.
3. The Identity's pack, when you have applied an Identity and no preset.
4. The default light theme, for a store that never applied an Identity or a preset.

If you hand-picked your own colours instead of a catalogue preset, the store counts as Custom and does not supply a store-wide preset. In that case a standard page keeps the theme it already carries (the Identity's pack, or the default light theme).

A page that carries its own theme (a theme you saved for that page that differs from both the store-wide preset and the Identity) also paints its own background and section surfaces, so its text stays readable instead of mixing that page's text colour with the store preset's background.

Dark theme presets

When the preset you apply is a dark one (for example Abyssal), the whole customer experience turns dark, not only the home page:

• the cart, checkout, product listing and product detail pages;
• the 14 standard pages listed above;
• the header and footer;
• form fields, so text you type into the checkout address fields, Login, Contact, Profile and the pincode boxes stays readable against the dark field.

Light presets render exactly as they did before; nothing changes for a store on a light preset. The precedence list above applies to a dark preset the same way: a page whose theme is still the one the Identity seeded follows the dark preset, while a page theme you picked yourself keeps its own look. A page you deliberately keep on a light theme stays light with readable text, even on a dark store.

Theme families and what they change

Theme packs group into five families, each defining a different structural and visual language — not just a different colour:

For example, Glassmorphism gives your product cards frosted-glass panels with soft blur behind them, while Neubrutalism gives the same cards bold black borders and stark contrast — the theme changes the card structure, not just its colour.

Header and Footer Looks change only that section

The Header and Footer template galleries also show Looks cards. These are not theme presets:

• In the gallery, the helper above the Look cards reads "Looks change only this header, not your store's theme. Your structure stays." For the Footer it reads "Looks change only this footer, not your store's theme", followed by "Cards marked "Adds N Footer Sections" also add those rows."
• The structure chips above the cards (named after the header or footer structures) only browse that structure's Looks. Nothing changes until you pick a Look card.
• A Look therefore never recolours or re-fonts the rest of the storefront.

Next steps

• Pick a layout for your product, category, cart, and other pages
• Set your logo, colours, and fonts