# Button group

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(41)_X35GRyND.jpg)

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 type="success">

Steps:

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

</Hint>

## How to edit a Button group section

### Section settings

#### Section header

<Expandable title="See settings">

* **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.

</Expandable>

#### Item settings

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



<Video src="https://docs-assets.foxecom.app/hyper-theme/Untitled%20design%20(14)_6uyCVMED.mp4" autoPlay="true" loop="true" muted="true" aria-label="image" />

* **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.

![image](https://docs-assets.foxecom.app/hyper-theme/image_kumrN2sY.png)

### Block settings

![image](https://docs-assets.foxecom.app/hyper-theme/image_Y36ZGrNY.png)

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

<Hint type="info">

**Pro tip** ⭐:  Icons should complement the button text and enhance the message (e.g., use a checkmark for "Eco-Certified" or a cart for "Shop Now").

</Hint>