Customizing Your Return Portal

Design your portals in your brand style in order to provide a seamless branded experience for your customers. 

Requirements

In order to customize your return portal, these requirements must be met:

1. Admin-level permissions in your eCommerce platform.
2. Admin-level permissions in ReturnGO.

Customizing the Look and Feel of Your Return Portal

The Portal > Look and Feel page lets you customize key elements in your return portal, including fonts, colors, and more.

You can also test your portals in preview mode to see how your portals will look, without creating an actual RMA.

Portal Layout

Under the General Settings > General section of the Portal > Look and Feel page, you can customize the layout of your portals as they appear on the page they’re embedded in.

Portal Layout + Border Radius

• Portal Position on Page: Define the position of the portal on the page - do you want the portal to be in the middle, left, or right of the page?
• Portal Border Radius: Make your portal have rounded corners if you like, and control the exact border radius for the portal.
• Button Border Radius: Make the buttons on the portal have rounded corners if you like, and control the exact border radius for the buttons.
• Elements Border Radius: Make the portal sections have rounded corners if you like, and control their exact border radius.
• Button Section Background: Choose the color of the background of the sticky "Back" and "Next" buttons section.
• Button Section Opacity: Set the opacity percentage for the sticky "Back" and "Next" buttons section.

Portal Margins

Set the margins you want above and below the portal, as well as the container margins to control the spacing within the portal.

Fonts & Colors

Under the General Settings > Fonts & Colors section of the Portal > Look and Feel page, you can customize the fonts and colors of your portals.

Font

Set the font family that will be applied to your portals. You can set this to any font imported or recognized by your store’s theme.

To change the return portal font:

1. Go to Portal > Look and Feel.
2. Open the General Settings section.

3. Open the Fonts & Colors sub-section.
4. In the Font field, type the font name. 
5. Click on the save icon to save your changes.

6. Reload the return portal to see the results.

How to Find the Font Name

You can find the list of font names in your store theme editor, or you can find an element in your store that uses the font that you want, and inspect it to get the font name.

How to Import a Font

The steps to import a font to your theme may vary, but you can try to upload a font file in your Shopify store directly, then use a custom style script to import it to your theme. 

1. Download the font from Google Fonts. 
2. Upload the font in Shopify > Content > Files, then copy the file URL.
3. Construct a custom-style script based on the script below.
4. Add the custom style script in theme.liquid, just above the </head> element.
5. Set the font in Portal > Look and Feel.

<style>  @font-face  {   font-family: “custom_font_name”;     src: url(font_url)           format (“font_format”);   } </style>

The @font-face rule allows you to specify a font name and the URL where the font file can be found. The custom_font_name can be any arbitrary text. Copy the font name you set here and use it in Portal > Look and Feel. Make sure to include the double quotes there too. The font_url is taken from Shopify > Content > Files. Click the 📎 icon to the right of the font file to get the font URL. The font_format depends on the font’s file format. e.g. Use truetype for .ttf files, opentype for .otf files, and so on.

Colors

Set the colors that will be applied to key elements in your return portal. You can set the colors using RGB values, HSL values, hex code, or with the color picker.

Customize the colors of different text elements in your portals, as well as the colors of the backgrounds of the input fields and buttons in your portals.

To change your portal colors:

1. Go to Portal > Look and Feel.
2. Go to the General Settings section.

3. Open the Fonts & Colors sub-section.
4. Set the color for each element by typing the hex code or clicking the color tile.
5. Click the save icon.

6. Reload the portal to see the results.

Advanced Customization

Under the General Settings > Advanced section of the Portal > Look and Feel page, you can apply custom CSS for more advanced portal customization, and define the minimal top offset of your portals. Read more about advanced styling customization here.

Minimal Top Offset

Specify how the portal will be positioned while navigating through the returns process, especially if there is content above the portal. This setting only applies to portals that are embedded on a custom page.

This lets you adjust the spacing above your portal to make sure it doesn't collide with your banner.

 

If you set the offset value but nothing changed in the portal, you may be using the default portal page instead of an embedded custom page. Since the default URL does not include any text before the main return portal, there is nothing to offset.

If you have embedded the portal on a custom page, then the issue might be that you’re testing the results on the first screen of the portal, while the effects of the offset can only be seen on later steps of the portal.

Custom CSS

To style your portals in more advanced ways than possible natively through ReturnGO’s portal customization settings, you can add custom CSS code for more advanced styling. To add custom CSS, make sure your portal is first embedded in isolated mode.

ReturnGO portals have two modes of embedding:

• Isolated mode (default for new stores since Feb 2024)
• Non-isolated mode (default before Feb 2024)

