In this article, you'll learn:
What is the View Store Credit Banner
The View Store Credit Banner is a dynamic storefront banner that displays available store credit and gives customers the option to apply it at checkout without leaving the page. It automatically adjusts based on each customer's login and credit status, ensuring the message is always relevant and personalized.
By making store credit more visible and accessible throughout the shopping experience, the banner helps increase credit usage, improve transparency, and boost customer engagement.
The banner supports three display states based on the customer’s status (a full breakdown appears later in this article):
Logged in with Store Credit: Shows the available balance and an Apply Store Credit button.
Logged in without Store Credit: Displays a custom message and an optional call-to-action.
Not logged in: Prompts the customer to sign in to view and use their credit or to sign up
How to set up the View Store Credit Banner
To enable the View Store Credit Banner on your storefront, follow these steps:
From your Rise.ai dashboard, navigate to Assets → On Site → Store Credit.
Locate the View Store Credit Banner asset, then click Create.
If you’ve been using Rise before 16/05/2025, you’ll be redirected to update your app permissions
Once permissions are granted, you'll be redirected to the Shopify theme editor, and you can continue to step 3.
IMPORTANT(!) - If you skip updating your permissions and edit the banner directly from the Shopify editor, the Apply credit button won't appear in the banner. Make sure to start the setup from the Rise dashboard by clicking on the Create button (Step 2).
After clicking on Create, you'll be redirected to the Shopify theme editor. Here, you can place the banner in your storefront:
If you place the banner in the header, it will appear across all pages in your store (Recommended)
Alternatively, you can choose specific pages, like your homepage or product pages, by simply dragging the block to the desired location.
To expand the banner’s margins, click on Apps > Then toggle off the “Make section margins the same as theme” option.
How to edit the three customer-facing states of the banner
The View Store Credit Banner automatically changes based on each customer’s login status and store credit balance. These variations are called states, and you can preview them from the Preview design section in the Shopify theme editor.
Each state has a different purpose and has its own editing location. Here’s a breakdown:
The customer is logged in and has store credit (Shown in the editor as: “Default (logged in, with credit)”).
This is the main state of the banner, and it's always active. It appears when a customer is logged into their account and has available store credit.
For example -
Here’s how it works:
It shows the customer's current store credit balance.
A button is shown to apply the credit directly to the checkout
(this doesn’t redirect the customer to the checkout, the credit is applied in the background, and will automatically appear when they reach the checkout page).
Please note: The Apply Store Credit button will only appear after items are added to the cart.
How to edit the banner content:
Click on the banner → In the right-hand panel, use Preview design to switch the view to Default (logged in, with credit) so you can see how your changes will appear → Then, edit the banner and button text under Content.
The customer is logged in and has no store credit (Shown in the editor as: “No credit banner”).
This state will automatically appear when a customer is logged into their account but doesn’t have any store credit.
For example -
Here’s how it works:
It displays a customizable message of your choice, for example, to promote your rewards program or encourage the customer to earn credit.
Includes a button that you can link to any page in your store, such as a product collection, loyalty overview, or sign-up page.
How to edit the banner content:
Click on the banner → In the right-hand panel, use Preview design to switch the view to No credit banner so you can see how your changes will appear →
Then, under Additional states, toggle on No credit banner to activate this state.
You can now edit the following fields:Text - This is the message that customers will see when they’re logged in but don’t have store credit (you can use it to highlight rewards, special offers, or earning opportunities).
Button label - Customize the button text (e.g., “Shop Now,” “Learn More”).
Link - Choose where the button will lead.
The customer is not logged in (Shown in the editor as: “Logged out banner”)
This state appears when a visitor is browsing your store without being logged into their account.
For example -
Here’s how it works:
Displays a message prompting the customer to log in to view and use their store credit (you can also use this message to encourage account creation).
Includes a button that automatically links to your store’s login/sign-up page (this link cannot be edited).
How to customize the content:
Click on the banner → In the right-hand panel, use Preview design to switch the view to Logged out banner so you can see how your changes will appear →
Then, under Additional states, toggle on Logged out banner to activate this state → You can now edit the login message and link under this section.
How to customize the View Store Credit Banner
You can customize the appearance of the banner, including background color and text color, directly from the Shopify theme editor. Here's how:
Click on the banner in the Shopify theme editor to open the settings panel on the right.
In the right-hand panel, you'll find the Style section.
Under Style, you can adjust:
Banner background color - choose a color that fits your store’s branding.
Text color - select a color that keeps the text clear and visible over the background.
Changes will apply in real time, so you can preview how the banner looks as you adjust the design.
Have more questions or any product feedback?
Feel free to contact us at info@rise.ai or in the chat box.