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

# Footer

The **Footer** is the block of content at the bottom of every page of your store. It brings together secondary navigation, contact details, a newsletter signup, social links, payment icons, and your policy links, so shoppers who scroll to the end of a page always find a next step instead of a dead end. It is also where hesitant shoppers look for the shipping, returns, and contact information that decides whether they buy.

Because this is a global section, everything below applies store-wide. The section settings control the frame (width, colors, selectors, payment icons, bottom bar) and the blocks fill the columns above it.

<figure><img src="/files/upkpNEa8H6v75aq0l6OB" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

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

1. Go to **Online Store > Themes > Customize**.
2. Scroll the left sidebar to the **Footer** group and click **Footer**.
3. Set the section settings first (width, color scheme, selectors, payment icons, bottom menu).
4. Then add or edit the blocks: **Contact bar**, **Menu**, and **Newsletter**.
   {% endhint %}

*Result:* the preview scrolls to the bottom of the page and updates as you edit.

## Section settings <a href="#section-settings" id="section-settings"></a>

### General <a href="#general" id="general"></a>

<figure><img src="/files/v8lBRSUHGIybYApjsUkj" alt=""><figcaption></figcaption></figure>

| Setting                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width**      | <p>How far the footer content stretches across the screen.</p><ul><li><strong>Stretch width</strong>: the columns run close to the screen edges whatever the display size.</li><li><strong>Fixed width</strong>: the columns line up with the rest of your page, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the footer fills the whole screen and rescales itself to fit it.</li></ul> |
| **Color scheme**       | The background and text colors of the whole footer, taken from **Theme settings > Colors**. A darker scheme is the usual way to mark where the page content ends.                                                                                                                                                                                                                                                                                 |
| **Enable back to top** | Adds a button that returns shoppers to the top of the page in one click, saving a long scroll back up collection and blog pages.                                                                                                                                                                                                                                                                                                                  |

### Country/language selector <a href="#country-language-selector" id="country-language-selector"></a>

<figure><img src="/files/MQg768d62zwBiPBBpZvZ" alt=""><figcaption></figcaption></figure>

To add a country or region, go to your market settings in the Shopify admin. To add a language, go to your language settings.

| Setting                            | Description                                                                                                                             |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| **Enable country/region selector** | Lets shoppers choose the country or region they are shopping from. Nothing is shown until you have added markets in your Shopify admin. |
| **Enable language selector**       | Lets shoppers read your store in another language. Nothing is shown until you publish a second language in your Shopify admin.          |

### Follow on Shop <a href="#follow-on-shop" id="follow-on-shop"></a>

<figure><img src="/files/GZeNdG28csZpy3ToIrHC" alt=""><figcaption></figcaption></figure>

To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)

| Setting                   | Description                                                                                                                                             |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Enable Follow on Shop** | Adds a button shoppers use to follow your store in the Shop app, so your new products can reach them after they leave. Requires Shop Pay to be enabled. |

### Payment methods <a href="#payment-methods" id="payment-methods"></a>

<figure><img src="/files/kTIdKytpRxo2yrCGHFgZ" alt=""><figcaption></figcaption></figure>

| Setting                | Description                                                                                                                                       |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show payment icons** | Shows the logos of the payment methods your store takes, so a hesitant shopper can see their card or wallet is accepted before reaching checkout. |

### Footer Bottom <a href="#footer-bottom" id="footer-bottom"></a>

<figure><img src="/files/om8jukSznRFIZlR0Iq1k" alt=""><figcaption></figcaption></figure>

| Setting          | Description                                                                                                                                                     |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Menu**         | The row of links on the very last line of the page, under the footer columns. Most stores keep a short menu here, such as About and Contact.                    |
| **Policy links** | Shows your store policies (Privacy Policy, Terms of Service, Refund policy) on that last line. The wording comes from the policies saved in your Shopify admin. |

### Section padding <a href="#section-padding" id="section-padding"></a>

<figure><img src="/files/sLTseIglKlbctHiBkWQb" alt=""><figcaption></figcaption></figure>

