---
description: >-
  Learn to create a functional footer to feature important information of your
  Shopify store
---

# Footer

"The footer is the section of content located at the bottom of a web page. It usually contains quick links to essential pages such as your homepage, about us, blogs, contact, and policy pages.

A well-designed website footer facilitates visitor navigation, enhancing the overall eCommerce experience."

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FzZ0FZrflWG6OpWZIu2X0%2F1.png?alt=media&#x26;token=07f7596d-2c72-4f64-8cac-95b6a84f1344" alt=""><figcaption></figcaption></figure>

## How to create a Footer

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Footer**
2. Locate and add suitable blocks
3. **Save**
{% endhint %}

## General settings

### 1. Desgin

"You have the option to customize the layout and container type for your footer section. Opulent offers three different layouts for the footer section, which rearrange the positioning of addons, payment icons, and copyright text.

You can enable or disable borders between blocks by checking or unchecking the respective box."

### 2. Copyright

A copyright notice informs the public that the work is protected by copyright. To know more about copyright, see [Copyright](https://help.shopify.com/en/manual/your-account/copyright-and-trademark#about-copyright).

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FiQhsjyiuXw6IBrUvvhAI%2F2.png?alt=media&#x26;token=3b7ae5b2-e2fb-4902-a519-a61e967e8582" alt=""><figcaption></figcaption></figure>

### 3. Add-ons

Like the header, this element provides extra information for the store footer such as social icons, language selector, etc. by ticking/unticking the corresponding checkboxes.

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FtizTl4us8wgSF5T2snxO%2F3.png?alt=media&#x26;token=f943bdd0-b13c-4584-a7b5-8873544e2ad5" alt=""><figcaption></figcaption></figure>

### 4. Payment methods

"Offering multiple payment methods simplifies the checkout process for your customers and elevates your brand image. To learn how to configure alternative payment methods for your store, refer to the Payments section.

You can toggle the display of payment icons on or off by checking or unchecking the checkbox. You have the option to utilize payment icons through images or leave the field blank to display the default payment icons."

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FtzyDNXu3MN2WLRAHNJqp%2F4.png?alt=media&#x26;token=cee3060a-cf72-4205-a22a-5b8adacc899a" alt=""><figcaption></figcaption></figure>

## Block settings

Add suitable blocks to your store footer as per your requirements. You can add up to 5 blocks.

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FrZIhbls9ecZE7Gu3KPhl%2F5.png?alt=media&#x26;token=c696c50b-0b31-45e6-a09f-b928cb651392" alt=""><figcaption></figcaption></figure>

### 1. Menu

Display the existing menu you created in **Shopify admin** > **Navigation.**&#x20;

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FXWXbIwPXKGFxLnquvlPx%2F6.png?alt=media&#x26;token=23cabe37-0b3c-4460-aabd-260d8888ed0a" alt=""><figcaption></figcaption></figure>

### 2. About

Use this block to display your store contact: store email address, phone number, and social icons.

To add or update store contact information, go to **Theme settings** > **Store contact**.

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FzWrReTIxaICdFCIXVdGZ%2F7.png?alt=media&#x26;token=7a20160d-9da1-4612-a83d-760b07cb1aa2" alt=""><figcaption></figcaption></figure>

### 3. Newsletter

"Utilize the newsletter signup form to gather your customers' email addresses for your email marketing campaigns.

* You can customize the title, description, and placeholder text for the email input field. Additionally, you have the option to display an icon input if desired."

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2Fk4Vo1TwGIb8CN7IFkXsk%2F8.png?alt=media&#x26;token=eafa1b01-437d-4828-8a41-2181c503ba3d" alt=""><figcaption></figcaption></figure>

* "You can customize the submit button using the Button Label (text/icon - leave the field blank), Button Position (Same line as input field/Under input field - Only applicable with bordered form style), and Button Style (Plain button/Secondary button/Primary button) options."

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FOL1DsEY5hFmzfp4zdAv3%2F9.png?alt=media&#x26;token=d29437b4-8bfd-4446-b85b-00f70bb236db" alt=""><figcaption></figcaption></figure>

"You have the option to select from two different form styles: Bordered or Minimal, allowing you to choose the one that best fits your website's aesthetic. Additionally, you can enable or disable the social link and "Terms & Conditions" checkbox. You also have the flexibility to adjust the container width to ensure it fits seamlessly within your footer."

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FZqQcsDAJnmH4iCoS50Hy%2F10.png?alt=media&#x26;token=32c78659-439f-40a9-9df4-dfeb41848eba" alt=""><figcaption></figcaption></figure>

* Bordered style

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FYXHJYICNEPmu9iIU3gRu%2F11.png?alt=media&#x26;token=54ab05ad-ad5d-494c-a1e0-c78b09c01151" alt=""><figcaption></figcaption></figure>

* Minimal style

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FFgz830qhjcgefd2YkeXA%2F12.png?alt=media&#x26;token=a5e4449a-1c1d-4e53-b43b-f7e02ae9e3de" alt=""><figcaption></figcaption></figure>

* The block can be enabled/disabled the **Order first** and **Open by default** options on the mobile.

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2F6uRBO3OUuiQqn81gxSCb%2F13.png?alt=media&#x26;token=e94faf4a-fb8b-47bf-860a-47f24e4061fd" alt=""><figcaption></figcaption></figure>

### 3. Custome content

Display additional info or needed material using the blank fields.

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2F4jbAifnuqGNROMMTNsqK%2F14.png?alt=media&#x26;token=8707f13f-c376-44cb-b29a-6115996f8fb7" alt=""><figcaption></figcaption></figure>

### 4. Spacing

You can use this block to adjust the space between existing columns

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2F66JggrTHwGWeW0lEuPNt%2F15.png?alt=media&#x26;token=45e9726c-62b8-4b25-9129-ecad53581925" alt=""><figcaption></figcaption></figure>
