In this article you will find:

First off, for all customizations, head to your Shopify admin and go to 'Sales Channels' -> 'Online Store' -> 'Themes'

Then click the three dots -> 'Edit Code':

Now you need to open the file where your 'Add to Cart' button is coded. Many times, it will be in a file called product-template.liquid or product-form.liquid:

Search “submit” in order to find the 'Add To Cart' button. The 'Send as a Gift' button's customizations will be done under this code (under the </button> tag).

If you can’t recognize the ‘add to cart’ code, go to the gift card page on your website, press F12, click the element inspector and hover over the add to cart button.

Then, the inspector will show the code of the ‘add to cart’ button

Insert the following code, underneath the ‘Add to Cart’ Button (after the </button>)

Code:

 {% if product.title contains "Product title" %}

<style> #AddToCart {display: none !important} </style>    

{%endif%}

Important:

Code:

If the button is not aligned properly:

<style> .gwbutton {margin-top:0px !important}</style>

If the buttons are to close to each other:

<style> .gwbutton {margin-left:10px !important} </style>

Important:

To style the button, first you need to insert the button's placeholder:

<div style="display:none" class="gwbutton">Send as a Gift</div>

This inserts the button without any styling.

You can add classes and CSS to make the button look however you like. 

To make it look like the ‘Add to Cart’ button, just add the classes that appear in that button to this code, like so-

<div style="display:none" class="PASTE_CLASSES_HERE gwbutton">Send as a Gift</div>

Place this code right below your "Add To Cart" button.

This code will also fix any button related issues that are the result of a compatibility issue with your theme such as:

Related articles:

Need further help?

Feel free to contact us through the chat box or mail to Rise Support.