# Footer
## Open the section
#### Steps:
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the "**Footer**" section from the theme editor toolbar.
Below are the details of settings in the footer section.
## Background
* **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.
## Footer's bottom
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.
## Layout
* **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.
## Footer columns
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:
### 1. Common settings in all column types(except "footer line")
* **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](https://getbootstrap.com/docs/3.4/css/#grid) 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:
### 2. Text, image & social 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](https://vodoma-docs.boostheme.com/tips#image-size-syntax) 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.
{% hint style="info" %}
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"**.
{% endhint %}
### 3. Link list column
* **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.
### 4. Contact info column
* **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.
### 5. Texts and icons column
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](https://boostheme.com/vodoma/icons), 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.
### 6. Facebook column
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 to register a Facebook app.
* **Facebook app id:** add your Facebook App ID.
* **Facebook fan page URL:** add your Facebook fan page URL.
### 7. Twitter column
This column type will help you display a Twitter widget.
* Twitter URL: add your twitter URL. Ex:
### 8. Blog, newsletter and social column
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.
{% hint style="info" %}
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"**.
{% endhint %}
### 9. Product list column
* **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.
### 10. Footer line
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.