# Footer

Footer on Gloss demo store, featuring two rows of blocks

{% hint style="success" %} **Quick start** * Click into each of the preloaded blocks and edit the content * If you don't need a block, remove it or replace it with other content such as an image {% endhint %} * **Horizontal alignment:** Determines horizontal alignment of all footer blocks. Choose between left, center or right. * **Vertical grid gap**: When blocks fill out all columns, they wrap to the next row. This setting determines the vertical gap between rows. * **Horizontal grid gap:** Determines the gap between columns. Large by default. Available in version 1.1.0 and later * **Menu**: The next two settings apply to all blocks of "Menu" and "Social links". This allows you to quickly set styling across all applicable blocks for visual consistency. * **Font style**: Choose between all available font styles, from headings to extra small body * **Link hover style**: Choose between underline or line. If you have [vertical desktop header](/sections/header.md) enabled, which uses the line style, you might want to echo that in your footer. * **Show borders**: Enable this setting to display a border at the top of the footer. {% hint style="info" %} Can't find the setting you're looking for? The following settings are explained in detail in [common settings](/common-settings.md). * Color scheme/color scheme transition * Padding {% endhint %} ### Blocks #### A quick introduction to block size For each block, you can choose the block size (**small**, **large** or **full width**). Here is how these sizes behave by screen size:

Diagram showing how Primavera footer block sizes behave at different screen sizes

* **Small**: 1 of 6 columns (Desktop), 1 of 4 columns (Tablet) and 1 of 2 columns (Mobile) * **Medium**: 2 of 6 columns (Desktop), 4 of 4 columns (Tablet) and 2 of 2 columns (Mobile) * **Full width**: 6 of 6 columns (Desktop), 4 of 4 columns (Tablet) and 2 of 2 columns (Mobile) #### Logo Quickly display the logo you've uploaded to your [theme settings](/theme-settings/logo.md). * **Block size:** See explanation [above](#block-size) * **Use alternate logo version:** Check this option if you've uploaded an [alternate logo](/theme-settings/logo.md) in theme settings (e.g. a white logo for dark sections) and you want to use it here instead of the regular logo * **Max width**: Use the logo width defined in theme settings (quick and consistent) or make the logo take up the full width of the chosen block size * **Link**: Choose a link the logo should go to when clicked, e.g. homepage * **Link label**: For accessibility, provide a description of the link, e.g. "Homepage" * **Text**: Optional text that appears below the logo * **Font style:** Choose a font style for the text setting above #### Image * **Block size:** See explanation [above](#block-size) * **Image**: Upload or select an image * **Image maximum width:** Bear in mind this will be limited by the selected block size. This setting is a good way of creating space between your image and the next column if the grid is especially tight. * **Link**: Choose a link the image should go to when clicked, e.g. homepage * **Link label**: For accessibility, provide a description of the link, e.g. "Homepage" #### Menu * **Block size:** See explanation [above](#block-size) * **Heading**: Optional heading that appears above the menu * **Menu**: Select which menu should appear here * **Collapse on mobile**: When checked, the menu will be nested in a full-width collapsible on small screens, regardless of the selected block size Available in version 1.2.0 and later #### Newsletter When customers enter their email here, a customer record is created with the "Email subscribed" attribute. The customer record will also be tagged with "newsletter". * **Block size:** See explanation [above](#block-size) * **Heading** * **Heading font** * **Text**: Optional text to describe to describe what customers can expect when they subscribe. * **Button style**: Primary or secondary * **Button width**: Default (width of button label) or full to stretch the width of the block * **Show social media icons**: If checked and you've added [social media links to theme settings](/theme-settings/social-media.md), icons will display below the newsletter form * **Enable Follow on Shop**: 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). #### Rich text * **Block size:** See explanation [above](#block-size) * **Text content:** Subheading, Heading, Heading size, Text * **Button**: Style, button label and button link * **Show social media icons**: If checked and you've added [social media links to theme settings](/theme-settings/social-media.md), icons will display below the newsletter form * **Enable Follow on Shop**: 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). #### Social links * **Block size:** See explanation [above](#block-size) * **Heading**: Optional heading that appears above the links * **Layout**: Choose between a list of social links (similar to a menu) or icons * **Enable Follow on Shop**: 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). #### Spacer Spacers are useful for controlling spacing on desktop. They are hidden on tablet and mobile.

A spacer is used in the Primavera Precision demo store footer to create some space between the menus and the newsletter form

Two spacers are used in the Primavera Gloss footer to create this multirow footer

--- # Agent Instructions: 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: ``` GET https://docs.ultramarinastudios.com/sections/footer.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.