> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/footer.md).

# Footer

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The **Footer** section appears at the bottom of every page and provides customers with quick access to important store information, navigation menus, newsletter signup, social media links, payment methods, policies, and branding.

The footer helps improve navigation, build customer trust, and encourage newsletter subscriptions while maintaining a professional appearance across your storefront.

#### When to Use

Use the Footer section to:

* Display contact information.
* Organize important navigation links.
* Showcase your store logo and branding.
* Collect email subscribers.
* Display social media accounts.
* Show payment method icons.
* Enable language and country selectors.
* Display legal policy links.
* Add a branded scrolling marquee.

{% hint style="info" %}
**Recommendation Size**\
Footer background image size: 1920x434
{% endhint %}

## How to Customize the Footer

{% hint style="success" %}
**Steps:**

1. From your Shopify Admin, go to **Online Store → Themes**.
2. Click **Customize** on your published theme.
3. Scroll to the **Footer** section.
4. Configure the section settings.
5. Add, remove, or reorder footer blocks.
6. Click **Save**.
   {% endhint %}

<table><thead><tr><th width="239">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable back to top button</td><td><p>Displays a floating button that allows customers to quickly scroll back to the top of the page. </p><p></p><p>For visual guide show <a href="#enable-back-to-top-button"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Enable footer top border</td><td><p>Enable this settings to add a horizontal border line at the top of the footer section. </p><p></p><p>For visual guide show <a href="#enable-footer-top-border"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Background image</td><td><p>Upload a background image for the footer.</p><p></p><p>This can be used to create a more visually engaging footer. </p><p></p><p>For visual guide show <a href="#background-image"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Color scheme</td><td><p>Choose the overall color scheme used throughout the footer.</p><p>You can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Logo</td><td><p><strong>Logo image</strong> </p><p>Upload your brand logo to display in the footer area.  </p><p></p><p><strong>Logo image width</strong> </p><p>Adjust the width (in pixels) of the logo displayed on desktop devices. </p><p></p><p><strong>Enable logo background</strong> </p><p>Displays a background behind the footer logo. </p><p></p><p>For visual guide show <a href="#logo-image"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Email Signup</td><td><p><strong>Show email signup</strong><br>Displays the newsletter subscription form.</p><p></p><p>Subscribers are automatically added to your Shopify <strong>Accepted Marketing</strong> customer list.</p><p></p><p>For visual guide show <a href="#show-email-signup"><mark style="color:$primary;">screenshot</mark></a><br><br><strong>Heading</strong><br>Enter the heading text that appears above the email signup form. </p><p>Example:</p><blockquote><p>Get 15% Off Your First Order</p></blockquote><p>For visual guide show <a href="#email-signup-heading"><mark style="color:$primary;">screenshot</mark></a><br><br><strong>Description</strong><br>Enter a description or subheading that appears below the heading in the signup form. </p><p>Example:</p><blockquote><p>Be the first to know about new collections, exclusive offers, and events.</p></blockquote><p>For visual guide show <a href="#email-signup-description"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Follow on Shop</td><td><p><strong>Enable follow on shop</strong><br>Use Shopify app.  </p><p></p><p>Displays the <strong>Follow on Shop</strong> button.</p><p></p><p>Customers can follow your store directly from the Shop App.</p><blockquote><p>This option is available only when your Shopify store is connected to Shop.</p></blockquote></td></tr><tr><td>Country/region selector</td><td><p><strong>Enable country/region selector</strong><br>By enabling this checkbox, you can see country/region selector in the footer section. </p><p>Displays a selector allowing customers to switch between available markets.</p><blockquote><p>Markets must be configured in Shopify Markets.</p></blockquote><p>For visual guide show <a href="#country-region-selector"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Language selector</td><td><p><strong>Enable language selector</strong><br>By enabling this checkbox, you can see Language selector in the footer section. </p><p>Displays a language selector for multilingual stores.</p><blockquote><p>Languages must be configured in Shopify Languages.</p></blockquote><p>For visual guide show <a href="#language-selector"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Payment methods</td><td><p><strong>Show payment icons</strong><br>By enabling this checkbox, you can see payment icons in the footer section. </p><p></p><p><strong>Examples include:</strong></p><ul><li>Visa</li><li>Mastercard</li><li>American Express </li></ul><p>Icons are automatically based on your enabled Shopify payment methods. </p><p></p><p>For visual guide show <a href="#payment-methods"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Policy links</td><td><p><strong>Show policy links</strong><br>By enabling this checkbox, you can see policy links in the footer section. </p><p></p><p><strong>Examples:</strong></p><ul><li>Privacy Policy</li><li>Refund Policy</li><li>Shipping Policy</li><li>Terms of Service</li></ul><p></p><p>Policies are managed from <strong>Settings → Policies</strong>. </p><p></p><p>For visual guide show <a href="#policy-links"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Marquee</td><td><p><strong>Enable scrolling textbox</strong><br>Displays a continuously scrolling text banner.</p><p>This is commonly used for branding or promotional messaging.<br><br><strong>Heading</strong><br>Enter the scrolling text to display in the Footer.</p><p></p><p>Example:</p><blockquote><p>FLUTE</p></blockquote><p></p><p><strong>Font</strong><br>Select the font for the scrolling text. Changing the font may affect store performance.</p><p></p><p>For visual guide show <a href="#marquee"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Enable marquee position bottom</strong> </p><p>Enable this checkbox to show marquee position in bottom of the footer section.</p><p>For visual guide show <a href="#enable-marquee-position-bottom"><mark style="color:$primary;">screenshot</mark></a><br></p><p><strong>Enable marquee glass effect</strong> </p><p>Enable this to apply glass effect on footer scrolling bar. </p><p>For visual guide show <a href="#enable-marquee-glass-effect"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Color Scheme</strong></p><p>Select the color scheme used for the marquee.</p><p>You can change the background and foreground color of a marquee using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul><p>For visual guide show <a href="#marquee-color-scheme"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Outer space</td><td><strong>Top margin</strong><br>You can adjust the range of the Top margin to increase or decrease the Top spacing as needed.</td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FY64QFL5hdhx8EyFJF5FT%2Ffooter.png?alt=media&amp;token=f5be75d7-9ad8-44a2-81d0-d371d1cf98f9" alt=""><figcaption></figcaption></figure></div>

