Related posts

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on slideshow controls settings
3. Company XYZ documentation on headers settings
4. Company XYZ documentation on cards settings
5. Company XYZ documentation on section padding settings
6. Company XYZ documentation on section backgrounds settings
7. Company XYZ documentation on separators settings
8. Company XYZ documentation on visibility settings
9. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Show more articles from the same blog at the end of a post to keep readers reading. This section automatically pulls recent posts from the current article’s blog, so it is best when you want related content without manually curating each item. For a broader overview of how these section settings work in the theme editor, see Shopify documentation on sections and blocks

Note

If you need to choose specific articles instead of showing recent ones automatically, use a Blog posts section instead.

Core settings

The main content control is the number of items to show. Use a smaller count when you want a tidy article ending, or increase it when your blog has strong supporting content and you want to encourage deeper browsing.

Setting the count to 0 shows all available items up to the section limit. That can work well for smaller blogs, but on larger blogs it can make the section feel long and reduce the impact of each card.

Layout settings

Use these settings to control how many related posts appear per row and whether each device uses a grid or slideshow. This is the main place to shape how easy the section feels to scan on desktop, tablet, and mobile.

Higher column counts can fit more posts on screen, but they usually work best when cards are visually simple. If your article titles or excerpts run long, fewer columns usually create a cleaner, more readable layout.

Tablet can inherit the desktop column count when left at 0. That is useful when you want fewer device-specific adjustments, but it is still worth checking medium screen sizes if your cards carry a lot of text.

Tip

For text-heavy article cards, fewer columns usually improve readability and make headlines easier to scan.

Slideshow settings

When any device is set to slideshow, these controls manage animation, autoplay, looping, navigation, pagination, and slide previews. See Company XYZ documentation on slideshow controls.

The default animation is the more flexible choice when you want a typical carousel experience. Fade creates a more focused presentation, but it simplifies the layout and removes some interface options.

Autoplay can add motion, but it works best when related posts are a secondary feature rather than the main call to action. If readers are likely to compare headlines before clicking, slower autoplay or manual navigation is usually easier to use.

Navigation and pagination are most helpful when you show several items in slideshow mode and want readers to understand there is more content available. Slide previews can also encourage interaction, especially on mobile, but they do not apply with fade animation.

Fade animation forces a single-slide layout and does not show pagination or previews of upcoming slides.

Color settings

These settings let you override the section’s icon, text, and subheading colors without changing broader theme styles. They are most useful when this section sits on a custom background or needs stronger contrast than the surrounding article page.

Keep the heading area visually distinct from the article cards below it. If you are also changing card colors or adding a section background, check that every text element remains easy to read.

Standard section settings

Header settings

Use the shared Header settings to add a heading, caption, subheading, icon, and optional button for this section. See Company XYZ documentation on header settings.

This header is useful when related posts appear well below the article body and need a clearer introduction. A short heading and brief supporting text are usually enough, while the optional button works well for linking to the full blog.

Card settings

Use the shared Card settings to control the appearance of each related post card, including style, image ratio, text display, caption content, and card CTA style. See Company XYZ documentation on card settings.

These overrides are useful when article cards need a more editorial look than cards used elsewhere. Banner-style cards support overlay and text-position choices, while simpler card styles are often easier to scan in denser grids.

Padding settings

Use the shared Padding settings to adjust space above and below the section. See Company XYZ documentation on padding settings.

More padding helps the related posts area feel like a distinct next step after the article. Tighter spacing keeps it visually connected to the content above.

Section background settings

Use the shared Section background settings to add a color, gradient, image, or video behind the section. See Company XYZ documentation on section background settings.

A background can help separate related posts from the article body, especially on long-form pages. If you use a media background, make sure both the header and the post cards still stand out clearly.

Caution

Strong backgrounds can compete with article thumbnails and headlines. If readability drops, simplify the background or increase contrast.

Separator settings

Use the shared Separator settings to add a line above or below the section. See Company XYZ documentation on separator settings.

Separators are useful when this section sits near comments, newsletter signups, or other content areas and you want a clearer visual boundary. In most editorial layouts, a simple line is enough.

Visibility settings

Use the shared Visibility settings to control whether the section appears on desktop, mobile, or both. See Company XYZ documentation on visibility settings.

This is helpful when you want a richer related-content experience on larger screens but a simpler article ending on smaller ones. It can also support alternate mobile layouts elsewhere on the template.

Width settings

Use the shared Width settings to control the content width and the outer section width. See Company XYZ documentation on width settings.

Wider layouts can comfortably show more cards in grid mode, while narrower layouts often feel more curated and easier to scan after a long article. If you change widths, preview the live page as well as the editor to judge spacing accurately.

Usage notes

1. Keep the count focused. Show only as many posts as readers can comfortably scan at the end of an article.
   1. Very large counts can make the section feel repetitive or overly long.
   2. Smaller counts usually work best when the related posts are only a closing suggestion.
2. Match the layout to the content. Use grid for quick comparison and slideshow when space is limited or you want a more guided browsing pattern.
   1. Review both desktop and mobile views, since slider-style layouts can change navigation, pagination, preview, and breakpoint behavior.
   2. Check alignment and visibility on each viewport if you are mixing different device settings.
3. Choose fade intentionally. Use fade only when you want one featured card at a time and do not need previews or pagination.
4. Prioritize readable cards. If headlines are long, reduce column counts or simplify card text so each post is easy to understand quickly.
5. Use separation carefully. Backgrounds, padding, and separators should help the section feel distinct without overpowering the article itself.
   1. Leave colors and backgrounds subtle when you want the section to inherit the page’s default look.
   2. Use stronger overrides only when you need the related posts area to stand apart from the article body.
6. Check the article source. The articles you see depend on the current blog and the available related results, so sparse blogs can produce a shorter or less varied set of posts.
   1. If you use separate media for different devices, verify cropping, readability, and fallback behavior on both sizes.
   2. Confirm that any navigation or content-source choices still lead readers to the articles you expect.