In this article you will learn how to:
How to insert the ‘Send as a Gift’ button:
After installing Rise, and activating your Gift Card, the ‘Send as a Gift’ button should automatically appear on the Gift Card product page.
If it doesn’t, please first check that you are on the Rise Gift Card product page on your website, not the Shopify gift card product page. The ‘Send as a Gift’ button will not appear on the Shopify gift card page!
Please note: we recommend deactivating the Shopify gift card on your site (through Shopify admin) so customers only purchase the Rise gift card.
How to insert the ‘Send as a Gift’ placeholder:
Step 1: Login to your Shopify admin -> Online Store -> Themes -> Current theme -> Actions -> Edit code
Step 2: Search for your gift card product liquid. Your dev team will know which liquid file to look for, but you can also find it yourself by doing the following:
Type ‘product’ into the search box (see screenshot below)
A number of liquids are likely to appear. First check if ‘Product-template.liquid’ or ‘Product-form.liquid’ appear.
If both appear, open ‘Product-form.liquid’
If neither appear, see if you can find ‘Product.liquid’
If none of these product liquids appear, you will need to look at all liquids with ‘product’ in their title.
Step 3: Locate the ‘Add to Cart’ (ATC) code
In the product liquid page, search (‘Ctrl+f’) “submit”.
Find the ATC code. It will appear as such: "Rise-add-to-cart-button btn product-form__cart-submit”
Step 4: Insert the ‘Send as a Gift’ placeholder under the ATC code
Copy this placeholder: <div style="display:none" class="gwbutton">Send as a Gift</div>
Find the end of the ATC button code. Generally, all buttons start with “<button” and end with “</button>”. As you need to paste the placeholder beneath the ATC code, it will need to be inserted after “</button>” (see screenshot below).
If there isn’t an empty line after the ATC button, you can hit ‘enter’ a few times to create space. Remember not to break any lines of code when you do this :)
IMPORTANT: Write down the name of the product liquid and the line number where you inserted the placeholder. Keep this somewhere safe so you can refer to this if you ever need to.
Step 5: Save!
After you have pasted the ‘Send as a Gift’ placeholder, don’t forget to save!
Step 6:
Return to your gift card page on your website.
Right click on the page -> click ‘Inspect’
Right click on the ‘refresh’ button and click ‘Empty Cache and Hard Reload’
You should see that the ‘Send as a Gift’ button appears!
If the ‘Send as a Gift’ button still does not appear, please be in touch with us. We will need you to send us the product liquid and line number where you inserted the placeholder.
How to style the ‘Send as a Gift button’ with the same style as the ‘Add to Cart’ button:
Please note: We highly recommend removing the Add to Cart button from the gift card product page, as customers typically buy gift cards as a gift for someone else.
Having multiple buttons on one page can confuse your customers and interfere with their experience in your store. It also may lead customers to purchase the gift card without taking advantage of the full gift card experience that the 'Send as a Gift' button offers.
If you’d like to remove the ‘ATC’ button, please let us know (email us at [email protected]).
Step 1: Add the ATC button’s classes to the ‘Send as a Gift’ placeholder’s class:
Locate the ATC button code as you did in Step 3 above.
Find the ATC button ‘class’ - see screenshot below:
Copy the class and insert it into the ‘Send as a Gift’ placeholder, for example:
<div style="display:none" class="Rise-add-to-cart-button">Send as a Gift</div>
The text written in red is the class from the ATC code as seen in the screenshot. Please note that the class differs in every code. If there are multiple ‘classes’, you can try adding one or two. If that doesn’t work, continue to add more.
How to style the ‘Send as a Gift button’ with the same style as another button on your website:
You can find other buttons on your website and take their classes too.
To do so, go to your website:
Right click on the page with a button style you like -> click ‘Inspect’ -> click on the box with the arrow icon (as seen in the screenshot below). This allows you to inspect every asset on the page.
2. Hover over and click the button you’d like to copy the classes of. In the screenshot below you can see that the ‘Send as a Gift’ button was hovered over.
3. Then, you’ll notice that the specific button’s code is highlighted in the ‘Elements’ (side panel) - see screenshot below.
4. From there, copy the button class (without the quotation marks). In the example below, you can see that the class = “button action_button button - - add-to-cart gwbutton”.
Important: please write down the name of the product liquid and the line number where you inserted the code. Keep this somewhere safe so you can refer to this if you ever need to.
How to change the style of your ‘Send as a Gift’ button
Add style codes to change the appearance of the button by inserting style rows under the ‘Send as a Gift’ button placeholder.
Insert the following placeholder:
<style> .gwbutton {XXX: YYY} </style>
‘XXX’ and ‘YYY’ is the style code
For example, based on the screenshot below, I would insert the following line: <style> .gwbutton { width: 100%; line height: 1.4;} </style> including whichever style elements I’d like my button to have.
To find these, use the inspect tool (as explained above) and inspect the button you wish to copy its style.
Copy the style, and add these to the placeholder above.
Got any feature requests?
Feel free to add them to this feature request form.
Have more questions?
Feel free to contact us at [email protected] or in the chat box.