Brand column, link menus, newsletter, the bottom bar with policies and payment icons, and the large wordmark.
munich-demo.myshopify.com
The footer on desktop with four columns and the large wordmark below.
What it does
The footer is a grid of blocks over a bottom bar. The blocks are the brand column with
your logo, a short text and social icons; menus, one per block; a newsletter signup; free
text; and an image. The bottom bar carries the legal menu, the payment icons, the
country and language selectors where they apply, and the Powered by Shopify line. Below
all of it, the footer can close with an oversized wordmark or logo.
When to use it
Always; it is part of the footer group and appears on every page. Keep it to what a
visitor at the bottom of a page actually needs: how to reach you, where the policies are,
how to sign up. Four columns on desktop is the default and suits most stores.
Blocks
Footer brand: logo, the shop’s description text, contact lines, social media icons
and the Follow on Shop button.
Menu: one menu with a heading, or a plain row of links.
Newsletter signup: heading, text and an email field that subscribes the visitor as
a customer with marketing consent.
Text: a free paragraph, for a tagline or an address.
Image: a badge, a certification, a payment partner mark.
Each block has a Width: one column or two of the grid.
Setting it up
Set Columns on desktop and pick a Color scheme; the dark scheme is the demo’s.
Keep the Footer brand block first and set its width to 2 columns.
Add one Menu block per link group, pick the menu, name the heading.
Add Newsletter signup last in the row, or put it in the first column under the
brand text.
In Bottom bar, pick the Legal menu and decide on payment icons and selectors.
Choose Large wordmark and its Opacity.
Settings
Setting
Type
What it does
General
Color scheme
Color scheme
The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors.
Width
Select
Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width
Layout
Select
Columns lays the blocks out in a grid. Centered stacks them in one centered column, for a footer with little content.Options: Columns, Centered · Default: Columns
Grid
Columns on desktop
Select
How many columns the grid has on desktop. Blocks set to 2 columns take two of them.Options: 2, 3, 4, 5 · Default: 4
Brand
Large wordmark
Select
The oversized shop name or logo that closes the footer. Hidden turns it off.Options: Hidden, Shop name, Logo · Default: Shop name
Opacity
Range
How strongly the large wordmark shows against the footer background. Lower values make it a watermark.10 to 100 % · Default: 100
Bottom bar
Legal menu
Menu
The menu in the bottom bar, next to the payment icons. Meant for policy pages.Default: footer
Show payment icons
Checkbox
Shows the icons of the payment methods your store accepts in the bottom bar.Default: on
Show country and currency selector
Checkbox
Shows the country and currency selector. Only appears when the store sells in more than one market.Default: on
Show language selector
Checkbox
Shows the language selector. Only appears when the store is published in more than one language.Default: on
Show Powered by Shopify
Checkbox
Shows the Powered by Shopify line in the bottom bar.Default: on
Footer brand block
Setting
Type
What it does
Width
Select
How many footer columns the block takes up.Options: 1 column, 2 columns · Default: 2 columns
Show social media links
Checkbox
Shows the social media icons for the profiles set under Theme settings, Social media.Default: on
Show Follow on Shop button
Checkbox
Shows the Follow on Shop button, which lets a visitor follow your store in the Shop app.Default: on
Text block
Setting
Type
What it does
Text
Rich text
The text this block shows.Default: <p>Use this text to explain the product, the story, or the promise behind it.</p>
Size
Select
Large for a lead paragraph, Medium for body copy, Small for fine print.Options: Large, Medium, Small · Default: Medium
Alignment
Select
Overrides the alignment of the section for this block only. Inherit follows the section.Options: Inherit, Left, Center, Right · Default: Inherit
Contact detail block
Setting
Type
What it does
Icon
Select
The icon in front of the line: email, phone, clock and so on.Options: Email, Phone, Chat, Reply time, FAQ, None · Default: Email
Text
Text
The text this block shows.Default: Add a line of contact info
Link
Link
Makes the line a link. Use mailto: for an email address and tel: for a phone number.
Menu block
Setting
Type
What it does
Width
Select
How many footer columns the block takes up.Options: 1 column, 2 columns · Default: 1 column
Layout
Select
Columns lays the blocks out in a grid. Centered stacks them in one centered column, for a footer with little content.Options: Column with a heading, Row of links · Default: Column with a heading
Heading
Text
The title above this block's content.Default: Shop
Menu
Menu
Which menu from Online Store, Navigation to show. Only the first level is used.Default: footer
Newsletter signup block
Setting
Type
What it does
Width
Select
How many footer columns the block takes up.Options: 1 column, 2 columns · Default: 2 columns
Heading
Text
The title above this block's content.Default: Stay in the loop
Text
Rich text
The text this block shows.Default: <p>Tell customers what they get for signing up.</p>
Button label
Text
The text on the newsletter button.Default: Sign up
Text block
Setting
Type
What it does
Text
Rich text
The text this block shows.Default: <p>Use this text to explain the product, the story, or the promise behind it.</p>
Size
Select
Large for a lead paragraph, Medium for body copy, Small for fine print.Options: Large, Medium, Small · Default: Medium
Alignment
Select
Overrides the alignment of the section for this block only. Inherit follows the section.Options: Inherit, Left, Center, Right · Default: Inherit
Image block
Setting
Type
What it does
Image
Image
The image to show.
Alt text
Text
Describes the image for people using a screen reader. Leave empty to use the alt text from Content.
Image ratio
Select
The shape the image is cropped to. Adapt keeps the proportions of the file.Options: Adapt to image, Square, Portrait, Landscape · Default: Landscape
This section also accepts app blocks, so apps that provide one can add content here.
Tips
Menus are store data. Create the footer menus in Online Store, Navigation first, then pick them in the Menu blocks.
Put policy pages in the Legal menu of the bottom bar, not in a Menu block. Shopify creates the policy pages under Settings, Policies; link them from there.
A dark color scheme on the footer uses the Light logo from Theme settings where a logo appears. Upload one if your main logo is dark.
The large wordmark works best at 20 to 40 percent opacity on a dark footer. At 100 percent it competes with the content above it.
