How to edit your site footer

In short. Go to Appearance → Theme Editor → Footer to configure your Main Footer (template, font, colors, widget columns), an optional Top Footer band, the copyright line with auto-updating year shortcodes, and mobile-only Sticky Buttons. All four sections save together with one Save Footer click.

On this page: Fields · Steps — Main Footer · Steps — Top Footer · Steps — Copyright · Steps — Sticky Buttons · What success looks like · Troubleshooting

How to edit your site footer

What is this for?

The Footer runs across the bottom of every public page. It's where visitors look for contact details, social links, small navigation links, and your copyright line. The Footer Config screen covers four parts: the Main Footer (template, font, colors, widget columns), the Top Footer (optional thin band above the main footer), the Copyright block (auto-year line at the very bottom), and Sticky Buttons (mobile-only floating call/email shortcuts). One Save Footer button at the bottom of the screen commits all four parts at once.

This doc does not cover footer menus (build those in Sidebar → Appearance → Menu Builder) or per-page footer overrides (the footer is sitewide).

Examples

Good use cases

• Build a 4-column footer. Open Theme Editor → Footer → Main Footer, configure four widget slots (Paragraph for About + Quick Links + Contact, Code for the map embed), set background/text/link colors, and save.
• Add a Top Footer promo band. Toggle Top Footer → Enabled, type a one-line message (e.g. "Free shipping on orders over $50"), pick colors, save. The band renders above the main footer on every public page.
• Set a copyright line that auto-updates the year. Type © {{year}} {{site_name}} — All rights reserved. into the Copyright content field. The shortcodes fill the current year and site name on every page render — no annual edits needed.
• Add mobile Sticky Buttons. Toggle Sticky Buttons → Enabled, add a Call (tel:) and an Email (mailto:) button with icons and brand colors. They float at the bottom of mobile screens only.
• Swap Footer templates. Pick a different template (Centered / Left-aligned columns / Right-aligned columns / Full-width banner) from the dropdown. Your existing widgets re-flow into the new layout shape.
• Disable the Top Footer for the off-season. Toggle Top Footer → Enabled off and save. Re-enable with updated content when the next promo launches.

What NOT to use this for

• Don't put your main navigation here. Main nav lives in Theme Editor → Header, built via Sidebar → Appearance → Menu Builder.
• Don't paste <script> tags into widget content fields. Widget fields render as visible text. For site-wide scripts (analytics, chat widgets) use Sidebar → Custom Codes.
• Don't use the Footer for page-specific content. The Footer renders identically on every public page. For per-page sections, use the Page Builder.
• Don't add a copyright line as a widget. Use the dedicated Copyright block — it renders in the correct position with the right typography.
• Don't use Sticky Buttons as primary mobile navigation. They're for 1–2 high-priority actions (Call, Email). Adding more clutters the screen.

Fields

How this connects to other features

• Header — configured at Theme Editor → Header. Shares the widget loader pattern and color picker but has its own templates and field layout.
• Menu Builder — footer navigation link lists are built in Sidebar → Appearance → Menu Builder and assigned to the Footer location.
• Custom Fonts — every font in the Footer's font dropdown comes from system fonts, Google Fonts, or uploads under Sidebar → Custom Fonts.
• Media Library — image widgets and background images pick from the Media Library. Upload there first.
• Custom Codes — for site-wide tracking pixels or scripts, use Custom Codes not Footer widgets (code widgets render as visible text, not executed code).

Where to go

1. Click Sidebar → Appearance → Theme Editor.
2. Click Footer in the Theme Editor's left-side navigation.
3. The Footer Config screen loads with four cards stacked: Main Footer, Top Footer, Copyright, Sticky Buttons.
4. Edit any card, then click Save Footer at the bottom to commit all changes at once.

Steps — Build a 4-column Main Footer

1. Open the Footer Config

Click Sidebar → Appearance → Theme Editor → Footer. The Main Footer card loads at the top.

2. Pick a Footer template

Click the Template dropdown. Pick Left-aligned columns for a 4-column grid layout.

3. Set font, background, and link colors

