Buttons

Overview

The Buttons section provides an effective way to add visually striking and interactive buttons throughout your storefront. This section offers flexible alignment, width, and layout options that adapt fluidly across both desktop and mobile screens. Advanced customization options help you highlight offers, guide navigation, and direct user attention to key areas for increased engagement.

💡 Tip: Use the Buttons section to focus visitor attention on your main calls to action, promotions, or important navigation points.

Key components and functionality

Setting groups in the Buttons section support design consistency and help tailor the presentation of buttons to suit your content and layout needs. Each group is introduced below, with key settings and impact explained.

Section introduction

Use the Buttons section to add consistently styled and customizable buttons exactly where you need them. Multiple options for alignment and layout allow you to fine-tune the placement and visual impact of these buttons for any use case.

Alignment settings

Alignment settings determine how button groups sit within the section for both desktop and mobile views, supporting a cohesive and intentional layout.

1. Horizontal alignment (desktop) lets you align buttons to the left, center, or right for larger screens.

   1. Default: Center

2. Horizontal alignment (mobile) allows button groups to be left, center, or right aligned for mobile devices.

   1. Default: Center

These settings provide clarity and visual structure—whether presenting a primary call to action or multiple navigation options.

Button width

The button width group controls how much space each button occupies within its row or column, giving flexibility for balanced design and usability.

1. Default
   Each button automatically sizes to its label and content.

2. Equal width
   All buttons expand to match the width of the widest button for a unified look.

Default: Default

💡 Tip: Select equal width for a clean, balanced appearance, especially with multiple buttons in a row or column.

Button layout

Layout options control the arrangement of buttons, letting you optimize use of space and attention based on your section’s goals.

1. Row
   Buttons are displayed horizontally from left to right.

   1. Default: Row

2. Column
   Buttons are stacked vertically, which can be ideal for touch targets on mobile.

Supported block types

The Buttons section supports the Button block. You can add multiple Button blocks per section, and each has unique settings for icon, text, link, and style. This modular approach lets you mix and match button styles and destinations inside one group, supporting a range of layouts and design choices.

Usage notes

The Buttons section provides strong responsive controls. Always review your layouts on desktop and mobile to ensure visual harmony and ease of use. Make sure buttons are easy to tap on mobile, and confirm that text and icons display cleanly across device sizes.

💡 Tip: For optimum accessibility, use clear, descriptive button labels and choose colors with strong contrast for easy readability.

For performance, limit background effects and focus on direct, clear calls to action. Adjust both alignment and sizing per device view to present a professional and effective call to action throughout your site. The Buttons section gives you precision control over action-oriented elements, enhancing both usability and conversion potential across your storefront.