In this article we cover-

  1. How to install Rise on your store

  2. Which assets will be available

  3. Store Examples

How to get Rise setup on your Headless store?

Firstly, to set up Rise with a Headless store, you must sign up with Rise on the Enterprise plan.

Rise.ai was designed as an app for the Shopify store. As a Headless store has more freedom in its setup, there are a couple of technical requirements to ensure Rise works as expected:

1. Add the Rise script to your store

Add the following script tag to the Head of the Gift Card page:

<script src='https://str.rise-ai.com/?shop={{YOUR_MYSHOPIFY_URL}}' defer/>

2. Add the Rise object to your PDP window

The Rise.ai gifting module requires updating order/cart line-item custom attributes to be passed to the Shopify order. For that, we've created a dedicated API that will trigger a callback function when a customer finishes filling the gifting information on the gift-card product page.

The function must be added to the global scope as follows:

window.Rise = {
full_product: { available: true },
is_floating_cart_theme: true,
is_product_page: true, product: { id: 'GIFT CARD PRODUCT ID' },
using_add_to_cart_flow: false,
onGiftAdded: (lineItemProps) => addToCart(lineItemProps);
}

3. Add function to the Rise object

Rise.ai uses line item properties for gift cards that are bought as gifts. You should add a callback function to the global scope that receives an object, containing the gift’s properties. The callback function should be able to add line items to the cart with properties. Rise.ai uses the _gift_id property to detect the gifts.

The _gift_id field is mandatory. The rest are optional as gifts will still be sent with the right details to their recipients.

lineItemProps object structure:

lineItemProps = {
gift: {
_gift_id: UUID,
name: String,
email: String,
message: String
}
}

Shopify order expected structure:

{
order: {
line_items: [
{
properties: {
_gift_id: UUID,
name: String,
email: String,
message: String
}
}
]
}
}
}

An example function for an add to cart callback (the xhrp path, type and structure should be adapted to your card provider).

async addToCart(lineItemProps) {
const { gift_id, message, email, name } = lineItemProps

await xhrp('post', '/cart/add.js', {
contentType: 'multipart/form-data',
body: {
id: currentVariantLineItem.id,
properties: {
_gift_id: gift_id,
Name: name,
Email: email,
Message: message
}
}
})
}

To confirm the success of this process, or if you have any additional questions, you can contact one of our Technical Reps who will be able to walk you through this process and make sure it is suited to your store’s needs. You can email them at [email protected].

Which Assets will be available?

A few of Rise’s original assets are available when you are utilizing Rise on a Headless store. You will have access to:

  1. The Gift Card Popup
    We provide a “Send as a Gift” button taking your customers to a module in the Gift Card product page to send their gift card directly to their friends and family. You can see more information about this asset here.

  2. The Check Balance page
    The check balance page is a dedicated page to be added to your store allowing your customers to find information about their gift cards at the click of a button, rather than having to reach out to you. You can learn more about this feature in our Help Center article.

If there are certain “deal-breaker” assets that are must-have, please contact our support team and let us know, we will be happy to see if there is a more manual method of including these features.

Store Examples

Figs

TB12 Sports

Art of Tea

If you need anything, please contact us at [email protected], or in the chatbox.

Did this answer your question?