| Setting    | Description                                                                                                      |
| ---------- | ---------------------------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the footer content. Increase it when the footer starts too close to the end of the page.        |
| **Bottom** | Adds space below the footer content. Increase it when the last line sits tight against the bottom of the screen. |

## Block settings <a href="#block-settings" id="block-settings"></a>

### General settings <a href="#block-general-settings" id="block-general-settings"></a>

<figure><img src="/files/TqRrymTeG7EjOVf5owhT" alt=""><figcaption></figcaption></figure>

| Setting   | Description                                                                                                                                                                                                                                                                               |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Width** | <p>How much of the footer row this block occupies. Small values let more columns sit side by side, larger ones give a block such as the newsletter enough room for its form.</p><ul><li>16%</li><li>20%</li><li>25%</li><li>33%</li><li>50%</li><li>66%</li><li>75%</li><li>86%</li></ul> |

### Contact bar <a href="#contact-bar" id="contact-bar"></a>

<figure><img src="/files/oG1Gp6MWdEIFLcH6JhBZ" alt=""><figcaption></figcaption></figure>

| Setting                     | Description                                                                                                                               |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| **Logo**                    | Your store mark at the top of the contact column, so the bottom of the page still looks branded instead of being a plain list of details. |
| **Logo width**              | How large that mark appears. Keep it modest so it does not compete with the logo in the header.                                           |
| **Address**                 | Your street address, which cautious shoppers look for as proof there is a real business behind the store.                                 |
| **Phone**                   | The number shoppers can call before or after ordering. Leave it empty if you do not take calls.                                           |
| **Email**                   | The address shoppers write to with order questions. Use one you actually read, because this is where enquiries from the footer land.      |
| **Show social media icons** | Turns your social accounts into a row of icons. Only the accounts you filled in under **Theme settings > Social media** appear.           |
| **Description**             | A short paragraph in the contact column, normally one or two lines on what your store sells or stands for.                                |

### Menu <a href="#menu" id="menu"></a>

<figure><img src="/files/zMJ5MwXJjSyMfnHOUKvj" alt=""><figcaption></figcaption></figure>

| Setting     | Description                                                                                                                       |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Heading** | The title above this column of links, telling shoppers what the group covers, for example *Customer care* or *About us*.          |
| **Menu**    | Which Shopify menu fills this column. Build the menu in your Shopify admin first, and add one block per column of links you want. |

### Newsletter <a href="#newsletter" id="newsletter"></a>

Subscribers are added automatically to your "accepted marketing" customer list. [Learn more](https://help.shopify.com/manual/customers/manage-customers)

<figure><img src="/files/Hr4RaxDC52uAA8yR94X6" alt=""><figcaption></figcaption></figure>

| Setting               | Description                                                                                                              |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| **Heading**           | The line that invites visitors to sign up, for example *Get 10% off your first order*.                                   |
| **Description**       | A sentence under that line saying what subscribers actually receive, such as new arrivals or early access to sales.      |
| **Email placeholder** | The greyed out example inside the email box before anyone types, for example *Enter your email*.                         |
| **Button label**      | The words on the submit button. Leave it empty and the button disappears, which leaves visitors no way to send the form. |
| **Note**              | Small print under the form, normally the consent or privacy wording you have to show before collecting an email address. |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* The footer renders at the bottom of every page, so any menu, policy link, or contact detail you add here is available store-wide.
* The country and language selectors only have something to show once **Markets** and additional published languages exist in your Shopify admin.
* The newsletter block is the permanent signup point for visitors who dismissed the [Newsletter popup](/velare/customize-your-pages/overlay-group/newsletter-popup.md).

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Footer group](/velare/set-up-your-store/footer-group.md): the group this section belongs to
* [Header](/velare/set-up-your-store/header-group/header.md): the country and language selectors also available at the top of the page
* [Colors](/velare/set-up-your-store/colors.md), [Layout](/velare/set-up-your-store/layout.md), [Social media](/velare/set-up-your-store/social-media.md): the theme settings this section pulls from
* [Newsletter popup](/velare/customize-your-pages/overlay-group/newsletter-popup.md): the popup version of the signup form


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/set-up-your-store/footer-group/footer.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
