Skip to main content

How to Add and Customize the ‘Send as a Gift’ Button

Learn how to add, and style the Send as a Gift button on your store

Emilie Levenbach avatar
Written by Emilie Levenbach
Updated over 2 weeks ago

In this article, you’ll learn:

  1. How to insert the ‘Send as a Gift’ button if it doesn’t appear on your store

  2. How to match the ‘Send as a Gift’ button style to your ‘Add to Cart’ button


How to insert the ‘Send as a Gift’ button if it doesn’t appear on your store

After installing Rise and activating your Gift Card, the ‘Send as a Gift’ button should automatically appear on your Rise Gift Card product page.
​

If it doesn’t appear, make sure you’re viewing the Rise Gift Card product page on your store, not the default Shopify gift card product page. The button will not appear on Shopify’s built-in gift card page.

Note: We recommend deactivating the Shopify gift card product from your Shopify admin to ensure customers purchase only the Rise gift card.


If you’ve confirmed you’re on the correct page and the button still doesn’t appear, you can manually add it by following these steps:

  1. Go to your Shopify admin → Online Store → Themes → Current theme → Edit code.
    ​

  2. Locate your product liquid file and find the Add to Cart (ATC) code
    ​

    1. Search for your gift card product liquid file. In the code editor’s search bar, type “product”.
      ​
      Look for one of the following files:
      ​​buy-button.liquid, product-form.liquid, or main-product.liquid.
      ​

    2. Once you open the correct liquid file, locate the Add to Cart code.
      ​
      If you can’t locate the Add to Cart button code in your theme files, you can easily find it on your storefront using your browser’s Inspect tool:
      ​

      1. Go to your Gift Card product page (or any product page that includes an Add to Cart button).
        ​

      2. Right-click anywhere on the page and select Inspect. This will open the developer panel in your browser.
        ​

      3. In the panel, click the arrow icon in the top-left corner, which allows you to select elements directly from your page.
        ​

      4. Hover over the Add to Cart button on your site and click it. The button’s code will be highlighted in the Elements tab on the right.
        ​

      5. Above the code, you’ll see the button’s ID, simply copy the name and paste it into the search bar in your Shopify code editor to locate where this button is defined
        ​
        ​For example:
        ​


        ​


        ​

  3. Insert the ‘Send as a Gift’ placeholder under the Add to Cart code
    ​

    1. Copy the following placeholder:
      ​
      ​<div style="display:none" class="gwbutton">Send as a Gift</div>
      ​

    2. Locate the end of your Add to Cart (ATC) button code.
      ​
      In most themes, buttons begin with <button> and end with </button>.
      You’ll need to paste the placeholder directly beneath the closing </button> tag (see screenshot below).
      ​


      If there isn’t an empty line after the ATC button, simply press Enter a few times to create space, just be careful not to break any existing lines of code.
      ​
      For themes that use {% include %} or {% render %} to call button elements (for example, in buy-buttons.liquid), the ‘Send as a Gift’ placeholder should be added just above the closing </div> of the buy button’s container.
      ​

      This placement ensures that the ‘Send as a Gift’ button appears directly under your Add to Cart button on the product page, maintaining proper alignment and styling.
      ​

    3. After you have pasted the ‘Send as a Gift’ placeholder, click Save.

  4. Verify that the ‘Send as a Gift’ button appears
    ​
    Once you’ve added the placeholder, return to your Gift Card product page on your store to check that the button appears correctly.
    ​

    1. Right-click anywhere on the page and select Inspect.

    2. Right-click the refresh icon in your browser and choose Empty Cache and Hard Reload.

    3. After the page reloads, you should see the ‘Send as a Gift’ button displayed beneath the Add to Cart button.
      ​

    If the button still doesn’t appear, please contact our Support team.
    When reaching out, include your product liquid file name and the line number where you inserted the placeholder. This will help us review your setup quickly.


How to match the ‘Send as a Gift’ button style to your ‘Add to Cart’ button

Before styling, it’s important to note that we highly recommend removing the Add to Cart button from your gift card product page.
​

Gift cards are typically purchased as a present, and having both buttons visible may confuse customers or lead them to buy the card without using the full ‘Send as a Gift’ experience.
​

If you’d like to remove the Add to Cart button, please contact our team at info@rise.ai.
​

Once you’ve decided to keep or remove the Add to Cart button, you can move on to styling the ‘Send as a Gift’ button to match your store’s design.

  1. Copy the Add to Cart button’s style
    ​
    To give the ‘Send as a Gift’ button the same look and feel as your Add to Cart button, you can copy the button’s CSS classes directly from your product liquid file
    ​

    1. Locate the Add to Cart button code
      ​

    2. Find the Add to Cart button’s class, this defines the button’s visual styling (see screenshot below).
      ​

    3. Copy the class and insert it into the ‘Send as a Gift’ placeholder, for example:
      ​
      ​<div style="display:none" class="product-form__submit button button--full-width">Send as a Gift</div>
      ​

    4. Once you’ve completed these steps and clicked Save in your Shopify theme editor, the 'Send as a Gift’ button should now appear on your store and match your Add to Cart button.
      ​


      Keep in mind that class names vary between themes. If your button includes multiple classes, try adding one or two at first. If the style doesn’t match, gradually add more until the design aligns correctly.


​​​Have more questions or any product feedback?

Feel free to contact us at info@rise.ai or in the chat box

Did this answer your question?