# Button group

<figure><img src="/files/X35GRyNDC3C9xLOLa5BG" 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="/files/6uyCVMED8h6mAXBSzJmK" 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="/files/kumrN2sYo8W6nbM9TzKq" alt=""><figcaption></figcaption></figure>

### Block settings

<figure><img src="/files/Y36ZGrNY5KUmn2Rk2XF1" 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="/files/6RW1JWuKNf9ovVFLkLXc" 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/hyper-theme/theme-sections/button-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.