Customizing Your Return Portal

Make your return portal reflect your brand in order to provide a seamless experience for your customers. 

Customize your return portal to match your brand style, from basic style customizations to more advanced customizations using HTML.

Requirements

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

1. Admin-level permissions in Shopify.
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.

Font

Set the font family to be applied to texts in the return portal. 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 > General Settings.
2. In the Font field, type the font name.
3. Click on the save icon.
4. 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, typically by going to Shopify Admin > Online Store > Themes. Alternatively, 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. For example, use truetype for .ttf files, opentype for .otf files, etc.

Note: If these steps do not work, please consult a web developer for further assistance.

If the font does not appear on some texts, your store’s styling or theme may be conflicting with or overpowering ReturnGO’s styling scripts. In such cases, you can build a custom style script with the !important rule, and add it in theme.liquid, typically just above the </head> element

<style> #ReturnGOPortalEmbedding * {   font-family: “font_name” !important;   } </style>

In this example: #ReturnGOPortalEmbedding * represents the elements the style script should apply on; which, in this case, are all elements in the return portal. The font_name represents the name of the font you want to apply to #ReturngoPortalEmbedding *. The !important rule adds more weight to the customized property in case there is conflicting styling elsewhere in the store’s theme.

You can check out the ReturnGO Style Customization page for the most common element class names you can use in building your custom style scripts.

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.

To change the return portal colors:

1. Go to Portal > Look and Feel > General Settings.
2. In the Colors section, set the color for each element.
3. You can either type the hex code in the color field or click the color tile to open the color picker.
4. Click on the save icon.
5. Reload the return portal to see the results.

If the color doesn’t appear on some texts, your store’s styling/theme may be conflicting with or overpowering ReturnGO’s styling scripts. In such cases, you can build a custom style script pointing to the relevant element or class, while adding the !important rule to each style declaration, then adding the custom style script to theme.liquid.

