Buttons

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on the button block
3. Company XYZ documentation on headers settings
4. Company XYZ documentation on section backgrounds settings
5. Company XYZ documentation on section padding settings
6. Company XYZ documentation on separators settings
7. Company XYZ documentation on visibility settings
8. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use Buttons to place one or more clear actions wherever customers need an obvious next step. It works well for landing-page calls to action, quick link groups, promotional prompts, or simple navigation shortcuts. For a broader overview of how sections and blocks work in the editor, see Shopify documentation on sections and blocks

Core settings

The main section controls determine how the button group is arranged across desktop and mobile. Separate alignment settings let you keep a wider desktop presentation while tightening the layout for smaller screens.

Layout switches the group between a horizontal row and a vertical column. Rows work best for a small set of short labels, while columns are easier to scan when labels are longer or each action needs more space.

When you add more than one button, Button width helps control visual rhythm. Keep mixed widths when labels vary noticeably in length, and use equal widths when you want a cleaner, more uniform button group.

Tip

If buttons feel crowded on mobile, try a column layout before reducing button text. Stacked actions are often easier to scan and tap.

Supported block types

1. Button

Button block

A Button block adds another action to the section with its own text, link, style, icon, mobile width behavior, and device visibility. Learn more about the Button block.

Use Button blocks when you want multiple actions in the same group, such as primary and secondary calls to action or a short list of destination links. You can also hide individual buttons by device, which is helpful when mobile and desktop need slightly different action sets.

If you use several Button blocks together, keep the visual hierarchy obvious. One strong primary action and one or two supporting actions usually perform better than several equally prominent buttons.

Section-specific settings

Color settings

Color settings override the default icon, text, and subheading colors for this section only. They are most useful when you add a custom background and need stronger contrast or a more intentional color treatment.

Adjust these colors together rather than one at a time. If the heading area becomes harder to read against the background, update text and subheading colors first before changing button styles.

If you use a custom background or overlay, always check that heading text, icons, and buttons remain easy to read at a glance.

Standard section settings

Header settings

Header settings control the optional intro content above the button group. In this section, they can also include a built-in button, which is useful when you want a simple heading-and-action layout without relying only on Button blocks.

Use the heading area when the buttons need context, such as a short sales message or instruction. The built-in button has its own style, icon, link, placement, and mobile width controls, and those settings apply only to that section-level button.

If you combine the built-in button with Button blocks, decide which action should lead. Keep one button visually dominant so the section does not feel like a list of competing choices.

Note

Icon-only buttons are best reserved for cases where the meaning is unmistakable. Text labels are usually clearer and easier to scan.

Section background settings

Section background settings let you place the button group over a color, gradient, image, or video. This can turn a simple action area into a stronger promotional section, but backgrounds also affect readability and spacing.

Use lighter backgrounds for text-heavy intros, or increase overlay strength when the background image competes with the buttons. Mobile-specific background media can help keep the section cleaner on smaller screens.

Padding settings

Padding settings control the space above and below the section. Reduce padding when Buttons supports nearby content, or increase it when you want the actions to stand apart as their own destination.

Separator settings

Separator settings add an optional line above or below the section. Use separators when you want gentle visual separation without introducing a full background treatment.

Visibility settings

Visibility settings control whether the entire section appears on desktop, mobile, or both. This is helpful when you want a dedicated mobile action section instead of trying to force one layout to work everywhere.

Width settings

Width settings control the content width and the outer section width. Narrower content widths can make a small button group feel more intentional, while wider section widths are more effective when you pair the section with a strong background.

Caution

Width changes can look different in the editor than on the live page, especially with full-width or full-bleed layouts. Preview the page itself before finalizing spacing and alignment.

Usage notes

1. Keep the list short. Use this section for a focused set of actions rather than a long menu of links.
2. Match layout to label length. Choose a row for short button text and a column when buttons need more room.
3. Lead with one priority action. Make the most important button visually strongest and keep secondary actions more restrained.
4. Review desktop and mobile separately. Alignment, width, visibility, and media choices can change the section’s layout and readability between viewports.
5. Use default styling intentionally. Blank, transparent, or otherwise neutral values usually preserve fallback styling, while explicit colors or media make the section feel more self-contained.
6. Check media behavior before publishing. If you use different desktop and mobile media, confirm cropping, loading, and text readability on both sizes.