This article includes:
What is the store credit button
Why the button may not appear in your account page
How to add the button
How to style the button
The store credit button:
The Store Credit button can be found in the Shopify account page (see example below)
The button triggers a popup which allows customers to view their store credit balance, and combine their gift card balances with their store credit balance.
Any gift cards that your customers receive will be listed in the popup and can easily be combined with their existing store credit balances by copying the code and clicking 'add store credit'.
To learn more about how customers check their balances, click here.
Why doesn't the store credit button appear?
If you have customized your account page, it’s possible that the store credit button won’t automatically appear. However, there is a simple fix!
How to add the Store Credit button:
Step 1: Important: The store credit button will only appear for customers with a store credit balance.
If you haven’t already done so, create an account in your store and award yourself store credit using the ‘Issue Store Credit’ button on the Rise dashboard.
Login to your account, go to the account page and check if the Store Credit button appears. If it doesn’t, continue to the next step!
Step 2:
Go to your Shopify admin -> Online store -> Themes -> Actions -> Edit code
Search for ‘customers/account.liquid’ (see screenshot below)
Step 3:
In a separate tab, login to your store account and go to your account page
Right click on the page -> 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.
Hover over and click any of the following buttons (the exact phrasing may differ depending on how your account page is set-up):
In the screenshot above, the ‘View addresses’ button has been hovered over and clicked on.
In the side panel, you will see that the code for the button that you have clicked on is highlighted.
You should see that the code commences with “ <a href= ” (see examples below)
You will need this code for the next step.
Step 4:
Return to your ‘customers/account.liquid’
Locate the code you found in Step 3, in the ‘customers/account.liquid’
Copy the line of code. Please note: It begins with “<a” ends with “</a>”
Paste it on a new line below the line of code copied.
Step 5: Edit the new line of code so that the Store Credit button will appear
For example, if the line of code copied appears as such:
<a href="/account/addresses" class="btn btn--small">View Addresses (3)</a>
Then,
1. Delete the href content (in bold above) and replace with:
“#” and add an id like so: id=”Rise-account-page-button”
2. Delete characters between >XXXX</a> and replace with “Store Credit”. In the example above, delete “View Addresses (3)”
After making these changes, the code will appear as such (based on the example above):
<a href="#” id=“Rise-account-page-button” class="btn btn--small">Store Credit</a>
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 6: SAVE!
Click save on your ‘customers/account.liquid’ page
Step 7: Check if your store credit button appears
Empty cache and hard reload your account page
The store credit button should now appear!
If the button still doesn’t appear, continue reading…
If the above hasn’t done the trick, follow these steps:
Delete the new line of code you inserted in Step 5 and replace with:
<button id="Rise-account-page-button" style="margin-top: 15px;">Store Credit</button>
Click ‘Save’
Empty cache and hard reload your account page
The store credit button should now appear, if it doesn’t please contact us at [email protected]
How to style the button with the same style as another button on your website:
You can style the 'Store Credit' button to match another button on the account page (or any other button on your site).
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).
2. Hover over and click the button you’d like to copy the classes of. In the screenshot above you can see that the ‘View Addresses’ button was hovered over.
3. Then, you’ll notice that the specific button’s code is highlighted in the side panel - ‘Elements’ section.
4. From there, copy the button class (without the quotation marks). In the screenshot above, you can see that the class= “btn btn--small".
5. Replace the class which appears in the 'Store Credit' button code with the new class. For example, the new class is inserted after "class=" as such:
<a href="#” id=“Rise-account-page-button” class="btn btn--small">Store Credit</a>
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.