Footer - Article

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on section padding settings
3. Company XYZ documentation on section backgrounds settings
4. Company XYZ documentation on separators settings
5. Company XYZ documentation on visibility settings
6. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to add a simple closing area below a blog post with the details readers often look for after finishing the article. For a broader overview of how theme sections work, see Shopify documentation on sections and blocks. It is best used to reinforce context and light utility actions without pulling attention away from the content itself.

Core settings

The main settings control which post details and actions appear in the footer. A lighter setup usually works best, so include only the information that helps readers understand the article or continue engaging with it.

Showing the author can add credibility and a more editorial feel, especially for multi-author blogs. Showing the date is most useful for timely content, while tags work best when your blog uses a clear, consistent tagging structure.

Share and print are optional utility actions. Turn them on when they match how your audience uses your content, and leave them off when you want a cleaner, less action-heavy footer.

Tip

If most of your content is evergreen, consider whether showing the publish date helps readers or makes older posts feel unnecessarily dated.

Color settings

These settings let you override the default text and icon colors just for this footer. They are most useful when the footer sits on a custom background or when you want the metadata to feel more subdued than the main article text.

Aim for clear contrast between the text, icons, and any background treatment. Subtle color changes usually feel more polished here than strong accent colors.

If you customize both the footer background and the text or icon colors, check readability on desktop and mobile before publishing.

Standard section settings

Padding settings

Padding settings control the space above and below the footer content. Use them to keep the footer visually connected to the article, or increase spacing if you want it to feel like a more distinct closing area.

Tighter spacing suits minimal article layouts. More generous spacing works better when you add separators or a background treatment.

Section background settings

Section background settings let you add a color, gradient, image, or video behind the footer. This can help separate the post metadata from the article body or create a stronger end-of-article visual break.

If you use background media, overlay settings help preserve text legibility. Gradient settings override flat color choices, so use one deliberate layer instead of stacking multiple competing effects.

Caution

Bold images or video can overpower a small metadata area. In most cases, subtle backgrounds are easier to read and easier to integrate with article content.

Separator settings

Separator settings add a line at the top or bottom of the footer. This is a simple way to define the section without adding heavy styling.

A top separator is often enough to mark the transition from article content into the footer. If the separator color is left transparent, the section uses the theme border color instead.

Visibility settings

Visibility settings control whether the footer appears on desktop, mobile, or both. This is helpful when you want a more compact mobile article layout or different reading flow across devices.

Before hiding the section on any device, make sure readers are not losing helpful context such as tags or share actions where they are most likely to use them.

Width settings

Width settings control the maximum width of the footer content and the width of the section wrapper. Use them to keep the footer aligned with the article column or to let background styling extend wider than the content itself.

Content width is the main readability control, while section width matters most when you use a background. Width changes can look different in the editor than on the live page, so preview the final layout before you commit.

Usage notes

1. Keep the footer focused. Show only the metadata and actions that add real value after the article ends.
2. Use tags deliberately. Enable tags when they help readers discover related content, not just because tags exist on the post.
3. Favor subtle styling. Light separators, restrained colors, and modest spacing usually suit article footers better than bold visual treatments.
4. Protect readability. Check contrast and overlay settings carefully when using custom backgrounds, especially on smaller screens.
5. Review both viewports. Desktop and mobile controls can produce different alignment, visibility, and media behavior, so preview the footer on both sizes.
6. Watch content sources. If the footer depends on article data or related-content results, make sure the selected content is available and displays cleanly when results are limited.