Changing style settings using the Shopify theme editor can feel daunting if you’re not a designer. So, we made it as simple as possible to craft an appealing and brand-aligned customer portal, just by tweaking a few key elements.

In this blog post, we’ll take you through how to personalize your customer portal to stay true to your brand and ensure a cohesive customer experience for your shoppers. 

Before you start

In Recharge, navigate to Customer Portal in the Storefront section, and set your portal to “Embedded in platform storefront.” This means your portal will inherit your main site’s header, footer, and basic styling, so you’re off to a great start.

Create a test account for your store, so you can safely preview your portal without affecting any real users. Then, click on “customize theme” to access the theme editor and begin the customization process.

Step 1: Colors

Start by getting the hex code for your brand’s signature color. This will usually be the color used for buttons and other prominent elements throughout your site.

If you’re not sure how to get the hex code, follow this guide to copy it directly from your browser.

Now that you know your signature color hex code, use it for both the primary and secondary brand color in the theme editor. Leave the contrast color untouched, and you’ll already have a portal that looks much more like your brand.

Tip: If your brand color is really light, using it for links and icons might create accessibility issues. A good alternative is to use a darker shade of your brand color instead. You can either do this by eye, or by generating a shade on this website. If you want to check that your color works for people with visual impairments, use this contrast checker—just set the background color to #FFFFFF for white, and paste your hex code as the foreground color.

Step 2: Corner shape

How rounded your corners are can have a big impact on how your brand feels. 

Have a look at your main site, and notice what shape the corners are on images, buttons, and other elements. In the theme editor, select square, slightly rounded, or very rounded corners to match your portal to your site.

Step 3: Background contrast

Set a background color to help create a good visual balance between the page background and the content cards. Very light, muted colors and grays tend to work well—you’ll usually be better off with a subtle distinction between the background and the cards, not a dramatic contrast.

Use an existing light background from your main site to maintain a coherent visual experience. If you don’t have a suitable background color, try generating lighter tints of a brand color and using those.

Step 4: Optimize image sizes

Because Affinity pulls in product images from Shopify, it’s important to ensure they look as good as possible. In the theme editor, set the image size to square, portrait, or landscape, depending on what works best for your images.

What about fonts?

Because you chose to embed your portal in the platform storefront, Affinity automatically inherits the fonts from your store—so you don’t need to do anything. One less thing to worry about!

Wrapping up

Congratulations! Now that you’ve customized your colors, corners, and image sizes, your portal should be looking polished and consistent, allowing your brand identity to shine through. And if you ever want to make a change, just jump back into the Shopify editor and tweak your settings.

Looking for inspiration? Check out the customer portal makeover below, plus some examples of great customizations achieved by different brands using Affinity.

Before

After

The post The non-designer guide to making your customer portal beautiful appeared first on Recharge.

Having a portal that seamlessly aligns with your brand’s identity can make all the difference. It transforms what might have been a mere transactional tool into a powerful opportunity to cultivate trust and foster loyalty. When customers encounter a portal that mirrors the values and essence of your brand, they are more likely to make choices that not only benefit them but also resonate with the broader objectives of your brand.

Infusing brand voice into the customer portal

Your brand’s unique voice and tone are the pillars of its personality. When your customer portal echoes this personality, it resonates more deeply with your target audience.

To achieve this alignment, make sure that every message, button, and notification in the portal reflects your brand’s voice.

Achieving visual harmony between the customer portal & the website

Visual harmony is equally crucial. When customers move from your website to the portal, they should feel like they’re still in your brand’s world. 

With Affinity, crafting an appealing and brand-aligned customer portal is as easy as tweaking a few key things in the theme editor. If you’re not sure where to start, make sure to check our non-designer guide to making your customer portal beautiful.

Getting inspired

Building trust and loyalty with a branded customer portal isn’t just about aesthetics. It’s about creating an emotional connection with your customers, ensuring they feel at home within your brand’s digital ecosystem. By infusing your brand’s voice and visuals into your portal, you can influence crucial customer decisions and set the stage for long-lasting loyalty and satisfaction. 

So, take the leap, customize your portal, and watch your customers become not just buyers, but brand advocates too. Check out some examples below of Recharge merchants who have customized their portal to portray their brand voice successfully.

Jimmy Joy

Dirty Labs

Mybacs

Javy Coffee

Clean Collective

The post Building trust & loyalty through a branded customer portal appeared first on Recharge.

A key area for saving this time is through self-service support solutions. Research by Statista shows that 88% of customers expect brands to offer an online, self-service support portal. These types of tools allow customers to make adjustments to their orders without having to engage with your Support team—or submitting a ticket and waiting for it to be resolved. 

For subscription brands, this type of self-service customer enablement is particularly crucial. After all, with orders regularly recurring on a set cadence, subscriptions need to fit seamlessly into customers’ lives. That means making adjustments to orders is sometimes inevitable, whether people are going out of town or have too much of a product and need a break. Shoppers need an intuitive place to make these adjustments quickly and easily. 

To get to the root of this need, we spoke to many of our merchants to explore what the ideal solution could look like. Merchants expressed the importance of easy navigation around the portal, integration with the portal and the overall store experience, and allowing customers to resolve payment issues on their own.

Based on those conversations, in May, Recharge launched the Affinity customer portal. This new customer portal theme was built to make subscription management easier for both brands and their customers by streamlining order management and empowering customers to resolve issues independently. The Affinity theme allows merchants to easily make no-code customizations to the portal, and provides customers with a mobile-first, user-friendly interface to easily manage their subscriptions and add products to a future order.

Over the past several months, we’ve been collecting valuable feedback from our merchants to learn more about how the Affinity theme has impacted their business. In this post, we’ll dive into the early results we found—including increased retention and average order value.

What were the early results of the Affinity portal’s performance?

To better understand how the Affinity portal was performing in the early stages, we studied 12 merchants participating in our Early Adopter Program. These early results are in line with our expectations that Affinity is making a positive impact on merchant metrics, and we will continue to monitor results over time to confirm that our findings hold at scale. 

Now, let’s dive into the results.

Increased retention & reduced cancellations

Merchants who use Affinity experience better user retention with improved order management functionality of the customer portal. We’ve seen a dramatic reduction in the share of subscription cancellations of certain categories, like a 61% decrease in cancellations due to the max number of charge attempts.

Additionally, Affinity’s enhanced, mobile-optimized UI and single-page view showcasing prominent common actions made it easier for customers to skip charges, increasing the likelihood that customers would choose to skip instead of cancel. These merchants saw a 71% higher rate of customers using the skip option.

Increased AOV

After implementing Affinity, the merchants we studied saw a 7.9% increase in AOV. This could be due to Affinity’s improved UX for managing features, including bundles and dynamic bundles, coupled with its intuitive UI featuring a product carousel and easy options to add a product to a future order.  

What’s up next for Recharge?

We’re always working to make things simpler and more intuitive for our merchants and their subscribers. We’ve built Extensions that allow you to further tailor the portal in low-code ways, and in the future plan to create even more customizations for merchants. 

Learn more about the Affinity customer portal on our Support page, and provide feedback via the Recharge Product Roadmap.

The post Early findings show that Recharge’s Affinity customer portal increased retention & AOV appeared first on Recharge.