Personalizing the Account Access page using CSS

Use CSS to customize the Account Access page customers access to match the look and feel of your storefront.

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.

This guide explains how you can modify the Account Access page to fit the look and feel of your store's brand.

📘

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.

CSS SelectorDescription
div#customer_tab_contentContainer for the Request Account Invite widget
div.rc_header-settings__title.rc_title-bar__title h2Request Account Invite title heading
div.rc_header-settings__description pDescription for the title heading
#login_verificationForm for login verification
#customer_emailEmail input for login verification
#login_verification div:nth-child(4) buttonSubmit button for login verification
#login_verification p aReturn to login link

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>

Example:


Need Help? Contact Us