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.
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”.
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.
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.