<style> p.ReturnGO_Legend-module_legend {   color: #123456 !important;   } </style>

In this example: p.ReturnGO_Legend-module_legend represents the elements the style script should apply on; which, in this case, are all subtitle elements. #123456 represents the custom color you want to apply to p.ReturnGO_Legend-module_legend. The !important rule adds more weight to the customized property in case there is conflicting styling elsewhere in the store’s theme.

You can check out the ReturnGO Style Customization page for the most common element class names you can use in building your custom style scripts.

Minimal Top Offset

Define how the return portal page will be positioned while navigating through the returns process, especially if there is content before or on top of the return portal. This setting only applies if the return portal is embedded on a custom page.

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

If you have embedded the return portal, then the issue might be that you’re testing the results on the starting page of the return portal, while the effects of the offset can only be seen on the item selection page and onwards.

To set the minimal top offset:

1. Go to Portal > Look and Feel > General Settings.
2. Type in the relevant percentage.
3. Click on the save icon.
4. Reload the return portal to see the results.

Display SKU for Product Items

Define whether product SKUs will be displayed in the return portal. If enabled, 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 display product SKUs:

1. Go to Portal > Look and Feel > Return Portal.
2. Toggle the Display SKU for product items to enable.
3. Click on the save icon.
4. Reload the return portal to see the results.

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 adjust how product variant options are displayed:

1. Go to Portal > Look and Feel > Return Portal.
2. Select the relevant option from the dropdown.
3. Click on the save icon.
4. Reload the return portal to see the results.

Option Selection Display

Define the order in which options are displayed in the return portal. You can set this to either a vertical or horizontal order.

To change the display order:

1. Go to Portal > Look and Feel > Return Portal.
2. Select the relevant option from the dropdown.
3. Click on the save icon.
4. Reload the return portal to see the results.

Advanced Style Customization

In addition to the built-in style customization options, you can customize your return portal using HTML style scripts.

A style script is an HTML script that enables you to modify a set of properties such as the size, color, and shape of an HTML element such as a text, a button, or a section of a webpage.

An internal style script is a script you can add in the <head> section of an HTML page and typically consists of four parts:

1. The <style> element.
2. The element selector. An element can be further refined using its ID or class.
3. The style declarations, which are typically a pairing of a style property and a preferred value.
4. The </style> element.

<style> .ReturnGO_Title-module_title {   font-family: “Poppins” !important;     color: #123456 !important;   } </style>

An internal style script starts with the <style> element, and ends with the </style> element. .ReturnGO_Title-module_title represents all elements of the class: ReturnGO_Title-module_title The style declarations are enclosed with braces { }. font-family and color represent the properties of the selected element you want to customize. “Poppins” and #123456 represent the value you want to apply to each property. The !important rule adds more weight to the customized property in case there is conflicting styling elsewhere in the store’s theme. Each style declaration should be terminated with a semicolon.

You can build your own custom style script and apply it to your store in cases where:

• Your desired styling is beyond what is available in Portal > Look and Feel.
• Your store’s theme overpowers or conflicts with the styling features of ReturnGO.

Here are some basic tips on how you can build and implement your custom style script.

Class Names

These are the most common element class names found in the return portal:

• Header: .ReturnGO_Header-module_header
• Body: .ReturnGO_Common-module_content
• Footer: .ReturnGO_Footer-module_footer
• Title: .ReturnGO_Title-module_title
• Subtex : .ReturnGO_Legend-module_legend
• Input Labels: .ReturnGO_InputField-module_label
• Input Box: .ReturnGO_InputField-module_input
• Buttons (active): .ReturnGO_Button-module_button
• Buttons (inactive): .ReturnGO_Button-module_disabled
• Checkbox: .ReturnGO_CheckBox-module_checkBox
• Radio Button: .ReturnGO_RadioButton-module_radioButton
• Home Page Content Text: .ReturnGO_SnippetWrapper-module_snippetWrapper

More class names are available on the ReturnGO Style Customization page.

Styling Properties and Values

These are the most commonly customized style properties and values for the return portal:

• Texts
• Font or font family: Must be a font already imported into the theme.

• font-family: “Poppins” !important;
• Font size: small, medium, large, larger, or %.
• font-size: larger !important;
• font-size: 200% !important;
• Color: Typically a hex code or a color keyword.
• color: red !important;
• color: #123456 !important;
• Text-align: Can be left, right, center, justify.
• text-align: center !important;
• Text-transform: Can be capitalize, uppercase, lowercase.
• text-transform: uppercase !important;
• Containers
• Display: This is used to hide a specific element or class of elements.

• display: none !important;
• Margin or margin-top: Can be a pixel value or %.
• margin-top: 5% !important;
• Padding: Can be a pixel value or %.
• padding: 5% !important;
• Background-color: Typically a hex code or a color keyword.
• background-color: red !important;
• background-color: #123456 !important;
• Border radius: Can be a pixel value or %.
• border-radius: 25px !important;
• Opacity: Can be a pixel value or %.
• opacity: 1 !important;
• Transform: Enables you to rotate, scale, move, and skew elements.
• transform: scale(1.5) !important;

Theme.Liquid

Theme.liquid is an open-source template language created by Shopify that holds theme-related data for your store. 

When dealing with custom style scripts, it is important to know how to access theme.liquid as this is where you will eventually place the custom scripts.

To add a custom script in theme.liquid:

1. In Shopify Admin, go to Online Store > Themes.
2. On the Themes page, click the 3-dot menu and choose EDIT CODE.
3. On the Edit Code page, choose theme.liquid in the left panel. The main area of the page will display the theme.liquid code.
4. Click on the main area and use CTRL+F to search for </head>.
5. Paste your custom style scripts immediately above the </head> element.
6. Click SAVE.
7. Reload the return portal to see the results.

Examples

Here are some examples of customization using HTML styling.

How to increase the top margin:

<style> #ReturngoPortalEmbedding {   margin-top: 5% !important;     padding-top: 2% !important;   } </style>

Adjust the values as needed. Add this custom style script in theme.liquid.

How to center-align the page text:

<style> .ReturnGO_SnippetWrapper-module_snippetWrapper * {   text-align: center !important;   } </style>

Add this custom style script in theme.liquid.

How to change the background color of the return portal:

<style> #returnGoWrapper, .ReturnGO_Common-module_content, .ReturnGO_Header-module_header, .ReturnGO_Footer-module_footer {   background-color: beige !important;   } </style>

Applies the same background color to multiple elements in the portal using only a single script. The background-color property accepts RGB, HLS, hex code, or color keywords. Adjust the value as needed. Add this custom style script in theme.liquid.

How to make the action buttons have rounded corners:

<style> .ReturnGO_Button-module_button {   border-radius: 25px !important;   } </style>

The pixel value denotes the size of the circular radius of the corners. Adjust the value as needed. Add this custom style script in theme.liquid.

How to prevent buttons from being transparent:

<style> .ReturnGO_Button-module_disabled {   opacity: 1 !important;   } </style>

The opacity property can take a value from 0 to 1. The lower the value, the more transparent the element becomes. Adjust the value as needed. Add this custom style script in theme.liquid.

Custom Portal Page

You can also host your portal on any web page, for a fully customizable and branded portal. Learn exactly how to embed your portal into any page.