How to Customize Fonts and Colors in the ReturnZap Returns Portal

The Default ReturnZap Return Portal

By default, when you install the customer returns portal into your storefront it will look like this:

Many of the fonts and colors used in the portal can be customized to match the look and feel of your Shopify storefront. All it takes is a small snippet to insert into your core theme.

This is very easy to do, and this guide will walk you through the process.

Making Changes to Your Shopify Theme

The ReturnZap customer portal inherits its styling from the master design files used in your Shopify theme. While each theme is slightly different, the good news it that themes are generally consistent with how they handle these master stylesheets.

To get started, log in to your Shopify storefront as an admin user. Then, follow these steps:

1. On the left hand navigation, locate and click Online Store in the section under Sales Channels
2. For your shop's current theme, click the dropdown labeled actions and select edit code. It should look like the screenshot above.
3. On the left hand navigation of the edit code page, scroll down until you see a folder called Assets. This may be collapsed by default, you can click to expand it.
4. Locate the master .css stylesheet for your theme. There is no standard naming convention used across all Shopify themes for this, but it will most likely be called theme.css, stylesheet.css, or something similar. Click it.
5. This will open up a new page that looks like a code editor. Don't worry, you don't need to do anything complicated here. Ignore everything you see and scroll down to the very bottom of this page.
6. Paste the relevant code snippet for the part of the return portal that you wish to customize from the list of options included later on in this article.
7. Customize any of the elements you desire - for example color or font value
8. Save your changes.

That's it! Your changes should reflect on your returns portal once you reload the page.

Shopify has also published a useful how to guide on editing your theme's code.

What Can Be Customized?

Almost any element of the ReturnZap portal can be customized using CSS.

We have provided some common examples below, but advanced users can identify the div id of any element within the ReturnZap wrapper and customize accordingly using a similar method.

HubSpot has an article on how to do this if you aren't familiar.

Example CSS Snippets To Customize Your Portal

The example snippets below can be pasted into your theme's css file individually. Remember to copy and paste them using the exact structure from below.

Changing Font Color of the Input Field Labels:

We use green as an example below, but you can use any of the color names supported by CSS, or any hex code beginning with #.

.returnzap .rz-label {<br> color: green !important;<br>}

Before

After

Changing Default Button Background Color:

We are using #FF0000 as a hex value in the example below, which is the hex code for "red". You can use any of the color names supported by CSS, or any hex code beginning with #.

.returnzap .rz-ui.rz-primary.rz-button{<br> background-color: #FF0000 !important;<br>}

Before

After

Changing Default Button Background Color AND Font Color:

Red buttons with green text is not a combination we recommend, but it illustrates the point

.returnzap .rz-ui.rz-primary.rz-button{<br> background-color: #FF0000 !important;<br> color: green !important;<br>}

Before

After

We Are Available to Help

Do you need assistance modifying your customer returns portal to match your brand look and feel? Please contact customer support at support@returnzap.com and we will be happy to assist.