The default card update page linked to in Churn Buster emails — {{capture_link}} — is the ReCharge customer portal page for updating credit cards. (The link goes to "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 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:block;
    width:250px;
    height: 80px;
    font-size:10px;
}

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.

Preview the page

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

Related Resource

Did this answer your question?