> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/minimog-theme/pages-global-sections/footer.md). # Footer Learn to create a functional footer to feature important information of your Shopify store

Install XFlow Back In Stock Automation FREE

{% embed url="" %} ![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FgCO3hmRRWAqkCjfHrPFK%2FScreen%20Shot%202021-10-18%20at%2022.22.23.png?alt=media\&token=09b8e81c-982e-4ee3-8f79-8bd00de71221) ## What is Footer? The footer is the section of content at the bottom of a web page. The footer menu typically contains quick links to your homepage, about us page, blogs page, contact page, policy page, etc. A great website footer will help visitors navigate your site, leading to a greater eCommerce experience. ## How to add the Footer section to your Shopify store You can freely customize the footer section to suit your business needs, such as adding a footer menu, a newsletter, and other blocks. {% hint style="success" %} Steps 1. In the theme editor **(Customize)**, click **Footer** 2. Locate and add suitable blocks 3. **Save** {% endhint %} ## How to edit the Footer section ### Section settings #### General Select the **Color scheme** for the section.

{% hint style="info" %} Set up your Color schemes anytime in the Theme settings > [Colors](/minimog-theme/theme-settings/colors-and-color-schemes.md). {% endhint %} Set the **Layout** for your footer:

{% tabs %} {% tab title="Layout 1" %}

{% endtab %} {% tab title="Layout 2" %}

{% endtab %} {% tab title="Layout 3" %}

{% endtab %} {% endtabs %} You can choose your **Container type** for the collection list as: * Default * Full width * Use container box

Enable or disable **Block bordered** to add borders around footer blocks.

Enter your **Copyright text**. *Example: © MINIMOG \[year]*

{% hint style="info" %} 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). **Note**: The `[year]` variable automatically displays the current year. {% endhint %} #### Addons Similar to the header section, this element provides extra information for the footer such as social media icons, language selector, etc. by ticking/unticking the corresponding checkboxes.

* **Social media icons**: To display icons for any social media platforms that you've entered a profile link for in your Theme settings > [Store contact](/minimog-theme/theme-settings/store-contact.md). * **Country/region selector**: Display a country selector for stores using Shopify Markets. * **Currency selector**: Allow customers to switch currencies. [Watch tutorial](https://foxecom.link/TsDtIw) * **Language selector**: Allow customers to switch languages. [Watch tutorial](https://foxecom.link/eBEvt2) #### Follow on Shop Follow on Shop allows customers to follow your store on the [Shop app](https://help.shopify.com/en/manual/online-sales-channels/shop). Customers who follow your store can receive personalized recommendations and notifications about your products, creating a more personalized shopping experience for your customers. Follow on Shop button is available on **Minimog version 3.5.0 and above** (see [Changelog](https://help.foxecom.com/changelog/minimog?utm_source=foxecom\&utm_medium=help_center_minimog_footer\&utm_campaign=anchor_text\&utm_term=changelog#version-3.5.0)).