## Section Settings Screenshot

#### Enable back to top button

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FUnQP0lT1qqVuCRhjqIG2%2FEnable%20back%20to%20top%20button.png?alt=media&amp;token=c6631034-0213-47d4-b1c4-f5e192de39b4" alt=""><figcaption><p><strong>Enable back to top button</strong></p></figcaption></figure></div>

#### Enable footer top border

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FJhR0MvnaG2kVCsBc5tCj%2FEnable%20footer%20top%20border.png?alt=media&amp;token=a2d494f4-2338-4898-87c7-14864e72d79f" alt=""><figcaption><p><strong>Enable footer top border</strong></p></figcaption></figure></div>

#### Background image

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FZ6FB77GwWO18lmo96fIS%2FBackground%20image.png?alt=media&amp;token=8df1c1ea-55b1-469b-9561-cdbe83e6bc87" alt=""><figcaption><p><strong>Background image</strong></p></figcaption></figure></div>

#### Logo image

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2Fcij9gQVSpSpd0qqGQzd8%2FLogo%20image.png?alt=media&amp;token=a980b447-30b8-4447-9337-72504eb8a3f4" alt=""><figcaption><p><strong>Logo image</strong></p></figcaption></figure></div>

#### Show email signup

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FNSua9oGi2dSLI5QMVS2f%2Fimage.png?alt=media&amp;token=9acf60ac-f900-45bf-8eb7-5f0b118442b2" alt=""><figcaption><p><strong>Show email signup</strong></p></figcaption></figure></div>

#### Email signup heading

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FFAqisQ0Fo4d6VtSSst1a%2FShow%20email%20signup%20heading.png?alt=media&amp;token=0b0e7d35-54f4-475c-b7c6-7bba9a8f91d5" alt=""><figcaption><p><strong>Email signup heading</strong></p></figcaption></figure></div>

#### Email signup description

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FJTUTAAycJ4ZSDALgjdn4%2FShow%20email%20signup%20description.png?alt=media&amp;token=e943b577-cc2e-4ab3-92f2-3f9edb28794c" alt=""><figcaption><p><strong>Email signup description</strong></p></figcaption></figure></div>

