Customizing the new ReturnZap returns portal

Customizing the look and feel of your customer returns portal is now even easier with the updated ReturnZap returns portal.

How to install the new ReturnZap portal

The ReturnZap portal can be embedded directly into any page on your Shopify store. ReturnZap does not host the portal externally, so you are in full control of the look and feel and visitors do not have to leave your site to initiate a return.

To install the portal, navigate to Settings > Customer Portal within the ReturnZap app. Select the button to copy the code for the new ReturnZap beta portal. It should look like this:

<return-zap shop-id="[your unique shop id]"></return-zap>

Once copied, navigate to the destination page within Shopify by selecting Online Store in the left hand nav and clicking Pages.

Note: For best results, toggle the page into HTML mode using the button labeled <>

Paste the ReturnZap portal code into the location on the page where you want your returns portal to display, and save the page.

How to customize the portal

Customization can be done either by modifying the snippet of code that you embed into your Shopify page, or by adding a few strings of css text to your Shopify theme file.

Most ReturnZap customizations are made by setting values for CSS Custom Properties. For example, if you wanted to change the color of Information messages from blue to green, you would do it by setting the color like this:

return-zap { --info-color: green; }

Editing the portal embed code (easiest)

Customizations can be added directly to the portal snippet you copy and paste into your Shopify page.

You can do this by including the style property, with any customizations separated by a semi colon:

<return-zap shop-id="your-unique-id" style=" --brand-color: orange; --info-color: black; --border-color: #d8d8d8; "> </return-zap>

Changing your theme's css files (advanced)

Alternatively, you can add all customizations directly into your theme's core .css file by using the return-zap class.

return-zap { --brand-color: orange; --info-color: black; --border-color: #d8d8d8; }

What is inherited from your Shopify theme

ReturnZap automatically inherits some styles from your Shopify theme:

Font family
Font size
Text color

If you want to override these styles you can do so like you would normally. For example:

return-zap { font-size: 20px; }

Changing your primary brand color

The primary color theme within the ReturnZap portal can be set by using the --brand-color css property. This controls primary button colors as well as border colors.

return-zap { --brand-color: #1e90ff; }

ReturnZap buttons are rendered using a brand color background and white text. If your brand color is on the brighter side, button labels may become hard to read.

If that is the case, you can set a --brand-color-contrast color to be used instead of white:

return-zap { --brand-color: skyblue; --brand-color-contrast: black; }

Dark theme support

ReturnZap presumes your shop uses a bright theme. If you need to use ReturnZap with a dark theme you can enable Dark Mode by adding the attribute dark in your portal embed code, like this:

<return-zap shop-id="enter-your-shop-id-here" dark></return-zap>

Customizing ReturnZap message colors

There are 4 types of messages that may appear throughout ReturnZap:

Information
Warning
Error
Unavailable

Each of these message types is displayed with a specific color. You can customize the color for each message type using the following properties:

return-zap { --info-color: #1646a5; --warning-color: #e1c10b; --error-color: #cd0606; --unavailable-color: #cd0606; }

Modifying additional colors

If you want to customize colors beyond the options listed above, you can use the following additional properties.

return-zap { --border-color: #d8d8d8; /* Main border color */ --soft-border-color: #e4e4e4; /* Softer border color used by some boxes */ --content-background: white; /* Background color for most content boxes */ --soft-button-background: #f7f7f7; /* Background color for a few of the buttons */ --tag-background: #eeeeee; /* Background for tags next to product names */ }

Changing Header Fonts and Sizes

You can further modify headers within ReturnZap using the following properties. These allow you to change the font color, font family, and font size of section headers used within the ReturnZap portal.

--heading-color --heading-font-family --h1-font-size

Additional configuration options

Loading a specific order

If you want to show ReturnZap for a specific order, you can pass the Shopify order id to the portal:

<return-zap shop-id="your-shop-id-here" order-id="the-order-id"></return-zap>

Note that this is the Shopify back end order ID, not the order number or order name.

Override portal language

By default, the ReturnZap portal will translate based on the end user's primary browser language.

If you want to set the language explicitly you can pass it to the element using the 2 digit ISO language code:

<return-zap shop-id="your-shop-id-here" language="es"></return-zap>