Add CSS to the customer account access link

When a customer purchases an item in a store, Recharge sends them a link to create an account on Shopify that gives the customer access to the Recharge Customer Portal. The portal is where customers manage their subscription settings and billing information after checking out with a subscription product.

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 if they are having issues with their account.

This guide explains how you can modify the Account Access link depending on how the link was added to your theme.

📘

Note

This article applies to Shopify merchants using the Recharge or Shopify Checkouts.

Prerequisites

Confirm the Account Access link exists in your theme by navigating to the Customer Account login page.

If you don't see the Account Access link, contact our support team.

Customize the Account Access link CSS

You can update the styling of the Account Access Link using custom CSS.

1. Navigate to your stores Shopify theme files

2. Click on the Assets folder and select theme.css.liquid. This is where you'll add custom CSS. Paste custom styles at the bottom of the CSS file.

CSS selectors reference

This table and diagram illustrate the CSS selectors that make up the Account Access link.

Example
Below are example CSS rules that will change the Account Access link to look like the image below.

div#rc_login {
    padding: 32px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
}

div#rc_login h5 {
    font-weight: normal;
    text-transform: uppercase;
}

div#rc_login a {
    display: inline-flex;
    font-weight: bold;
    padding: 5px 12px;
    border-radius: 32px;
    color: #fff;
    background-color: #635bff;
}

Hide the Account Access link

You can hide the Account Access link completely using CSS.

Add the following CSS to the theme.css.liquid file:

div#rc_login {
    display: none !important;
}