The Footer Editor: Sections, Templates & Components

Step-by-step guide to the Store Editor footer: the left rail (sections, parts and components, hide eyes, plus buttons, drag to reorder), the Components and Sections picker, arrangements and templates, every footer component, the compact mobile footer, store-prefilled starter blocks, mobile column accordion and part backgrounds, and fixing a footer customers do not see.

Your footer is built from stacked Footer Sections. The first one, the Main Footer (named Link Columns in the editor), is required; everything else is optional and you can add, hide, reorder, restyle and fill each one with your own components. Inside a section, the content sits in parts (side-by-side areas), and each part holds components (a heading, a link column, a QR code and so on). This guide covers the footer inside the Store Editor. For the older Page Layouts footer screens, see Navigation, Header & Footer.

Open the footer

Screen: Online Store → Landing Page Editor (called Landing page in the new admin sidebar). When the Store Editor is switched on for your admin, that menu entry opens it; the classic sidebar has no separate "Store Editor" item. Then pick Footer from the Pages panel on the left (it sits in the site-wide, "Chrome" group). If you land on the older Landing Page Editor screen instead, the Store Editor is not on yet; use the Footer section of Navigation, Header & Footer. Because the footer is shared, the row shows an All pages chip and the text "appears on all N pages" — editing it changes every page.

The far-left rail has four tiles: Pages, Site-wide, Library and Settings. The Library tile only appears where there is something to insert: on the Footer and on landing and section-based pages. On the Header and other fixed-layout pages the tile is hidden, so a missing Library tile there is expected. The right-hand inspector has three tabs: Content, Design and Behavior.

The left rail

With the footer open, the left rail lists your sections, top to bottom, in the order shoppers see them. The rail header is kept short so the list fits a laptop screen: it holds a small info icon (hover it for "is assembled from adjustable rows — style and rearrange them here. Changes appear on every page of your store."), the drag to reorder hint (only when there is more than one section) and the Change template link. The one section summary is at the bottom of the rail: a count reading "N sections · M visible" (or "1 section · 1 visible" for a single section), with the Add Footer Section button under it. A thin status strip along the bottom edge of the canvas preview carries the same count in the same wording, "N sections · N visible" followed by the page status; it is a read-only readout you cannot click.

Each section row shows, from left to right: a drag handle, an icon (the Payment and Security Bar shows a payment card, the Trust and Badges Bar a shield, the Legal and Policies Bar a copyright mark), the section name, an item count next to the name ("3 items", or "1 item" for exactly one), then the hide/show eye, a + button and a More actions menu. The required Link Columns row shows no item count.

Section rows and the hide eye

• Hide / show eye - hover or tab to a row and the eye appears. Its tooltip reads Hide on store or Show on store. A hidden section is struck through and dimmed in the rail and does not appear on your store until you show it again. The count line "N sections · M visible" counts the hidden ones out of M.
• Link Columns (the Main Footer) row - the first row, named Link Columns, holds your link columns. It is required, so it has no Remove action and no remove button, but it now behaves like every other row otherwise: drag it by its handle to reorder, use the eye to hide it, and use Hide on desktop / Hide on mobile in More actions (or the matching switches in the row settings) to hide it on one device only. Hiding it on mobile removes the whole link-column band from the mobile footer and leaves desktop untouched, and the reverse.
• Locked components - inside a section, a single locked component (such as a required link column) still shows a lock, with the tooltip "(name) is required in this row".
• Drag to reorder - drag any section, including Link Columns, by its handle to move it.
• More actions - Duplicate settings from…, Reset row, Hide on desktop / Show on desktop, Hide on mobile / Show on mobile, and Remove (not offered on Link Columns). Remove asks Remove this row? and, when you confirm, deletes the section. A small desktop or phone icon on the row shows when it is hidden on one device only.

Expand a section into parts and components

Click the disclosure arrow on a section to open it. Under it you see its parts, and under each part its components.

• Parts are named by position. Two parts read Left side and Right side; three read Left, Middle and Right; four or more read Part 1, Part 2 and so on; a section with a single part reads Content.
• A part with nothing in it says "No items yet — click ＋ to add".
• Components are listed by human names such as CTA button or Newsletter signup; a component type the editor does not recognise shows as Component, never a technical code.
• Click a part or a component to select it. The inspector on the right shows its settings.