Choose a font from the font picker. Enter hex values for background, text, link, and link-hover colors. A common pattern: dark background (#1a1a1a), light text (#f5f5f5), brand-red link (#d51522), white hover (#ffffff).

4. Configure the widget columns

Scroll to the widgets repeater. For each column, pick a widget type and fill its fields:

• Column 1 — Paragraph: Heading = "About Your Store", Body = short intro.
• Column 2 — Paragraph: a links list (Shop / Subscriptions / Wholesale / Press).
• Column 3 — Paragraph: phone, address, hours.
• Column 4 — Code or Embed: paste a Google Maps snippet or a Vimeo/YouTube URL.

5. Click Save Footer

The Save button is at the very bottom of the screen. One click saves the entire form including any changes to Top Footer, Copyright, and Sticky Buttons cards.

Steps — Enable the Top Footer

1. Scroll to the Top Footer card

It sits below the Main Footer card.

2. Toggle "Enabled" on

The card expands to show configuration fields.

3. Type a one-line message and pick colors

Example: Free shipping on orders over $50. Set a background color that contrasts with the main footer (e.g. brand red). Choose Center alignment.

4. Save Footer

The Top Footer renders above the main footer on every public page.

Steps — Set up the Copyright line

1. Scroll to the Copyright card

It sits below the Top Footer card.

2. Type the copyright text using shortcodes

© {{year}} {{site_name}} — All rights reserved.

{{year}} auto-fills the current year. {{site_name}} auto-fills the site name from Sidebar → Settings → General. No annual edits needed.

3. Pick text color and background, then save

Often the same as Main Footer colors — override here if you want a slightly different shade for the bottom line.

Steps — Add Sticky Buttons for mobile

1. Scroll to the Sticky Buttons card

It sits below the Copyright card.

2. Toggle "Enabled" on

The card expands to show the buttons repeater.

3. Add a Call button

Click "Add CTA". Fill in: Text = Call us · Link = tel:+1-555-12345 · Icon = phone · Style = Filled.

4. Add an Email button

Click "Add CTA" again. Fill in: Text = Email · Link = mailto:hello@yoursite.com · Icon = envelope · Style = Outlined.

5. Click Save Footer

Open the public site on a phone to verify the buttons appear at the bottom and follow scrolling.

What success looks like

A successful Footer save produces:

1. The Save button confirms with a green flash banner (Footer settings saved.).
2. The public site shows the updated Footer on every page on the next load.
3. The Main Footer renders with your chosen template, font, colors, and widget columns.
4. The Top Footer (if enabled) renders as a thin band above the main footer.
5. The Copyright line shows the current year auto-filled by {{year}}.
6. Sticky Buttons (if enabled) appear only on mobile screens, floating at the bottom.

What to do if it does not work

My Footer changes don't appear on the public site

• Hard-refresh with Ctrl+Shift+R (Cmd+Shift+R on Mac). A cached page can show the old footer.
• Confirm you clicked Save Footer. Re-open Footer Config — if fields reverted, the save didn't go through. Make changes again and confirm the green banner appears.
• Check you're on the right site. If you have multiple sites, confirm you saved the Footer for the one you're viewing.

A widget doesn't render as expected

• Re-open the widget's configuration. If the form is empty, the configuration was lost — re-fill it and save.
• Check the widget type. Accidentally picking Code instead of Paragraph renders content as code-block text. Switch to the correct type.

The Top Footer is invisible on the public site

• Confirm the Top Footer is enabled in Footer Config.
• Check color contrast. White text on a near-white background renders but is unreadable. Pick contrasting colors.

Sticky Buttons don't show up on my phone

• Confirm Sticky Buttons are enabled and at least one CTA is configured.
• Sticky Buttons never appear on desktop. Open the page on a phone to confirm.

The copyright year shows as literal {{year}}

• Confirm you used double curly braces. The shortcode is {{year}}, not {year} or [year]. Fix the brackets and save.

Footer template options

• Centered — all widgets center-aligned. Best for 1–2 widgets and a calm aesthetic.
• Left-aligned columns — left-aligned grid. Best for 3–4 widgets with content that lines up on the left edge.
• Right-aligned columns — opposite of Left-aligned. Occasionally used for right-to-left languages.
• Full-width banner — widgets stretch across full width with more spacing. Best for 1–2 wider widgets.

Known limitations

• Widgets are slot-based, not draggable across columns. To move a widget from Column 1 to Column 2, re-create it in the new column and clear the old one.
• Widget content fields don't support inline rich-text. A Paragraph widget's body is plain text. For bold or italic styling, use a Code widget with HTML.
• Top Footer has no widgets repeater. It's a single content field — one message.
• Sticky Buttons are mobile-only. They never appear on desktop or tablet.
• Saving is all-or-nothing. One Save Footer commits all four cards. If you make a mistake in one card, fix it and re-save.
• No per-widget visibility rules. The Footer is identical for all visitors on all public pages.

Next steps

• Browse the widget library — all widget types available in Footer columns.
• Add a widget to a sidebar or footer slot — detailed widget-loader workflow.
• Edit your site header — Header is configured at Theme Editor → Header with the same widget loader pattern.
• Pick a font from the font selector — how the font picker works on the Footer's font field.
• Browse the shortcode library — all shortcodes you can use in Top Footer and Copyright fields.