Include an additional call-to-action (CTA) button for specific products in the product form. Use this feature to connect customers with useful links, such as fitting guides, contact pages, or return policies—right from a button below the add-to-cart button.
Add code block to the product description
Paste the following code block to the product description in HTML view:
<product-cta
button-size="large"
button-style="secondary"
link="https://pixelunion.net/" >
Button Text
</product-cta>
To activate the HTML view, select Show HTML in the top-right corner of the Description field.
Add to the beginning or end to avoid interrupting any other description content. The position of the button will be the same regardless of position in the description HTML.
Adjust the details
There are several components to adjust before saving.
Choose a button size
To adjust the size, change the value of large to either medium or small. Make sure the button size is wrapped with quotation marks.
button-size="medium"
Select a button style
By default, the code will display a large button in the Secondary button style.
To change the style of the button, change the value of secondary to primary. Make sure the button style is wrapped with quotation marks.
button-style="primary"
Connect the link
Replace the link with the desired URL to direct customers to that page. Make sure the link is wrapped with quotation marks.
link="/pages/delivery-and-shipping"
For external URLs, make sure to include the full URL to avoid 404 errors:
link="https://www.xe.com/"
Add the button text
Replace the Button Text placeholder to add the desired button label.
Delivery and Shipping
The button text will be converted to uppercase (all capitals) by default.
Assign to specific variant (optional)
To display this button for a specific variant only, you can include that product's variant code in the code block.
variant-id="31870631641219"
Gather the variant ID by visiting the product page, selecting the variant, then copying the end of the URL:
With the variant ID, combine it with the CTA code:
<product-cta
variant-id="31870631641219"
button-size="large"
button-style="secondary"
link="https://pixelunion.net/" >
Visit Pixel Union's website
</product-cta>
At times the platform will strip the CTA shortcode after changes are made to the product description. To avoid this, back up the code block to your notes and paste the code block to the HTML view if it is absent after changes.