Customize Your Gift Button

Customize, fix bugs and edit your gift buttons at your Gift Card product page or other product pages through your Shopify admin

Hila Butbul avatar
Written by Hila Butbul
Updated over a week ago

In this article you will find:

  1. How to remove the ‘Add To Cart' button from the gift card page.

  2. How to correct misplaced buttons.

  3. Send as a Gift button customization

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

Remove Add to Cart button from your Gift Card Product page:

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:

  • Insert your Gift Card product title in the "Product title" - e.g "Gift Card" instead of "Product title". Note-  this is case sensitive so make sure to insert the exact title.

  • If there is no id for your ‘Add to Cart’ button, insert in the button’s code id= “AddToCart”

  • If there is an Id, in the code you insert, change the “AddToCart” to your button’s ID.

How to correct misplaced buttons.

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:

  • Correct any margin you need: bottom/top/right/left.

General “Send as a Gift” button customization:

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:

  1. Button not appearing.

  2. Button is not aligned properly.

  3. Move button around the page.

  4. Broken button.

Related articles:

Need further help?

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

Did this answer your question?