Personalizing the Account Access page using CSS

When a customer purchases an item in a store, Recharge sends customers a link to create an account on Shopify where they can access the Recharge Customer Portal.

Customers may forget to make an account or miss the email with account setup instructions. To make it easier for customers to access their Customer Portal, Recharge adds an Account Access link on the Account Login page that provides customers with instructions to access their accounts. After clicking the link, customers are redirected to the Account Access page where they can input their email address to receive a magic link.

📘

Platform:

• Recharge Checkout on Shopify
• Shopify Checkout Integration

---

Customize the account access page

Add custom CSS in the Recharge merchant portal to update the styling of the Account Access page:

1. From the Recharge merchant portal, click Storefront and select Customer portal.
2. Scroll to the Customize styles section and locate the Header HTML/CSS/JS textbox.
3. Add your custom CSS to the textbox. Use the CSS selectors reference listed below to target specific elements of the Account Access page.
4. Save your changes.

CSS selectors reference

The following table describes common CSS selectors that make up the Account Access page. This is not an exhaustive list and you can target different elements to customize the page further.

---

Custom Account Invite page example

Use the following code block to update the text and background colors:

<style>
  body {background-color: powderblue;}
h1 {color: blue;}
p {color: white;}
</style>