# Button & Variants

{% hint style="success" %}
In **Product overview** > Add **Button & Variants**
{% endhint %}

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2FU6WBVBzEfFl3QNt0QwMt%2F361.png?alt=media&#x26;token=43bdf2e3-aaf9-44e9-a23e-4dc8423de812" alt=""><figcaption></figcaption></figure>

### Show Local Pickup

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2FHVSHl0Hf3l9PMjL6kdt2%2F362.png?alt=media&#x26;token=a8e47de1-3a1e-419f-b41c-09ddd2c00ecf" alt=""><figcaption></figcaption></figure>

### Show Hurrify

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2FAKes5UpfbNvKCFq3ch9Z%2F363.png?alt=media&#x26;token=90495e22-8727-43b1-9360-a67341ba1b7f" alt=""><figcaption></figcaption></figure>

### Show dynamic checkout button

{% hint style="info" %}
Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)
{% endhint %}

### Show Waitlist

When product is sold out it will show, You can disable /enable Waitlist

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2FhthF6pSeLiBZWA37iyR6%2F364.png?alt=media&#x26;token=b8b752ec-67ce-4dcb-aa70-2aa872831d7c" alt=""><figcaption></figcaption></figure>

### Style Variant

{% tabs %}
{% tab title="Dropdown" %}

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2Fpi4EqU3DXgREBrRCyxvq%2F365.png?alt=media&#x26;token=9444b467-eabb-4368-81f1-d29b96860c0d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Button" %}

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2FboxD5xaStaUZWv1LPtoF%2F366.png?alt=media&#x26;token=086e524b-e7e8-43b0-bc6d-97e9ae8afc7c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Swatch Color & Circle Color

{% tabs %}
{% tab title="Enable" %}

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2FNH0RPmgSypJVDoyo4RTD%2F368.png?alt=media&#x26;token=394bdcdf-cbb6-4911-beb0-d7670357495e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Disable" %}

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2FLC1XEidW9THl9ZwIEfYm%2F369.png?alt=media&#x26;token=cc417e42-89e4-48d1-913d-ad3ae3014a55" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Enable Circle Color" %}

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2FoYZtZJVLhqsHClQMTKuW%2F370.png?alt=media&#x26;token=d26a8292-8f48-4aad-9d66-4faea53ee53d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Disable Circle Coloe" %}

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2FNLGTAXY65epajFpiREWS%2F371.png?alt=media&#x26;token=8767745e-3067-4b66-9bb2-8446828fc40e" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Size Color

{% tabs %}
{% tab title="Small" %}

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2F2QLUtqw5lf9GPgOSKlBA%2F372.png?alt=media&#x26;token=5853283d-e255-44e9-a9eb-d9e6f8d4539c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Normal" %}

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2FknFjcjzb0b9O6qH5Yg0y%2F373.png?alt=media&#x26;token=25ad5fb1-51b8-407c-9eb1-f0b37d25f840" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Large" %}

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2Fjl8DdreqISe3uzj99atA%2F374.png?alt=media&#x26;token=726463fb-2889-40f7-ba6d-104fc933c94e" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### 🔗 Affiliate product

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2Fexjfmbw4aJ0g7OS9PfRH%2F375.png?alt=media&#x26;token=b5837b28-bd4f-4239-9232-318066d19682" alt=""><figcaption></figcaption></figure>

#### Setup Affiliate by Metafields?

{% hint style="info" %}

1. From your Shopify admin, go to **Settings** -> **Custom data**
2. Click **Products → Add Definition.**
3. Please enter correct **Namespace and Key** as we noted below.
   {% endhint %}

```
Name: Affiliate or any name
Namespace and key: info.affiliate_button
Select content type: Text
```

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2Fh2gSUangA89Sway6CeGP%2F376.png?alt=media&#x26;token=ccde6302-0f54-4093-b976-bc64e4979789" alt=""><figcaption></figcaption></figure>

```
Name: Affiliate Link or any name
Namespace and key: info.affiliate_link
Select content type: Text
```

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2FBysa7qfFxbDvOGFsLIr7%2F377.png?alt=media&#x26;token=7c4e0c91-bddf-4fd3-82f4-090d55b78cd4" alt=""><figcaption></figcaption></figure>

#### How to insert content for Product Metafields?

{% hint style="success" %}

1. From your Shopify admin, go to **Products -> All products**.
2. Find and choose the product that you want to edit.
3. In the **Metafields**, please insert content for "**Affiliate**" field.
   {% endhint %}

<figure><img src="https://3542926515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHqcWl0IcgFRM9gKakOEP%2Fuploads%2Fu6yuIWUOW2nOFErYLEyz%2F378.png?alt=media&#x26;token=b6dabd23-59da-4c36-86cd-5ef2d9b74fe6" alt=""><figcaption></figcaption></figure>