To enable the Follow on Shop button, you must have the [Shop channel](https://help.shopify.com/en/manual/online-sales-channels/shop/setup) installed, and [Shop Pay activated](https://help.shopify.com/en/manual/payments/shop-pay#activate-shop-pay) on your store. #### Payment methods Providing various purchasing methods makes checkout easier for your customers and enhances your brand perception.

Enable **Show payment icons** to display accepted payment methods.

You can also upload a custom **Payment icons by image** instead of using Shopify payment icons. Adjust the **Image width (px)** to control the display size of the payment image. {% hint style="info" %} The payment methods here reflect the settings configured in [Payments](https://help.shopify.com/en/manual/payments?ref=out-of-the-sandbox). **Only payment options accepted through** **Shopify Payments** will automatically display their icons when enabled. [Read How to Show Payment icons on the Footer](/minimog-theme/faqs/generic/show-payment-icons-on-the-footer.md) {% endhint %} #### Footer bottom

Select the **Color scheme** for the footer bottom area. Choose a **Menu** to display at the bottom of the footer.

Enable **Show menu item divider** to display separators between footer menu items.

### Block settings The Footer section supports the following block types (You can add up to 5 blocks): * [Menu](#menu) * [Newsletter](#newsletter) * [Spacing](#spacing) * [About](#about) * [Custom content](#custom-content) * [Custom HTML](#custom-html) You can combine multiple block types to build a flexible footer layout.

#### Common block settings The following settings are available for most Footer blocks. **Container width**

Adjust the width occupied by the block within the footer layout. This helps balance spacing and alignment between footer columns. **Mobile settings**

* **Order first**: Display the block before other footer blocks on mobile devices. * **Enable accordion**: Collapse the block into an accordion on mobile devices to save space and improve usability. * **Open by default**: Keep the accordion expanded when the page loads. #### Menu The Menu block displays navigation links inside the footer.

{% hint style="info" %} * Display the existing menu you created in **Shopify admin** > **Content** > **Menus.** To create menus, see [Menu](https://docs.minimog.co/getting-started/mega-menu#create-menu). * Only the **1st-level** menu items are displayed. {% endhint %} Select the **Footer menu** you want to display.

Enter a custom **Heading** or leave it blank to automatically use the selected menu title. Choose the **Heading size**: * Heading xs * Heading sm * Heading md * Heading lg * Heading xl * Heading 2xl Choose the **Heading font**: * Heading font * Body font Select the **Heading font weight**.

#### About The About block helps customers learn more about your business.

**Content settings** Enter a **Title** for the block. Choose the **Heading size**: * Heading xs * Heading sm * Heading md * Heading lg * Heading xl * Heading 2xl Choose the **Heading font**: * Heading font * Body font Select the **Heading font weight**.

Add content using the **Description** rich text editor. This area can be used to describe your business, share your story, or provide helpful information for customers. Choose the description **Text size**: * Small * Base size * Large * Extra large * Default

**Contact information** Enable or disable the following options: * **Show email**: Display your store email address. * **Show phone number**: Display your store phone number. * **Show social icons**: Display social media icons configured in your store contact settings.

This makes it easy for customers to connect with your brand across different platforms. {% hint style="info" %} To add or update store contact information, go to **Theme settings** > [Store contact](/minimog-theme/theme-settings/store-contact.md). {% endhint %} #### Newsletter The Newsletter block helps you collect email subscribers directly from the footer, making it easier to grow your audience and stay connected with customers.

Enter a **Title** and optional **Description** to encourage visitors to subscribe. Choose the **Heading size**: * Heading xs * Heading sm * Heading md * Heading lg * Heading xl * Heading 2xl Choose the **Heading font**: * Heading font * Body font Select the **Heading font weight**. Customize the **Email placeholder** text displayed inside the email input field.

Enable **Show icon input** to display an email icon inside the input field.

Customize the **Button label**. Leave the button label blank to display an icon-only submit button.

{% tabs %} {% tab title="Button with label" %}

{% endtab %} {% tab title="Button without label" %}

{% endtab %} {% endtabs %} **Button position**: Choose where the subscribe button appears: * Same line input field * Under input field

{% tabs %} {% tab title="Same line input field" %}

{% endtab %} {% tab title="Under input field" %}

{% endtab %} {% endtabs %} {% hint style="info" %} Button position option only works with bordered form style. {% endhint %} Choose the **Button style** of the subscribe button: * Primary button * Secondary button * Plain button

**Form style**: Choose the newsletter form appearance: * Bordered * Minimal

{% tabs %} {% tab title="Bordered style" %}

{% endtab %} {% tab title="Minimal style" %}

{% endtab %} {% endtabs %} **Show social link**: Enable this option to display your store's social media icons below the newsletter form.

{% hint style="info" %} Social media links are managed in: **Theme settings** > [Store contact](/minimog-theme/theme-settings/store-contact.md). {% endhint %} **Show "Terms & conditions" checkbox**: Enable this option to require customers to accept your terms and conditions before subscribing.

{% hint style="info" %} "Terms & conditions" checkbox are managed in: **Theme settings** > [GDPR settings](/minimog-theme/theme-settings/gdpr-settings.md). {% endhint %} #### Custom content The Custom content block allows you to display additional content alongside other footer blocks.

**Image settings** Upload an **Image** for the content block. Adjust the **Image max-width (px)** to control the display size of the image.

**Content settings** Enter a **Title**. Choose the **Heading size**: * Heading xs * Heading sm * Heading md * Heading lg * Heading xl * Heading 2xl Choose the **Heading font**: * Heading font * Body font Select the **Heading font weight**.

Add **Content** using the rich text editor and choose the suitable **Text size**: * Small * Base size * Large * Extra large * Default

#### Spacing The Spacing block adds empty space between footer columns.

**Container width**: Adjust the amount of spacing added between neighboring blocks. Larger values create wider gaps between footer columns and help distribute content more evenly across the footer. #### Custom HTML The Custom HTML block allows you to add custom code and third-party integrations directly inside the footer. Enter a **Title**. Choose the **Heading size**: * Heading xs * Heading sm * Heading md * Heading lg * Heading xl * Heading 2xl Choose the **Heading font**: * Heading font * Body font Select the **Heading font weight**.

Add your custom code inside the **HTML** field.

{% hint style="info" %} Liquid code is supported. {% endhint %}