In this article we cover:
How to get Rise set up on your Headless store?
Firstly, to set up Rise with your headless store, you must be on the Rise Enterprise plan.
Rise.ai was designed as an app for the Shopify store. Since headless stores have more freedom in their setup, there are a couple of technical requirements to ensure Rise works as expected.
Ensure functionality of the Gift Card
1. Update Rise Team you're starting to set up the gift card page on your headless store.
The default Rise setup is non-headless so we need to make sure that headless mode is activated for your store.
2. Add the Rise script to your store
Add the following script tag to the head of the gift card product page:
<script src="https://str.rise-ai.com/?shop=%YOUR_MYSHOPIFY_URL%" defer></script>
Please note: Make sure to replace "YOUR_MYSHOPIFY_URL" with the URL of your store.
3. Identify the add to cart button
Add the class below to your gift card product's existing "add to cart" button (not the "Send as a Gift" button.)
Rise-add-to-cart-button
4. Add the Rise object to your product page window
For our gift card logic to work, you should add the following Rise object to your product page window. The last property "onGiftAdded" is explained in the next step.
window.Rise = {
full_product: { available: true },
is_floating_cart_theme: true,
is_product_page: true,
product: { id: %GIFTCARD_PRODUCT_ID% },
using_add_to_cart_flow: false,
onGiftAdded: (lineItemProps) => addToCart(lineItemProps);
}Please note: Make sure to replace "GIFTCARD_PRODUCT_ID" with the ID of your gift card. Ask the Rise team for help if you don't know how to find it.
5. Add the "onGiftAdded" function to the Rise object (the last property from the last step)
The Rise.ai gifting module requires line-item custom attributes to be added to the Shopify cart so we can identify the information inserted in the pop up. To do so we've created a dedicated logic that triggers a callback function once a customer finishes filling in the gifting information and clicks "add to cart".
You will need to implement this function and it must be added to the global scope so we will be able to call it from the window.
As to the function implementation: Rise uses line item properties for gift cards that are bought as gifts. Your callback implementation should receive an object from us, this will contain the gift’s properties.
lineItemProps = {
gift: {
_gift_id: UUID,
name: String,
email: String,
message: String
}
}lineItemProps object structure
The callback function should be able to add the line items above to the cart.
Example Implementation (the xhrp path, type and structure should be adapted to your card provider).
async addToCart({ gift }) {
const { _gift_id, message, email, name } = gift
await xhrp('post', '/cart/add.js', {
contentType: 'multipart/form-data',
body: {
id: currentVariantLineItem.id,
properties: {
_gift_id,
Name: name,
Email: email,
Message: message
}
}
})
}
Note that Shopify order expected structure is:
{
order: {
line_items: [
{
properties: {
_gift_id: UUID,
name: String,
email: String,
message: String
}
}
]
}
}
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:
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.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
If you need anything, please contact us at [email protected], or in the chatbox.