The Variant Button Block allows you to create customizable buttons for each product variant. This feature is perfect for linking customers to external resources, guides, or promotional pages that are specific to the variant they’ve selected. Each variant can have its own dedicated button, ensuring customers always see the most relevant information.


Key Benefits

  • Add external links that are specific to individual variants
  • Highlight resources such as manuals, guides, or promotional offers
  • Improve customer experience by giving quick access to variant-related information
  • Match your branding with fully customizable button styles and placement


How does it works ?

Step 1: Setup the metafield


  1. On your app dashboard homepage, locate the "Variant Button" block.
  2. Click Setup Metafield to automatically create a variant-level metafield:
  • Namespace & key > neo.variant_button

Step 2: Add entries for metaobjects

  1. In your Shopify admin, go to Content > Metaobjects.
  2. Locate the Neo Variant button Block.
  3. Add entries containing:
    Title
    URL


Pro Tip: Use unique handle names for each button entry. This makes it easier to identify and assign them to the right variants later. 



Step 3 : Assign entries to variants


1. Go to your Shopify admin and navigate to the specific variant you wish to edit.

2. Scroll down to Metafields and look for "Neo Variant Button ".

3. Add the entry that you wish to show for variant.



Step 4: Add the block to your product template

  1. Go to Online Store > Customize theme settings.
  2. Open your Product Template.
  3. Add and position the Variant Button Block as required. We recommend placing it above/below the Add to Cart button.


Step 5: Style your block


From the block settings, you can customize:

  • Font size
  • Text, border and background colors


Note:

  1. The Button_1 styling settings apply to the first button entry assigned to a variant, Button_2 to the second, and so on.
  2. You can display a maximum of 5 buttons per block.


Preview your changes to make sure they align with your store’s branding.

Step 6: Save & Publish

When everything looks good, click Save to publish your updated product pages.