Advanced Styling Customization

Last Updated: April 4, 2024

To embed your portal into a custom page and customize your styling in more advanced ways, it’s recommended to get the help of an experienced developer to implement these advanced customizations. 

Table of Contents

Embedding Your Portal

Embedding Store Credit Widgets

CSS Styling Customization

Styling Examples

Embedding Your Portal

To embed your return portal or tracking portal into a specific page of your website, use one of the following methods.

Note: The same embed script can be used for both your return portal and your order tracking portal. ReturnGO recognizes which portal it is based on the custom URL that you have configured in the dashboard.

Embedding the Portal in Any Page on Your Store

Simply add this line to your theme in the place where you want the portal to appear:

<div id="ReturngoPortalEmbedding" style="position: relative; display:block; min-height: 600px; background-color: #FFFFFF"></div> 

Embedding the Portal in an HTML Page

To embed your portal into an HTML page:

  1. Add these lines to the page HEAD section of your new page:
<script src="https://static.returngo.ai/master.returngo.ai/returngo.min.js" defer="defer"></script>
<script type="application/javascript">
   window.ReturnGO = {
       shop: 'shopname.myshopify.com', //Your shop URL without https://
       currency: {
           active: 'USD', //The portal currency
           rate: '1.0', //The conversion rate between your portal currency and your main store currency, if they are different
       },
       locale: 'en', //The locale to display
   };
</script>

2. Add this line to the page BODY section where you want the portal to appear:

<div id="ReturngoPortalEmbedding" style="position: relative; display:block; min-height: 600px; background-color: #FFFFFF"></div> 

Embedding the Portal in a SPA (Single Page Application)

For single page applications, you can follow the previous steps for embedding the portal in an HTML page with one additional step:

  • Add this line before the js script is added:
window.returnGoCanBeRun = true;
For example, in a React app, the portal component might look like this:
export default function ReturnPortal() {
 useEffect(() => {

   const script = document.createElement('script');
   script.src =
     'https://static.returngo.ai/master.returngo.ai/returngo.min.js';
   script.async = true;
   window.returnGoCanBeRun = true;
   document.body.appendChild(script);

   window.ReturnGO = {
       shop: 'shopname.myshopify.com', //Your shop URL without https://
       currency: {
           active: 'USD', //The portal currency
           rate: '1.0', //The conversion rate between your portal currency and your main store currency, if they are different
       },
       locale: 'en', //The locale to display
   };

   return () => {
     document.body.removeChild(script);
   };
 }, []);

 return (
   <div
      id="ReturngoPortalEmbedding"
     style={{
       position: 'relative', 
       display: 'block',
       minHeight: '600px',
       backgroundColor: '#FFFFFF',
     }}
   ></div>
 );
}

Adding a Direct Link to Return an Order from the Account or Order Pages

Here's an example of how to add a "Return" link that opens the specific order, from the account or order pages. This is based on the Debut theme. Keep in mind that your specific page and paths may be different - this is just an example.

<table class="responsive-table">
<thead>
<tr>
<th scope="col">{{ 'customer.orders.order_number' | t }}</th>
<th scope="col">{{ 'customer.orders.date' | t }}</th>
<th scope="col">{{ 'customer.orders.payment_status' | t }}</th>
<th scope="col">{{ 'customer.orders.fulfillment_status' | t }}</th>
<th scope="col">{{ 'customer.orders.total' | t }}</th>
<th scope="col">Action</th>
</tr>
</thead>

<tbody>

</tbody>

</table>

To clarify, the only code above that is specific to ReturnGO is the link to the portal, including the order ID and email parameters:

<a href="/a/return?orderId={{ order.name | url_encode}}&email={{ order.email |url_encode}}">Return</a>  

Creating a Multi-Store Portal

To create a multi-store portal where customers can submit their return requests for any of your stores, use the following code snippet.

This code snippet is an example of how to create a portal with store-selection logic. 

Paste this snippet into your custom portal page, instead of the default custom portal code. Make sure to edit the code to match your use case - specifically, implement the store selection logic that applies to your business where it says "TODO".

 <div id="getOrder">
   <h1>Enter Your Order Number</h1>
   <form id="orderForm">
       <label for="orderNumber">Order Number:</label><br>
       <input type="text" id="orderNumber" name="orderNumber"><br>
       <input type="submit" value="Submit">
    </form>

   <script>
        // Get a reference to the form element
       const form = document.getElementById('orderForm');
   
    // Add an event listener for the submit event
       form.addEventListener('submit', function(event) {
           // Prevent the form from being submitted
           event.preventDefault();
           
// Get the value of the orderNumber input field
           const orderNumber = document.getElementById('orderNumber').value;
           const getOrder = document.getElementById('getOrder');
           getOrder.hidden = true;
           // Print the order number to the log
           console.log(orderNumber);
          
 let shop = undefined;
           //TODO: adjust this store selection logic as needed
           if (orderNumber.endsWith('_1')) {
               shop = "my-first-store.myshopify.com";

           } else if (orderNumber.endsWith('_2')){
                shop = "my-second-store.myshopify.com";

           } else if (orderNumber.endsWith('_3')){
                shop = "my-third-store.myshopify.com";

           } else {
               //TODO: adjust the error message as needed
               alert("Please make sure to type the full order number in the format #12345_1");
               getOrder.hidden = false;
            }

           if (shop) {
               if (!window.ReturnGO) {
                   window.ReturnGO = {}
                }

               window.ReturnGO.shop = shop;
               const portalDiv = document.createElement('div');
               portalDiv.id = 'ReturngoPortalEmbedding';

               const placeholder = document.getElementById('placeholder');
               placeholder.appendChild(portalDiv);
               const scriptTag = document.createElement('script');
               scriptTag.src = `https://static.returngo.ai/master.returngo.ai/returngo.min.js?shop=${shop}`;
               placeholder.appendChild(scriptTag);
               const currentUrl = window.location.href;

               // Create a new URL object from the current URL
               const url = new URL(currentUrl);

               // Use the URLSearchParams object to set the "param" parameter
               const params = new URLSearchParams(url.search);
               params.set("orderId", orderNumber);

               // Update the URL object with the new search parameter
               url.search = params.toString();

               window.history.pushState({}, "", url);
           }
       });
   </script>