#### Country/region selector

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2F8K4DxXWlJnEchQdysoeX%2FCountry%20selector.png?alt=media&amp;token=226270b3-fb9a-470f-b956-e51cd5c6721d" alt=""><figcaption><p><strong>Country/region selector</strong></p></figcaption></figure></div>

#### Language selector

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FKValvVQO0rkqj0LJedxI%2FLanguage%20selector.png?alt=media&amp;token=36fcb86b-21ed-4c32-a055-a19c9f92a1dc" alt=""><figcaption><p><strong>Enable language selector</strong></p></figcaption></figure></div>

#### Payment methods

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FTWPk6S67durE0ramqoMO%2Fpayment%20method.png?alt=media&amp;token=5c8b8bf7-8f04-4810-bac2-8f8269101774" alt=""><figcaption><p><strong>Show payment icons</strong></p></figcaption></figure></div>

#### Policy links

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2Fwi2KOnrSvcmxj4eC4BtU%2FPolicy%20links.png?alt=media&amp;token=fb5487e4-bc81-4570-ba63-157f396414ba" alt=""><figcaption><p><strong>Show policy links</strong></p></figcaption></figure></div>

#### Marquee

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FbRiwt7v3lZ3ZuapJQrnB%2Fmarquee.png?alt=media&amp;token=aa153798-5ca4-4f95-a5d0-b060c3782715" alt=""><figcaption><p><strong>Marquee</strong></p></figcaption></figure></div>

#### Enable marquee position bottom

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FNWmF3QkrvsikXqTBrkyz%2FEnable%20marquee%20position%20bottom%20-%20enabled.png?alt=media&amp;token=8a3d97ed-57ee-4a03-a240-3d50efa81533" alt=""><figcaption><p><strong>Enable marquee position bottom — Enabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FSIjUoHkdkgLBiuQIfm6I%2FEnable%20marquee%20position%20bottom%20-%20disabled.png?alt=media&amp;token=65291c5a-deda-400e-b0b6-936cc763f4aa" alt=""><figcaption><p><strong>Enable marquee position bottom — Disabled</strong></p></figcaption></figure></div>

#### Enable marquee glass effect

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FrhWFLjAReY67ZobhPOtJ%2FEnable%20marquee%20glass%20effect%20-%20Enabled.png?alt=media&amp;token=62af0efa-6e07-4a01-ac75-95715463123e" alt=""><figcaption><p><strong>Enable marquee glass effect — Enabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2F7cht1evdeXTN8quKvwnu%2FEnable%20marquee%20glass%20effect%20-%20disabled.png?alt=media&amp;token=3b922e86-2872-4d78-8a3e-4fefaa9218e4" alt=""><figcaption><p><strong>Enable marquee glass effect — Disabled</strong></p></figcaption></figure></div>

#### Marquee color scheme

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2F5gr2P0dxp0zYq4QmLdbL%2FMarquee%20color%20scheme.png?alt=media&amp;token=a30b5cd8-db84-466d-b552-147d518bd33b" alt=""><figcaption><p><strong>Marquee color scheme</strong></p></figcaption></figure></div>

## Add block

Footer blocks allow you to build a flexible footer layout by combining contact information, navigation menus, images, and custom text. Blocks can be added, removed, or reordered to match your store's branding and content requirements.

To add block to the Footer section, click on the 'Add block'. There are many options available , as you can see in the below points and screenshot.

#### Brand information

Display your store's contact details, business information, and social media accounts.

