All Collections
Branding the Return Center:
How to Customize the Return Center Templates (Classic Mode)
An Overview of the Return Center Template Customization Articles (Classic Mode)
An Overview of the Return Center Template Customization Articles (Classic Mode)

Learn how you can use the Return Center template customization articles to personalize the templates to match your branding.

Kaylie avatar
Written by Kaylie
Updated over a week ago

Overview

Code Customization

The templates will have all the following code already, but you will need to customize the code to match your branding, e.g., color, font, etc. The articles explain what’s being done and what can be done in more detail, walking step-by-step through changing the template code we provided to customize specific elements of your Return Center.

Any text with this font and inside this gray box or with a gray
highlight (shown below) is code except for text within /* */,
i.e., comments.

/* Comments label the sections of the code depending on which page(s)
we are editing and any notes. We will leave the comments in the
articles to help you identify which section's code we are referring to
and if you want to copy and paste the notes in your code for easier
future reference as to what's being done. */

Any text in this gray highlight is also code, and all the above applies.

Please note you must be on Classic Mode in your Customize Settings. These templates do not apply to Modern Mode.


Table of Contents


Article Directory


Template Directory

If you like any of the templates, feel free to go to the specific article to copy and paste the exact code into your admin portal.

Minimalistic Return Center with a solid crème color background and no content containers
Minimalistic Return Center with a solid tan color background and content containers with box shadows
Modern Return Center with an image background of clothes and content containers with box shadows



Relevant Pages in the Return Center

  • Landing Page: the first page your shopper will land on when clicking the returns link, where they will start their return by inputting their email and/or order number

  • Notification Page: if you selected Order Lookup by Order Email in Policy Settings (Settings > Returns - Originate > Policy > Advanced > Order Lookup), shoppers will see this page after submitting their email and are instructed to look in their inbox for a link to continue their return

  • Orders Page: if you selected Order Lookup by Order Email in Policy Settings (Settings > Returns - Originate > Policy > Advanced > Order Lookup), shoppers get to this page after clicking on the returns link in the verification email and will see all their recent orders associated with that email

  • Address Page: where shoppers confirm/edit their shipping address

  • Items Page: shows all the items the shopper purchased in a specific order

    • Items Selection Page (i.e., Item Return Pop-up Modal): after selecting what item to return, shoppers provide information about why they’re making the return and choose their return type

    • Variant Exchange Pop-up Modal: shows all variants (i.e., same item but different version, e.g., color or size) available for a variant exchange

  • (Full Catalog) Exchanges Page: shows all the items available for a full catalog exchange

  • Review Page: allows the shopper to review their whole return before completing the process

  • Summary Page: after creating an RMA (i.e., return), this page shows the return status, next steps (e.g., shipping instructions if applicable), a CTA section you can use for upselling, and an overview of the shopper's return

  • Gift Return Page: Alternative landing page for shoppers to return gifts

  • Third-party Warranty Pages: shoppers create an RMA if they purchased your product from a third-party merchant (e.g., Best Buy)

    • Third-party Warranty Order Info Page (i.e., Third-party Warranty Landing Page): where shopper order information is collected to begin the third-party warranty claim process

    • Third-party Warranty Address Page: shoppers can confirm/edit their shipping address

    • Third-party Warranty Product Select Page: allows shoppers to select items for their claim

      • Third-party Warranty Catalog Pop-up Modal: shoppers search for the item(s) to add to their claim

      • Third-party Warranty Item Return Pop-up Modal: shopper enters return details about their warranty claim product

      • Third-party Warranty Can't Find Your Product Page (i.e., Add a Product Warranty Page: “Can’t Find Your Product?” Pop-up Modal): if the shopper cannot find a product, this is where they manually input product information

    • Third-party Warranty Review Page: shows the shopper their third-party claim details before it is submitted

    • Third-party Warranty Summary Page: after submitting a warranty claim, this page shows the return status, next steps (e.g., shipping instructions if applicable), a CTA section you can use for upselling, and an overview of the shopper's warranty claim

  • Invalid Page: shown to shopper if their return is invalid, cannot be found, or is expired

*IMPORTANT NOTE: You cannot remove or reorder pages in the Return Center flow.



Coding Overview

Inspect Element Tool

The Inspect Element tool is something you can use to view the HTML and CSS of the page in the current browser. To access the tool, just right-click on a Windows computer and either control-click or two-finger click on a Mac > click “Inspect”.

Inspect Element tool is the last option on the Windows right-click / Mac control-click or two-finger-click pop-up menu

Once you have done that, you should see the page’s HTML, CSS, and other various information.

The Inspect tool will spotlight the code of whichever element you accessed Inspect from, e.g., if you inspect a button, you will see the HTML and CSS for that button highlighted in the pop-up window.

Inspect Element Tool Tips

Use the Inspect Select tool in the top-left corner (i.e., the box with an arrow on it) to more easily select an element on the page to inspect.

Click the three dots on the top-left bar to access the “Dock side” setting to reposition the Inspect Element tool dock to wherever is easier for you to see your website and the code at the same time.

Dock side is the first setting on the Inspect Element tool dock’s three dots menu


CSS !important Rule

Using the !important rule in CSS places more importance than normal to an element’s property and value, resultantly overriding any previous styling rules for that element’s property. Generally, you only want to use !important sparingly as it can make the CSS code confusing and debugging difficult, but you will need to use !important to override some of ReturnLogic’s Return Center presets.



Resources

Accessible Colors

Coding Help

Free, Open-source Fonts

Web-safe Fonts

ReturnLogic Help



We're here to help! Email us at support@returnlogic.com or use the live chat inside the platform with any questions or feedback. However, if you require further customization, we recommend working with your internal development team or connecting with an agency partner.



Did this answer your question?