Home
>
ReCharge
>
Customize the ReCharge card update page

Customize the ReCharge card update page

The {{capture_link}} in Churn Buster emails sends customers to the default ReCharge credit card page. (The link usually looks like "checkout.rechargeapps.com...")

Adding styling greatly increases the brand recognition and trustworthiness of this page to encourage your customers to update their cards.

To edit this page, follow these instructions:

  • In the ReCharge Dashboard (not Churn Buster), click the wrench icon and select "Customer portal"
  • In the "Customize styles" section, add styling (see sample code below) in the "Credit card page CSS" field.
  • Click "Save" at the bottom of the page.

Here's some code to get you started:

---

#store-banner {
   background-color: #FFF;
   border-bottom: 1px solid #e8e9eb;
   margin-bottom: 30px;
}

#store-banner-name {
   padding: 0;
   margin: 0;
}

#store-banner-name a {
   color: transparent!important;
   background: no-repeat url(INSERT-IMAGE-URL) left center;
   background-size: contain;
   display: inline-block;
   width: 200px;
   line-height: 80px;
   font-size: 0px;
}

h2 {
   color: #222222;
}

.rc_button {
   background-color: #505050;
   border-radius: 20px;
   height: 40px;
   padding: 0 40px!important;
   font-size: 17px;
}

.rc_button:hover {
background-color: #333333;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
   background-color: #505050;
}

a {
   color: #505050;
}

a:hover {
   color: #505050;
}

body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #737373;
}

---

  • For the logo: Follow steps 1 and 2 in this article to upload your logo to Shopify and get the URL. Then replace INSERT-IMAGE-URL in the code above with your logo URL.
  • To center the logo, add margin: auto; ¬†to the #store-banner-name a {} section.
  • To remove the sidebar navigation, add #ReCharge-Nav { display: none !important; } and #ReCharge-Mobile-Nav { display: none !important; } as new sections.

Preview the page

To see what this page looks like for a customer, click into an Active Campaign, click into the upcoming email, and open the card update link in a new tab.

Related Resource

‚Äć