</div>
<div id="placeholder"></div>

Embedding the Store Credit Widget

To embed the ReturnGO widget that shows customers their store credit balance into a specific place on the cart or account page, simply add the appropriate line to your theme in the place where you want the panel to appear.

Note: The account and cart panels are only visible for customers who have received store credit from ReturnGO.

For the account panel:

<div id="ReturngoAccountEmbedding"></div>

For the cart panel:

<div id="ReturngoCartEmbedding"></div>

Hiding the Store Credit Widget

To hide the store credit widget, add the appropriate line to your theme.

For the account panel:

<style type="text/css">#returnGoAccountWidget { display: none; }</style>

For the cart panel:

<style type="text/css">#returnGoCartWidget { display: none; }</style>

CSS Style Customization

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.

Portal Isolation

The ReturnGO portal has 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 returns page.

To customize your portal style in isolated mode:

  1. Go to Settings > Portal > Look & Feel.
  2. Open 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 to apply.

Tip: When pasting custom CSS into the dashboard, make sure to use proper CSS syntax and not HTML markup.

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.

All the style examples given here are intended for use in custom CSS in isolated mode. To use them in non-isolated mode, make sure to place them in a style element.

Custom Style Examples

Here are a few examples of customizations you can do using custom CSS.

Increase the Margin of the Top of the Portal

To adjust the spacing above your portal to make sure it doesn't collide with your banner, add these lines to your theme, replacing “110” with the relevant number:

#ReturngoPortalEmbedding {
   margin-top: 110px
}

Change the Border Radius of Buttons

To adjust the border radius of action buttons, add these lines to your theme, replacing “10” with the relevant number:

#returnGoAssistant #returnGoPopup .ReturnGO_Button-module_button {
   border-radius: 10px !important;
}

Change the Border Radius of Text Input Fields

To adjust the border radius of text input field boxes, add these lines to your theme, replacing “10” with the relevant number:

#returnGoAssistant #returnGoPopup .ReturnGO_InputField-module_input  {
   border-radius: 10px !important;
}

Change the Size of Radio Buttons/Checkboxes

To adjust the size of radio buttons and checkboxes, add these lines to your theme, replacing “1.5” with the relevant number:

#returnGoAssistant #returnGoPopup .ReturnGO_CheckBox-module_checkmarkContainer {  
transform: scale(1.5); 
}
#returnGoAssistant #returnGoPopup .ReturnGO_RadioButton-module_checkmark,
   #returnGoAssistant #returnGoPopup .ReturnGO_RadioButton-module_checkmarkChecked { 
   transform: scale(1.5);
}

Change Font Sizes

To adjust the font sizes, add these lines to your theme, replacing “12” with the relevant number:

#returnGoAssistant #returnGoPopup * {
       font-size: 12px !important;
}

#returnGoAssistant #returnGoPopup .ReturnGO_InputField-module_input {
       font-size: 12px !important;
}

Remove Opacity from the Find My Order Button When Disabled

To remove the opacity from the Find My Order button when disabled (before the order information is inputted), add these lines to your theme:

#returnGoAssistant .ReturnGO_Button-module_button.ReturnGO_Button-module_disabled, #returnGoCartWidget .ReturnGO_Button-module_button.ReturnGO_Button-module_disabled, #returnGoAccountWidget .ReturnGO_Button-module_button.ReturnGO_Button-module_disabled { 
   opacity: 1 !important;
}

Adding a Background Image to a Custom Portal Page

Coming soon.

Changing the Background Color of the Portal

Coming soon.

Additional Useful Class Names

Layout

  • Header: ReturnGO_Header-module_header
  • Body: ReturnGO_Common-module_content
  • Footer: ReturnGO_Footer-module_footer

Button

ReturnGO_Button-module_button

  • Disabled: ReturnGO_Button-module_disabled
  • Small: ReturnGO_Button-module_sm
  • Medium: ReturnGO_Button-module_md
  • Primary: ReturnGO_Button-module_primary
  • Secondary: ReturnGO_Button-module_secondary

Input

ReturnGO_InputField-module_input

  • Error: ReturnGO_Button-module_error
  • Label: ReturnGO_InputField-module_label

Checkbox

ReturnGO_CheckBox-module_checkBox

  • Checkmark container: ReturnGO_CheckBox-module_checkmarkContainer

Radio Buttons

ReturnGO_RadioButton-module_radioButton

  • Checkmark: ReturnGO_RadioButton-module_checkmark
  • Checked checkmark: ReturnGO_RadioButton-module_checkmarkChecked