Block layout settings

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on the theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this settings group to control how much horizontal space a content item takes within its parent grid. It helps you create stronger visual hierarchy, fit more items on a row, or give featured content more room to breathe.

Column span

The main choice is how many columns the content should span on each device size. Larger spans make an item feel more prominent and give text, media, or actions more space. Smaller spans are useful for compact supporting content and tighter multi-column layouts.

Desktop span usually sets the overall layout intention. Tablet and mobile spans let you keep that structure readable as screen space gets tighter, without forcing every device to use the same width.

For a broader overview of how these layouts work, see Shopify documentation on sections and blocks

Tablet and mobile behavior

Tablet can either use its own span or follow the desktop span. That fallback is useful when your desktop layout already scales well and does not need a separate tablet adjustment.

Mobile should be set with readability first. If text wraps awkwardly, buttons feel cramped, or content stacks in an uneven way, the mobile span is often the first setting to revisit.

Review tablet and mobile separately, even when the desktop layout looks right. A span that feels balanced on a large screen can behave differently as the available width gets smaller.

Tip

If tablet layouts feel crowded, reduce the tablet span instead of mirroring desktop exactly. A slightly simpler tablet layout is often easier to scan.

Parent grid limits

This settings group works inside the parent layout’s column structure. If the chosen span is larger than the number of columns available in the parent layout, the content stretches across the full row.

That behavior is helpful for flexibility, but it can also change how items wrap. If something unexpectedly drops onto its own row, compare its span with the parent layout’s available columns before changing spacing or content.

If the selected span is greater than the parent layout’s column count, the content will take the full row.

Mobile slideshow behavior

When the parent layout is set to display as a slideshow on mobile, the usual mobile span from this settings group does not control the final mobile width in the normal way. Instead, mobile layout behavior follows the parent layout’s mobile column setting.

If phone layouts are not matching your expectations, check the parent mobile layout settings first. This is especially important when you expect a narrower or wider mobile presentation but see slideshow-based sizing instead.

If you need help locating these settings in the editor, see Shopify documentation on the theme editor

Usage notes

1. Match width to importance. Give featured content a larger span and keep supporting items narrower for a clearer visual hierarchy.
2. Check parent columns first. If an item keeps moving onto its own row, its span may be larger than the parent layout allows.
3. Use tablet overrides selectively. Keep tablet aligned with desktop unless readability or spacing clearly needs a separate adjustment.
4. Prioritize mobile clarity. Choose mobile spans that avoid cramped text, uneven buttons, and awkward wrapping.
5. Test each viewport. Review desktop, tablet, and mobile separately because the same span can create different alignment or spacing at each size.
6. Test slideshow layouts separately. When mobile slideshow is active, review the parent mobile column setting before troubleshooting width behavior.