# Buy buttons

The **Buy button** block shows the "Add to cart" button with an optional dynamic checkout button.

### Change button style

***

Change the buy button style to **Solid** or **Outline.** Click the **Buy buttons** block to open the settings and change the **"Add to cart" button style.**

### **Sticky add-to-cart**

***

### Dynamic checkout button

***

The **Dynamic checkout button** lets customers quickly buy the product they're viewing with a "Buy it now" button that skips directly to the cart or a branded button with the customer's preferred payment method.

To enable this option, click on the **Buy buttons** block to access its settings and check the **Show dynamic checkout buttons** checkbox.

{% hint style="success" %}
The Dynamic checkout button is a Shopify feature. The theme includes an option to enable the dynamic checkout button, but settings, icons, and functionality are controlled by Shopify. See Shopify's [Dynamic checkout button guide here](https://help.shopify.com/en/manual/online-store/dynamic-checkout).
{% endhint %}

### Local pickup banner

***

If you've set up local pickup in your Shopify admin, the theme automatically displays a banner below the buy buttons that tells customers whether the product is available at your location.

{% hint style="success" %}
Local pickup is a Shopify feature and is not controlled by the theme. See [Shopify's Local pickup guide](https://help.shopify.com/en/manual/sell-in-person/shopify-pos/order-management/local-pickup-for-online-orders) to learn more.
{% endhint %}

`Click Buy buttons block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Add to cart button style</mark></td><td>Change the appearance of the buy button.</td><td><strong>Solid</strong><br><strong>Outline</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr><tr><td><mark style="color:blue;">Show dynamic checkout buttons</mark></td><td>Show "Buy it now" button with the returning customer's preferred checkout method.</td><td></td></tr><tr><td><mark style="color:blue;">Show pickup availability</mark></td><td>Show banner with availability at your local stores.</td><td></td></tr></tbody></table>

### Add bottom padding

***

Use **Bottom padding** to adjust the layout of the product overview section by adding spacing between blocks.

`Click Buy buttons block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Bottom padding</mark></td><td>Add spacing below the block</td><td><p><strong>1 - 50px</strong></p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 36px</mark></p></td></tr></tbody></table>


---

# 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://help.fluorescent.co/eclipse/product-pages/product-content-blocks/buy-buttons.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.