To change the number of parts, their widths, the space between them or how they behave on a phone, select the section, then open Row layout in its settings: Parts across (1 to 6), Space between parts, On mobile (Stack parts or Keep parts side by side), and for each part a Width and a Background (see below). If you lower Parts across, the components from the removed parts move into the last remaining part instead of being deleted.

Five or six parts in a custom row

A Custom Footer Row can now have up to six parts. Set Parts across to 5 or 6 in Row layout; the new parts are named Part 5 and Part 6 (a section with four or more parts names every part Part N). Rows of 1 to 4 parts behave exactly as before and keep their Width values. Rows of 5 or 6 parts lay out as an even auto-fitting grid instead: the Width numbers are ignored, each part is at least about 8.5rem wide, and the row takes the full footer width on desktop. All the parts sit on one line from about 1024px wide, and they wrap onto extra lines on tablets and phones (three or two per line) rather than shrinking. Use 4 parts or fewer when you need precise width ratios.

Give a part its own background

Select a section, open Row layout and look under each part's Width for the control named after that part, such as Left side background (a two-part row), Part 5 background or Content background (for a one-part row). It is a colour field: pick a swatch or type a value, and its reset button clears it back to no background.

• On your store, a part with a background becomes a rounded, padded panel in that colour. A part with no background stays transparent.
• The storefront accepts only a hex value (such as #1f2937), an rgb(...) or rgba(...) value, or a theme variable written like var(--name). Any other text (a colour name, a gradient, an image address) is ignored and the part shows no background.
• Contrast warning. When a part has a background, the editor compares it with the section's text colour. If the ratio is below 4.5 to 1 it shows the message "Text on this background has a contrast of N:1. Aim for 4.5:1 or higher." under the field. It is a warning only: you can still publish. Change the part's background, or the section's Text colour under Style, until the message disappears. The check uses the section's own text colour, not colours you set inside individual components.

Collapse link columns on phones

Select a section, open its Layout tab and find Collapse link columns on mobile (helper text "Each link column becomes a tap-to-open section on phones"). It sits right under Readable mobile layout.

What it applies to: the section's link columns. In a Custom Footer Row, a part collapses only when its first component is a Heading or a Link column that has a title, because that text becomes the tap target; a part that starts with anything else is shown open as authored. On the standard link-column section, the columns collapse unless you have chosen an explicit store-wide link display style. The switch is off for every section until you turn it on, and it does nothing on desktop. "Mobile" here means wherever the storefront shows its mobile layout, which is the same width at which the header switches to the menu button. For current stores that is below 1024px, so tablets held in portrait collapse the columns too, not only phones. Stores that existed before that change keep their earlier 768px switch-over until it is cleared, so on those stores tablets still show the open columns.

Add things to the footer

There are four ways in. All of them end in the same small picker.

The picker has a search box labelled Search sections and components; while it is empty it shows the example text "e.g. newsletter, payment icons". Search matches name, description and group. Use Up and Down to move and Enter to add. If the list is longer than the picker, a "More below — scroll to browse" bar appears under it; click it or scroll. Choosing an entry adds it and closes the picker; clicking outside it closes it without adding anything.

A section type you already have is greyed out with an Added chip. If nothing matches the search the list says "No matching sections or components." If your footer has no sections the Components tab says "Add a section first to place components." and its entries are disabled.

Adding a component to a section that has never been customised keeps its built-in content, so the new component appears alongside the existing links instead of replacing them. The new component is then selected so you can edit it straight away.

Select a section on the canvas

Click anywhere on a footer section in the canvas preview and that section is selected on the first click: its row is highlighted in the rail and the inspector shows the section's settings. Click again on a component inside the already selected section to select that component instead. This two-step selection means you never land in a component's settings when you only meant to restyle the section.

Edit a section

Click a section. Its inspector tabs include Style (Background, Text colour, Links colour, Heading colour, Horizontal spacing, Shadow, Bottom divider, Divider colour), Layout (Content width, Vertical padding, Readable mobile layout, and the Row layout controls above), and Behavior (Hide on desktop, Hide on mobile). Reset row to theme drops your section-level overrides, including Heading colour. On the Link Columns row (the Main Footer) the hide switches are enabled like any other row, so you can hide it on one device or both.

Fix a footer contrast warning

The editor checks every visible footer section for readable colours. For each one it compares two colours separately against the section's background: the text colour and the links colour. When either pair is below 4.5 to 1 (WCAG AA) it raises an Accessibility error such as "Footer row “Legal and Policies Bar” link contrast is 3.10:1". The word in the message tells you which colour fails: text means the Text colour, link means the Links colour. A hidden section is not checked.

Links colour is the third control in the Colors group, after Background and Text colour. It sets the colour of the links in that one section. Until you set it, it follows your theme and shows the inherited colour; once you set a value it counts as an override, and Reset row to theme (top of the section's settings) clears it together with the section's other colour overrides.

Heading colour is the fourth control in the Colors group, after Links colour. Its help text reads "Brand name and column headings." The storefront applies it only in two kinds of section: on a brand-name (wordmark) section it colours the brand name, and on a link-columns section it colours the column headings. It is not applied to the brand block inside a link-columns section, and Text colour does not change any of these. Until you set it, it follows your theme; once set it is an override, and Reset row to theme clears it too.

If you click Publish while errors remain, a dialog titled Review errors before publishing offers Keep editing or Publish anyway. Publishing anyway is allowed, but the unreadable colours go live.

Brand-name (wordmark) contrast

Only a brand-name (wordmark) section gets the brand-name check: its Heading colour is compared with the section background, and because the brand name is large display text the pass mark is 3 to 1 instead of 4.5 to 1. A failure reads like "Footer row “Brand Statement” wordmark contrast is 2.40:1" (the name in quotes is whatever your section is called) with the hint "Choose a brand-name colour with a contrast ratio of 3:1 or higher against the section background."

A link-columns section is checked differently. Its Heading colour colours the column headings, so a low-contrast value is reported as "Footer row “Link Columns” column heading contrast is 2.40:1" (again the section's own name) with the hint "Choose a column-heading colour with a contrast ratio of 4.5:1 or higher against the section background." Column headings are normal-size text, so they need 4.5 to 1, like body text. The brand name inside a link-columns section is not coloured by Heading colour and is not part of this check.

For either message, Fix it selects that section and opens its Style tab with the Colors group open, focused on the Heading colour hex field. Change Heading colour (or the section Background) until the error clears.

Copyright line that names a different business

If the footer's copyright line names a business that does not match your store name, Check store shows a Suggestions item: "Footer copyright line “...” does not mention your store name", with the hint to update the copyright text in Site-wide settings or dismiss it if it is intentional. It is not an error and never blocks publishing. Click Dismiss beside it to hide it; the dismissal is remembered in this browser only, so it can reappear in another browser. Your copyright text is never changed for you. Years, the word "copyright", and endings such as Inc, LLC, Ltd or Pvt are ignored when comparing.

Change template

Click Change template (in the Design tab of the inspector) to open the template gallery. It has two parts. Arrangement at the top (the same cards described under Arrangements below) and Templates below. If more than one structure is available, a row of structure buttons narrows the template list ("Choose a structure to filter templates. Select a template card before applying."). Select a template card to stage it, then click Apply template. Apply template stays disabled until you have staged a card. Template cards marked "Adds N Footer Sections" also add those starter sections when applied.

Applying a template changes the footer's structure, layout and fonts and keeps the sections you authored. What happens to your colours depends on whether you have set any.

Keep my colours or use the template's

If you have set your own footer colours (a footer background, a colour-scheme override on the footer or a row, or a colour on any row) and the apply changes the look (a different template or theme), a dialog titled Apply template colours? opens before anything changes. It reads: "The template changes layout and fonts. Choose whether to keep your footer colours or replace them with the template colours."

If you have not set any footer colours, or you only re-apply the template and theme you already have, there is no dialog: the template is applied straight away.

Arrangements

An arrangement re-lays-out your saved Footer Sections without replacing them: the same rows and content, arranged differently. The picker is at the top of the Design tab of the inspector (and at the top of the Change template gallery) and offers five cards: Native arrangement, Balanced columns arrangement, Centered stack arrangement, Single-row arrangement and Split arrangement. Native arrangement keeps the template's own layout; the others spread link groups evenly, center and stack every section, flow sections in one row, or keep the newsletter and social apart from the link columns. Each card carries a short "Best for..." line.

Single-row arrangement on a desktop screen puts your link columns side by side in one row with the newsletter as a compact inline form (its heading is kept) at the end of the row. Where the row runs out of width (a phone), the items wrap onto separate lines and your section order is kept.

The components, one by one

Every component can be hidden per device: select it and use its Hide on desktop / Hide on mobile switches (Behavior). Components with nothing to show render nothing, rather than an empty box. Settings below are the exact control names in the inspector.

Also offered in the Components list: Logo, Search, Cart and account icons, Spacer and Divider.

Location hours and "View on map"

Select a Locations component and open a location in its list. Besides Label, Address and Phone, each location has two more fields:

• Opening hours - free text such as "Mon to Sat, 10am to 8pm". It shows as one line under the phone number. Leave it empty to show nothing.
• Map link - paste a full address that starts with http:// or https:// (for example a Google Maps share link). Shoppers see View on map, which opens that address in a new tab. There is no embedded map. An empty value, or one that is not an http or https address, shows no link.

App store badges

Add App store badges from the picker (it is in the Media group, described as "App Store and Play Store download badges."). It has two fields, App Store link and Google Play link, each up to 1024 characters. Paste the store listing address, starting with http:// or https://.

• A badge appears only when its link is filled in. Leave App Store link empty to hide the App Store badge ("Leave empty to hide the App Store badge."), and the same for Google Play.
• With both empty the block renders nothing, so a freshly added block is invisible on your store until you add a link. The editor preview does not show a prompt for this block either.
• The badges are drawn by BillionBiz (a small icon plus the words), not the official store artwork. They open the listing in a new tab.

QR code, HTML embed, Shipping information and Store features

These four start with starter content so you can see them. When you add one, BillionBiz fills it from your store details where it has them, and uses neutral wording where it does not. Replace the starter content before you publish.

• QR code - Website URL accepts http:// or https:// only, up to 1024 characters. Caption and Accessible label take up to 240. QR code size is 96 to 256 px. A new one starts with your storefront address in Website URL (your connected custom domain once it is active, otherwise your BillionBiz store address) and the caption "Scan to visit" followed by your store name. If your store name is missing the caption reads "Add your website URL", and if no storefront address is known the URL is left empty, so the QR code shows nothing until you type one.
• HTML embed - up to 10000 characters. A new one starts with a single contact line built only from what your store has saved: store name, support email (a mailto link), support phone (a tel link), then links to Privacy Policy (/privacy-policy) and Terms of Service (/terms-of-service), separated by dots. If your store has none of those details saved it starts with the neutral line "Add your footer content here." These two links only work if that policy page is enabled for your store; check before publishing.
• Shipping information - up to 8 items. It always starts with one neutral delivery note that you replace.
• Store features - up to 8 items. The first highlight's Title starts as your store name (or "About our store" if none is saved). Icon is one of box, arrow right, shield, bolt, lock, spark, sparkle, globe, tag, users; you cannot upload your own. Text and Supporting line take up to 240 characters, Title up to 120.

The prefill comes from your store's saved branding details (company name, support email, support phone and storefront address). If you add a block before those are saved you get the neutral copy; it is not updated afterwards, so edit the block or delete and re-add it.

Unedited starter content hint. While a block still matches its starter content exactly, a small line at the top of its Content tab reads "Unedited starter content. Replace it with your own before publishing." The line disappears as soon as you change any prefilled field. It is a reminder only and never blocks publishing.

Sample pictures in starter sections. Some footer templates add starter sections with sample picture tiles. Their captions no longer tell another brand's story: each caption is replaced by "From the" plus your store name plus "collection" (or removed if no store name is saved), and the picture's alt text becomes your store name. Edit them from the Media tiles component.

Prompts while editing. In the editor preview only, a text-type component with nothing in it shows a faint italic prompt instead of a blank gap, so you can see it is there: "Add text" (text note, prose, editorial statement), "Add a heading", "Add legal links", "Add contact details", "Add links", "Add content" (HTML embed), "Add delivery information", "Add store highlights", "Add locations" and "Add stats". These prompts never appear on your live store, where an empty component still renders nothing.

Section-specific settings

• Social Media Bar shows a "Follow us" heading and one icon per social link your store has saved.
• Trust and Badges Bar takes Badges (each with Badge label and Badge image).
• Legal and Policies Bar takes Copyright text (leave blank to omit it) and Policy links, each with Link label and Link URL.
• Legal links (in the footer's own settings, not a section): each link has a Label, a Link target dropdown and, when you choose Custom URL, a URL field. The dropdown lists Custom URL first, then your store's built-in public pages written like "Name (path)". Choosing a page fills the link and, if the Label is empty, uses that page's default name. Choosing Custom URL clears the address so you can type your own. Use Add for another link.
• Footer-wide Marquee text is set once in the footer's own inspector, not per section.

The back-to-top button

Customers on your storefront see a round arrow button once they scroll down the page; it scrolls them back to the top. The footer controls how it behaves.

Screen: Online Store → Landing Page Editor → Pages → Footer, with no section selected → Behavior tab → Sticky & scroll → Back to top button. The row has three choices:

New stores default to Scroll up

A store created after this change starts with Scroll up even though you have never touched the control: the store carries a creation-time marker, and the storefront treats an unset Back to top button as Scroll up when that marker is present. Two rules follow.

• Anything you choose explicitly (None, Back to top or Scroll up) always wins over the default.
• Existing stores are unchanged. They have no marker, so they keep showing the button exactly as before until you pick Scroll up yourself.

Site-wide override: Back-to-top button

You can also set the button once for the whole store from the Store Editor's Site-wide tile, which overrides the footer choice above.

Screen: Store Editor → Site-wide (far-left rail) → Scroll behavior → Back-to-top button. The group has these controls:

What customers see:

• The button rests at your chosen distance. When the footer scrolls into view it rises by at most 80 pixels, just enough to stay clear of the footer's bottom row, so it never covers footer text.
• When a cookie banner is pinned to the bottom of the screen the button lifts by the banner's height, so the banner does not hide it.
• The maintenance page never shows the button.

Mobile: the compact footer

Open the Settings tile in the far-left rail and choose Mobile web. It has two footer controls:

• Show footer sections - hint: "When off, phones show a compact footer with only your copyright line and legal links. The full footer rows stay on desktop." It is on by default.
• Simplified footer - hint: "Collapse footer content into a shorter mobile-friendly layout".

Turning Show footer sections off is the usual reason a new section is missing on phones (see Troubleshooting).

Footers without sections. A footer that has no saved sections (it shows only its template's built-in layout) used to ignore these two switches on phones. Now, when you change either Simplified footer or Show footer sections here, the change is saved together with a marker that turns on the readable mobile layout, and from then on the compact phone footer applies to that footer too: Simplified footer on, or Show footer sections off, gives phones the compact footer. Stores that have not changed either switch are left exactly as they were. If a footer without sections still looks full on phones, flip the switch off and on again to re-save it.

Mobile columns: Classic or Balanced

On the standard footer layouts (every grid-style template), Classic keeps the original two-across grid on phones: each pair of link columns forms a row, so one tall column (for example a long About paragraph) stretches its row and leaves an empty gap beside the next column. Balanced removes those rows. On phones narrower than 640px it shows one column; from 640px it shows two balanced columns that flow down the page, and a link group is never split across the two columns. Desktop is not affected.

Which one you start on:

• New stores start on Balanced. A store created after this control shipped renders Balanced on phones even if you never open the footer editor, and the control shows Balanced.
• Existing stores stay on Classic. A store created earlier has no saved choice, so its footer renders exactly as before until you pick Balanced and publish.
• Your saved choice always wins. If you pick Classic on a new store and publish, the store stays on Classic.

The control is offered on all seven footer templates, but it has no visible effect on two kinds of footer: the PanelCard template, which stacks its columns vertically, and footers with an applied arrangement (you clicked Apply on an arrangement card), whose saved sections lay out their own columns and already show one column on phones.

Readable mobile layout

A per-section switch that tightens a section's side margins on phones so link columns have room and links stop wrapping.

What it does: on phones the section's side margins for link columns are capped at 16px. Desktop and tablet are unchanged.

Which sections have it on:

• New sections start ON. A section you add with Add Footer Section, Insert section here or the Sections tab of the picker, and the starter sections a footer template creates, start with the switch on.
• Existing sections stay OFF until you turn them on. Your saved footer is never changed behind your back; editing or saving a section does not flip the switch for you.

Preview, Compare, then publish

• Preview (top bar, tooltip "Open the live preview") opens your store's preview.
• Single | Compare (canvas toolbar) switches the canvas between one device and all three side by side (tooltip "Compare devices").
• Publish (top bar) puts your footer on your live store. Because the footer is shared, publishing changes every page.

Version history: see and restore earlier versions

History works on the footer as a whole (all sections together), because the footer is shared by every page.

Restore this Version is disabled while Current Editor Version is selected (there is nothing to restore) and while a version is still loading. If a version cannot be read you see "This version could not be loaded. Try another version." or "This snapshot appears to be corrupted and cannot be restored."

Troubleshooting