# Button group

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FrlUpXwSGAETSNW5KY8zs%2FHyper%20docs%20screenshot%20do%20not%20delete%20(41).jpg?alt=media&#x26;token=c86e464c-765a-45fa-8b03-88470b347bfc" alt=""><figcaption></figcaption></figure>

The **Button group** section is a versatile feature for adding interactive buttons with icons that enhance the visual appeal and usability of your store.

## How to add a Button group section to your Shopify store

{% hint style="success" %}
Steps:

1. In the theme editor **(Customize)**, click **Add section**
2. Locate **Button group** section
3. Make necessary changes
4. **Save.**
   {% endhint %}

## How to edit a Button group section

### Section settings

#### Section header

<details>

<summary>See settings</summary>

* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.
* **Description:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Description size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.
* **Text alignment:**
  * Align the text in the section to the **Left**, **Center**, or **Right**.
  * Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.

</details>

#### Item settings

* **Content alignment**: Align the content within the buttons (left, center, or right).

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FmYUbyQX4aUr3c9WJPMJ8%2FUntitled%20design%20(14).gif?alt=media&#x26;token=3260b37d-adb7-471b-8fe8-2d59023c77ae" alt=""><figcaption></figcaption></figure>

* **Button style**: Choose between styles for your buttons.

#### Carousel settings

Enable or disable the carousel function on desktop. Turning this on allows users to swipe through buttons interactively.

#### Mobile Layout

Allow users to swipe through buttons for a seamless mobile experience.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F57ibowQSiryEd5w8WJ9g%2Fimage.png?alt=media&#x26;token=d49c3d87-8707-4b3c-9032-585c930d5efa" alt=""><figcaption></figcaption></figure>

### Block settings

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FIOHU1XEdxg9tArTgbeYB%2Fimage.png?alt=media&#x26;token=ff11cd2e-6691-4986-85f1-732ab011fcda" alt=""><figcaption></figcaption></figure>

Each button comes with a **Button label**, **Button link**, and an **Icon** for it.

{% hint style="info" %}
**Pro tip** :star::  Icons should complement the button text and enhance the message (e.g., use a checkmark for "Eco-Certified" or a cart for "Shop Now").
{% endhint %}

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>