<table><thead><tr><th width="220">Block</th><th>Description</th></tr></thead><tbody><tr><td>Show social media icons</td><td><p>Toggle this option to display your store’s <strong>social media icons</strong>. </p><p></p><p>Social media accounts must be configured in <strong>Theme Settings → Social Media</strong> before icons will appear.</p></td></tr><tr><td>Heading</td><td><p>Add a title for the brand information block.</p><p><strong>Example</strong>:</p><blockquote><p>Contact Us</p></blockquote></td></tr><tr><td>Email</td><td><p>Enter your business email address.</p><p><strong>Example</strong>:</p><blockquote><p>Email: support@example.com</p></blockquote></td></tr><tr><td>Phone</td><td><p>Enter your business phone number.</p><p><strong>Example</strong>:</p><blockquote><p>Phone: +1 (555) 123-4567</p></blockquote><p>You can format it for better readability and make it clickable using a <code>tel:</code> link.</p></td></tr><tr><td>Description</td><td><p>Add additional business information such as working hours, address, or short messages. </p><p></p><p><strong>Example:</strong></p><blockquote><p>Monday – Friday: 9:00 AM – 6:00 PM</p></blockquote></td></tr><tr><td>Image</td><td><p>Upload an optional image to display within the block.</p><p></p><p>You can use this for:</p><ul><li>Brand illustration</li><li>Promotional graphic</li></ul></td></tr><tr><td>Image width</td><td>Adjust the width of the image in pixels (px).</td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FJZTyLrD2118npehCR3K9%2FBrand%20info.png?alt=media&amp;token=6036c5ef-bb78-44a1-8bc7-a09786503fac" alt=""><figcaption><p><strong>Brand information</strong></p></figcaption></figure></div>

#### Menu

Display a Shopify navigation menu inside the footer.

You can add multiple Menu blocks to organize different groups of links.

<table><thead><tr><th width="220">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td><p>Enter the menu title. </p><p></p><p><strong>Examples:</strong></p><ul><li>Quick Links</li><li>Customer Service</li></ul></td></tr><tr><td>Menu</td><td><p>Select one of your Shopify navigation menus.</p><p></p><p>Only top-level menu items are displayed.</p></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FCp1U9wzMqS27cEancmEd%2FMenu.png?alt=media&amp;token=c62162de-f958-4097-9c5e-c1f7b1f6828c" alt=""><figcaption><p><strong>Menu</strong></p></figcaption></figure></div>

#### Image

Display an image inside the footer.

Ideal for:

* Promotional banners
* Lifestyle photography
* Brand visuals

<table><thead><tr><th width="295">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Upload the image to display.</td></tr><tr><td>Image width</td><td><p>Adjust the displayed width of the image.</p><p>You can give the minimum width "50px" and maximum width "550px" of the image.</p></td></tr><tr><td>Image alignment on large screen</td><td><p>Choose the image position on desktop devices.</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2F5Arl2w2TagxxZc85MQZn%2Fimage.png?alt=media&amp;token=86943fa9-ffe0-4142-87d5-6d397e8808f1" alt=""><figcaption><p><strong>Image</strong></p></figcaption></figure></div>

#### Text

Display custom text content anywhere within the footer.

This block is useful for highlighting important information or adding branded messaging.

<table><thead><tr><th width="218">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td><p>Enter the title.</p><p></p><p><strong>Example</strong>:</p><blockquote><p>About Our Store</p></blockquote></td></tr><tr><td>Subtext</td><td><p>Add descriptive content below the heading.</p><p></p><p><strong>Examples include:</strong></p><ul><li>Store introduction</li><li>Brand story</li><li><p>Shipping information </p><p></p></li></ul><p><strong>Example</strong>:</p><blockquote><p>Share contact information, store details, and brand content with your customers.</p></blockquote></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FGGurHAely0JiLd6FDN0v%2FText.png?alt=media&amp;token=52af7831-e24e-4be1-822f-86fa2a8c7e1b" alt=""><figcaption><p><strong>Text</strong></p></figcaption></figure></div>

## Managing Footer Blocks

Footer blocks can be fully customized.

You can:

* Add multiple Menu blocks.
* Add multiple Text blocks.
* Combine images and contact information.
* Remove unnecessary blocks.
* Reorder blocks using drag-and-drop.
* Create different footer layouts for your storefront.

## Best Practices

* Keep footer navigation organized into logical categories.
* Use concise headings for easier navigation.
* Display accurate contact information.
* Enable social media icons only if accounts are active.
* Use optimized images for faster loading.
* Avoid adding excessive text to maintain a clean footer.
* Keep important customer support information easy to find.
* Arrange blocks in a balanced layout for desktop and mobile devices.

## Click "Add Section" and use some sections.&#x20;

We are providing one special feature, You can add multiple additional sections in the footer.

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2Fv0rY3yXjGpogwfrrJmnC%2Fimage.png?alt=media&amp;token=ca41d46d-7d7b-4f41-8765-df37626ff83b" alt=""><figcaption></figcaption></figure>