Footer

Footer on Gloss demo store, featuring two rows of blocks
  • 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 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.

Can't find the setting you're looking for? The following settings are explained in detail in common settings.

  • Color scheme/color scheme transition

  • Padding

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)

Quickly display the logo you've uploaded to your theme settings.

  • Block size: See explanation above

  • Use alternate logo version: Check this option if you've uploaded an alternate logo 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

  • 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"

  • Block size: See explanation above

  • 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

  • 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, 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.

Rich text

  • Block size: See explanation above

  • 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, 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.

  • Block size: See explanation above

  • 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.

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

Last updated

Was this helpful?