> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-blocks/buttons.md).

# Buttons

The Buttons group block lets you add up to two clickable buttons side by side in your page sections. This is perfect when you want to offer visitors multiple options, like "Shop Now" and "Learn More", or when you need both a primary and secondary call-to-action. Having two buttons gives you more flexibility to guide visitors to different pages or actions.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FHLpy8ue4T8byD6hu6IBt%2Fimage.png?alt=media&amp;token=e26e59a4-60f2-4db3-a068-64412b71c8e1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Navigate to the section where you want to add the button (like **Image with text**, **Media banner**, or **Popup**).&#x20;
3. Click **Add block** and select **Buttons**.
4. Make your changes, preview live, then click **Save**.
   {% endhint %}

***

### Settings

#### Button 1

* **Label**: The text that appears on your first button. Leave this blank to hide the button completely.
* **Link**: The web address where the first button will take visitors when clicked. You can link to product pages, collection pages, other pages on your site, or external websites.
* **Button style**: Choose how your first button looks. Select "Solid button" for a filled button with strong contrast, "Outline button" for a button with just a border, "Transparent button" for a subtle button with minimal styling, or "Link" for a simple text link that looks like underlined text.

#### Button 2

* **Label**: The text that appears on your second button. Leave this blank to hide the button completely.
* **Link**: The web address where the second button will take visitors when clicked. You can link to product pages, collection pages, other pages on your site, or external websites.
* **Button style**: Choose how your second button looks. Select "Solid button" for a filled button with strong contrast, "Outline button" for a button with just a border, "Transparent button" for a subtle button with minimal styling, or "Link" for a simple text link that looks like underlined text.

***

### Tips

* Use different button styles to create visual hierarchy. For example, use a solid button for your primary action and an outline or transparent button for your secondary action.&#x20;
* If you only need one button, you can leave the second button's label blank and it won't appear.&#x20;
* Make sure both buttons work well together visually and that their purposes are clear to visitors.

***

### Available in

{% columns %}
{% column %}
{% content-ref url="/pages/ngvmw20Bi2qqvrk8HoQv" %}
[Image with text](/docs/theme-sections-by-category/media/image-with-text.md)
{% endcontent-ref %}

{% content-ref url="/pages/wdbz2FLtTxJRNgV4HxUJ" %}
[Multirow](/docs/theme-sections-by-category/media/multirow.md)
{% endcontent-ref %}
{% endcolumn %}

{% column %}
{% content-ref url="/pages/Wmt8TDWWKKgM4L4MnFhX" %}
[Media Banner](/docs/theme-sections-by-category/banners/media-banner.md)
{% endcontent-ref %}

{% content-ref url="/pages/UGNfqaG5AipM18ieNTsI" %}
[Rich Text](/docs/theme-sections-by-category/informative/rich-text.md)
{% endcontent-ref %}
{% endcolumn %}
{% endcolumns %}