Footer
With our theme, you can drag &, drop, adjust the size of each columns in the footer section.
Last updated
Was this helpful?
With our theme, you can drag &, drop, adjust the size of each columns in the footer section.
Last updated
Was this helpful?
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit and click Customize.
Click the "Footer" section from the theme editor toolbar.
Below are the details of settings in the footer section.
Enable: Show/hide the background.
Pick a color: set the background color.
Background image: pick or upload your image to display as the background image.
Add your copyright and the footer's links that will be shown at the bottom of all pages. However, you can add your copyright as text in the Footer Columns.
Show the gutter top at: show/hide the space above the footer section. There are 3 values for this setting:
All pages: show the space on all pages.
Exclude the home page: show the space on all pages except the home page.
None: not show the space on all pages.
Wide display: tick this checkbox to display the footer section in the wider layout.
Scroll down to the bottom of the theme editor toolbar, click the "Add content" button to add a column. You can also drag and drop columns to resort to them.
All column types(except "footer line") have common and own settings. Below are common settings:
GENERAL SETTINGS:
Column Title: add the title for the column. Ex: About us, Contact,...
Text align in desktop: align the text in a column in tablet and desktop screens.
Text align in mobile: align the text in a column in mobile screens.
COLUMN WIDTH: Adjust the width of a column. By default, the column width is build based on the grid system in Bootstrap (12 columns per row). You can refer this article to get the details.
Desktop: the width of a column in tablet and desktop screens.
Mobile: the width of a column in tablet and mobile screens.
DESKTOP GUTTERS: Turn on/off the gutter of a column in tablet and desktop screens.
Top: turn on/off the top gutter.
Bottom: turn on/off the bottom gutter.
MOBILE GUTTERS: Turn on/off the gutter of a column in mobile screens.
Top: turn on/off the top gutter.
Bottom: turn on/off the bottom gutter.
And own settings for each column:
This column type will help you display text, image, and social icons.
IMAGE:
Image Picker: pick an image you want to show in the column.
Image size: add your image size such as "300x", "master",... Leave "master" if you want to display the origin image. Please refer to this guide for more details about image size.
TEXT SETTINGS:
Enable: show/hide the text.
Text: add your text content.
Text color: pick a color to display the text.
Font size: change the text's size.
SOCIAL SETTINGS:
Enable: show/hide the social icons.
RSS: show/hide the RSS icon. Note: RSS icon is only displayed on articles or blog pages.
You can edit the social links in "Theme Settings" > "Social media" and change color and font size for these icons in "Theme Settings" > Colors and Font sizes > "Footer" > "Social icons".
Link List: pick a link list to display.
Display the link list inline: by default, the link list will be displayed in vertical mode. Tick this checkbox if you want to display the link list in horizontal mode.
Font size: change the link list size.
Address: add your store's address.
Phone: add your phone number.
Email: add your email address.
Opening hour: add the opening hour of your store.
This column has 2 element groups. Each group has 1 icon and 2 texts. Below is the settings in a group:
TEXT GROUP:
Icon: add your icon HTML class. You can go to this icon page, find and choose any icon you want, then copy the corresponding HTML class and paste it into this setting field.
Title: add your title text.
Subtitle: add your subtitle text.
COLORS:
Icon: change the color of the icons.
Title: change the color of the title. the color of the subtitle will be gotten automatically base on the title.
This column will help you show a Facebook widget of your Facebook fan page. To display the Facebook widget, you need to register a Facebook app, then paste your Facebook App Id and Facebook fan page URL in the below settings. You can refer to this page https://developers.facebook.com/docs/apps/ to register a Facebook app.
Facebook app id: add your Facebook App ID.
Facebook fan page URL: add your Facebook fan page URL.
This column type will help you display a Twitter widget.
Twitter URL: add your twitter URL. Ex: https://twitter.com/boostheme
This column type will help you display article links in a certain blog, a newsletter form and social icons.
BLOG SETTINGS:
Enable: show/hide article links.
Pick a blog: pick a blog to display article links.
NEWSLETTER FORM SETTINGS:
Enable: show/hide the newsletter form.
Form title: the title of the form.
SOCIAL SETTINGS:
Enable: show/hide the social icons.
Rss: show/hide the RSS icon. Note: RSS icon is only displayed on articles or blog pages.
You can edit the social links in "Theme Settings" > "Social media" and change color and font size for these icons in "Theme Settings" > Colors and Font sizes > "Footer" > "Social icons".
Pick a collection: choose a collection to display its products.
Limit: the number of products will be shown.
Show the main thumbnail by:
Featured product image: display the image that is set as the feature.
First available variant image: display the image of the first available variant.
This is a special column type. It will help you create a line to split the rows in the footer if you want to display the footer in multiple rows.
GENERAL SETTINGS:
Color: pick a color for the line.
Hide the line: not display the line. Sometimes you need to create a space between the rows, this setting will be helpful for you.
Full width: display the line full on the screen.
DESKTOP GUTTERS:
Top: change the gutter above the line in tablet and desktop screens.
Bottom: change the gutter bottom the line in tablet and desktop screens.
MOBILE GUTTERS:
Top: change the gutter above the line in tablet and mobile screens.
Bottom: change the gutter bottom the line in tablet and mobile screens.
BACKGROUND BOTTOM AREA: Set the background color for the areas that are displayed below the line.
Enable: turn or/off the background color.
Pick a color: choose a color for the background.
