The BudStacks Guide · Part 6

The Look

Your storefront's identity — colours, logo, layout, and content, edited live.

In your admin: /tenant-admin/branding

▶ The Look
Tab

Brand

The branding editor with the Brand tab open and the live preview pane beside it
The Store Editor: controls on the left, your actual storefront drawing itself on the right.

What it’s for

Your identity, in one tab: business name, logo, favicon, the colours the whole site is built from, and your typefaces. Change any of them and the preview on the right redraws while you watch.

What it does

  • Business Information — the name shown across your site, and a tagline.
  • Brand Images — your logo (a PNG or SVG with a transparent background works best) and your favicon, the small icon in the browser tab.
  • Logo Placement — how large the logo sits in the menu bar, and whether it also appears over your hero image; drag it on the small preview to position it.
  • Colours — six choices named in plain words: Button, Call-to-Action, Links & Highlights, Page Background, Heading Text and Body Text.
  • Design — button shape, size and hover effect; card corners, shadows and spacing; glass effects, scroll animations and the shape of the divider between sections.
  • Typography — a body font and a heading font, their sizes and weights, and letter spacing.

Try it: Put your logo and colours on the site

  1. Open Branding. You land on the Brand tab with the preview on the right.
  2. Under Brand Images, choose your logo file.
    You should see it appear in the preview's menu bar within a second. Nothing was saved — you are just looking at it.
  3. Scroll to Colours and set Button and Call-to-Action to your brand colour.
    Every button in the preview changes at once, including the ones further down the page.
  4. Leave the other four alone unless something looks wrong.
    Colours you never touch keep following your theme's own palette — you are not expected to fill in all six.

Why you’ll use it

Customers decide whether a shop is real in about two seconds, and they decide on the logo and the colours. This is the cheapest credibility you will ever buy.

  • · Only the colours you actually change are saved. The rest stay tied to the theme, which means a theme improvement still reaches them.
  • · Business Name is required — the editor will not publish with it empty.
Tab

Layout

The Layout tab listing the homepage sections in order with drag handles
The running order of your homepage — drag a section by its handle to move it.

What it’s for

The running order of your page. Every band a visitor scrolls through — the hero, the product showcase, the testimonials, the call to action — is a section in this list, and this is where you decide which exist and in what order.

What it does

  • Drag a section by the handle on its left to move it up or down the page.
  • Add Section opens a library grouped by purpose — heroes, calls to action, content sections — each with a line describing what it does.
  • The bin takes a section off the page.
  • The order in this list is the order a visitor scrolls, top to bottom.

Try it: Move a section up the page

  1. Open the Layout tab. Your sections are listed in the order they currently appear.
  2. Grab the handle to the left of a section and drag it above another.
  3. Look at the preview — the page has already re-ordered itself.
    Putting your product showcase directly under the hero is the single most common change owners make here, and usually the one that pays.

Why you’ll use it

Most visitors never reach the bottom of a homepage. Deciding what they meet first is a five-second drag, and it moves more people towards your products than any amount of rewriting.

  • · Removing a section is not a hide switch. You can add the same type back from the library, but it returns with its default wording rather than the copy you had written.
  • · Section names come from your theme, so this list is different from store to store.
Tab

Content

The Content tab with a section panel expanded showing its Content and Colour sub-tabs
One panel per section — open it and the preview scrolls to the band you are editing.

What it’s for

The words, pictures and product picks inside each section, plus your menu and your footer. Everything a customer actually reads is edited here.

What it does

  • Navigation — pick a menu style, edit the menu links, set the button at the top-right, and choose whether the cart icon shows.
  • One panel per section, in page order. Open it and you get exactly the fields that section has: headings, body text, images, videos, buttons, and lists you can add rows to.
  • Selecting a section scrolls the preview to it and flashes an outline around it, so you always know which band you are editing.
  • Product sections can point at real products from your catalogue with a picker, instead of hand-typed placeholders — see Part 2, The Catalogue.
  • Each section also has a Colour sub-tab, for the times one band needs to break from the site palette.
  • Swap variant changes a section to a different design in the same family and carries your wording across.
  • Sections you have edited are marked with a dot and the word “edited”, so you can see at a glance what you have touched.
  • Footer — style, tagline, address, email, disclaimer, link columns and social links.

Try it: Rewrite the words on your hero

  1. Open the Content tab and click your hero section to expand it.
  2. Watch the preview jump to that band and flash an outline round it.
    On a page with a dozen sections, that highlight is the fastest way to be sure you are editing the one you meant.
  3. Change the headline and sub-heading. The preview updates as you type.
  4. Set the button text to something a customer would actually click — “Check if you're eligible” beats “Learn more” every time.

Why you’ll use it

A template's placeholder copy is written for nobody. Twenty minutes replacing it with your own words — what you sell, who you sell it to, what happens next — is the difference between a demo site and a shop.

  • · The scroll-and-highlight works on the desktop preview only. Tablet and mobile are real browser frames, so they cannot be driven from the editor.
Concept

Previewing and publishing

What it’s for

The right-hand pane is your real storefront, drawn with the changes you have made but not yet saved. Publish Site is the moment those changes reach the public.

What it does

  • The desktop preview redraws as you work — it is the live one, and it includes everything you have not saved yet.
  • The tablet and mobile buttons load your storefront at those screen widths in a real browser frame, so menus and stacking behave exactly as a phone would.
  • Preview, at the top right, opens the same thing full-size in a new tab.
  • Publish Site saves all three tabs at once and applies them to every page of your store.

Try it: Refresh your homepage in ten minutes

  1. Brand tab: upload your logo, then set Button and Call-to-Action to your brand colour.
  2. Still on Brand, scroll to Typography and choose a heading font.
    One font change moves the look further than an hour of anything else on this page.
  3. Layout tab: drag your product section directly under the hero.
  4. Content tab: open the hero and rewrite the headline, sub-heading and button text in your own words.
  5. Press Publish Site.
    You should see “Branding updated successfully” and the change is live on your storefront from the next page load.
  6. Now switch the preview to Mobile and scroll through it.
    The phone and tablet frames load your published site, so this check is honest only after publishing — do it last, not first.

Why you’ll use it

You can try anything here. Nothing a visitor sees changes until you press one button, so the expensive fear — breaking your own shop while experimenting — simply does not apply.

  • · The flip side of “nothing is live until you publish”: leaving the page before publishing throws your changes away. There is no draft kept for you.
  • · Publishing writes to whichever design you are editing. If you arrived here from a theme's Customize button, you are editing that theme — which may not be the one your customers are currently seeing. Part 8, The Theme Library, explains which is which.