Button

Overview

The Button block provides a versatile way to add call-to-action buttons throughout your site's sections. It is designed for maximum flexibility, letting you fine-tune the appearance, label, icon, link, and visibility of each button. This ensures strong user engagement and a visually consistent experience.

⚠️ Important: With the Button block, you can customize icons, text, links, button styles, layout, alignment, and visibility, ensuring that each call-to-action is both noticeable and easy to use.

Main settings

The main settings below define how your Button block looks and functions. Focus on creating clear, direct call-to-action buttons that are visually consistent across your store.

Button overview

Use these options to set your button's core structure and visual emphasis. Select settings that make your intent clear and encourage meaningful action.

1. Icon button

   1. Add an icon to enhance your message by entering its identifier.

   2. If you prefer a text-only button, simply leave this field blank.

2. Button text

   1. Set the button label to clearly communicate the action.

   2. Default: Button text

3. Link

   1. Provide a valid URL that you want the button to direct to.

4. Open link in a new tab

   1. Choose whether the link opens in a new browser tab or window.

   2. Default: false

      1. Enabling this is useful for external destinations.

5. Button style

   1. Choose the appropriate button style to match your layout's intent.

      1. Primary

         1. High-visibility style for key actions.

      2. Secondary

         1. Lower emphasis, good for supporting actions.

      3. Extra large

         1. Grabs special attention with greater size.

      4. Plain

         1. Minimal look for less obtrusive actions.

      5. Small

         1. Compact size for space-saving placement.

      6. Small secondary

         1. A subtler, smaller version of the secondary button.

      7. Circle

         1. Displays as a circle, perfect for icon-only buttons.

6. Button layout

   1. Control how icon and text are arranged for clarity.

      1. Icon left

         1. Displays icon before the text.

      2. Icon right

         1. Displays the icon after the text.

      3. Icon only

         1. No label, only the icon is visible.

Alignment settings

These settings help you control the horizontal alignment of the Button block for both desktop and mobile layouts. Use precise alignment to keep your section layouts clean, balanced, and user-friendly.

Use dedicated alignment settings for desktop and mobile to ensure your buttons always fit naturally in your design.

1. Alignment (desktop)

   1. Choose left, center, or right alignment for larger screens.

2. Alignment (mobile)

   1. Set the left, center, or right alignment to optimize button location for smaller screens.

Visibility settings

Visibility settings allow you to control exactly when the Button block appears for users on different devices. Use these options to highlight your most important actions and avoid unnecessary clutter across layouts.

Adjust visibility to make your most important calls-to-action stand out while keeping the interface clean and distraction-free.

1. Visibility

   1. Decide whether the button shows up on desktop, mobile, or both.

      1. Do not hide

         1. The button shows on all devices.

         2. Default: Do not hide

      2. Hide on desktop

         1. Only displayed for mobile users.

      3. Hide on mobile

         1. Only displayed for desktop users.

2. Display full width on mobile

   1. Make your button stretch across the screen on mobile for easier tapping.

   2. Default: false

Available in sections

The Button block can be added to these sections:

1. Featured product

2. Footer navigation

3. Rich text

4. Product information

5. Logo list

6. Hero

7. Buttons

📝 Note: The Button block adapts its appearance to match its parent section. Always preview your button in context to check sizing, alignment, and style.

Usage notes

1. Preview your Button block on both desktop and mobile to ensure proper alignment and clarity.

2. Combine icons and text whenever possible, and use specific, actionable labels to support accessibility.

3. Choose high-contrast styles and generous button sizes, especially for touch interactions.

4. Use visibility and width options to direct attention toward your most important actions and avoid crowding other page elements.

5. Enable "open link in a new tab" only when directing users away from your site or for resources that should not replace the current page.

💡 Tip: Consistent use of the Button block will help guide users to your site's main actions. Adjust style, location, and alignment to maximize engagement and ensure accessibility for everyone.