In Isolated mode, the portal is not affected by any code in the hosting web page. This means that whatever styles you have on your returns website page would not leak into the portal. The opposite is also true: the portal styles, and any CSS customization you push into it cannot leak into your website page.

To customize your portal style in isolated mode:

1. Go to Portal > Look and Feel.
2. Go to the General Settings section.

3. Open the Advanced sub-section.
4. Make sure the Isolated Portal toggle is on.
5. Paste your custom CSS into the Custom CSS section.

6. Click the save icon.

In non-isolated mode, the portal is affected by styles from the host page. This may cause conflicts and therefore the recommended mode is isolated mode. Note that in non-isolated mode, styles can still be placed on the host page.

Return Portal Customization

Under the Return Portal section of the Portal > Look and Feel page, you can customize elements that are specific to your return portal.

Keep in mind that settings such as fonts, colors, and border radius for your return portal are set together with those for your tracking portal in the General Settings section of the Portal > Look and Feel page.

Display SKU for Product Items

Define whether product SKUs will be displayed in the return portal. If you enable the toggle, the product SKU will be visible below each product name on both the item selection and exchange item selection pages of the return portal.

To define whether product SKUs will be displayed in the return portal:

1. Go to Portal > Look and Feel.
2. Go to the Return Portal Settings section.

3. Open the General sub-section.
4. Enable the Display SKU for product items toggle.
5. Click the save icon.

Item Actions Descriptions

Define whether to display descriptions for item actions such as refund, exchange for another product, etc.

To define whether to display descriptions for item actions:

1. Go to Portal > Look and Feel.
2. Go to the Return Portal Settings section.

3. Open the General sub-section.
4. Enable the Display descriptions for item actions toggle.
5. Click the save icon.

Variant Selection Screen

Define how product variant options are displayed in the return portal, whether as a text list or with details and images. This setting only applies to exchanges.

You can set this to one of the following: 

• Only View as Items is displayed
• Only View as Options is displayed
• Both options are offered, View as Items is the default
• Both options are offered, View as Options is the default

To define how to display variants:

1. Go to Portal > Look and Feel.
2. Go to the Return Portal Settings section.

3. Open the General sub-section.
4. Select your preferred setting under the Variant Selection Screen dropdown.
5. Click the save icon.

Option Selection Display

Define when the return actions can be selected, as well as the layout of the options in the return portal.

To define how to display the selection options:

1. Go to Portal > Look and Feel.
2. Go to the Return Portal Settings section.

3. Open the General sub-section.
4. Select whether you want customers to select an action directly from the item selection screen or on a separate page.
5. Select the order in which option buttons are displayed, either vertically or horizontally.
6. Click the save icon.

Resolution Selection Display

Define the order that resolutions and return methods are displayed in the portal.

To define the resolution selection screen order:

1. Go to Portal > Look and Feel.
2. Go to the Return Portal Settings section.

3. Open the General sub-section.

4. Select the order you want resolutions and return methods to be displayed on the Select Resolution Page of the portal. To the right of the settings, you can see a preview of what the selected configuration will look like.

5. Click on the save icon.

Return Portal Background

Under the Return Portal > Backgrounds section of the Portal > Look and Feel page, you can customize your return portal’s background color, add a background image, and change the opacity of your return portal.

• Page Background: Set whether you want the return portal page to have a color background or an image as a background.
  • If you select Color, you can choose the page background color you want.
  • If you select Image, you can upload the page background image you want, and set whether you want the image to stretch or repeat. To display a single, large image on the background, select Stretch.

• Portal Background: Set your portal’s background color, and its opacity. To make your portal transparent, set your Portal Background Opacity to 0.

Tracking Portal Customization

Under the Tracking Portal section of the Portal > Look and Feel page, you can customize elements that are specific to your tracking portal.

Keep in mind that settings such as fonts, colors, and border radius for your tracking portal are set together with those for your return portal in the General Settings section of the Portal > Look and Feel page.

Tracking Portal Settings

Under the General section of the tracking portal customization settings, you can configure what appears on your tracking portal and how.

• Delivery Date: Configure whether to show the estimated delivery date on the tracking portal when available.

• Shipment Not Found Message: Configure how you want the Shipment Not Found message to be displayed: as an error message, as an info message, or as a warning message. 

Tracking Portal Background

Under the Tracking Portal > Backgrounds section of the Portal > Look and Feel page, you can customize your tracking portal’s background color, add a background image, and change the opacity of your tracking portal.

• Page Background: Set whether you want the tracking portal page to have a color background or an image as a background.
  • If you select Color, you can choose the page background color you want.
  • If you select Image, you can upload the page background image you want, and set whether you want the image to stretch or repeat. To display a single, large image on the background, select Stretch.

Portal Background: Set your portal’s background color, and its opacity. To make your portal transparent, set your Portal Background Opacity to 0.