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. This article explains what’s being done and what can be done in more detail.
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
Solid Color Background
Customize the Color of the Background
Note: the templates have the following code, but you need to change the hex code (i.e., color) to match your branding.
If you want a solid color background like Template 1 or Template 2, customize the background color by inserting the selector “body” and changing the hex code for the property “background-color".
Example: Template 2's code
/* ---- GLOBAL ---- */
/*Setting the background color*/
body {
background-color: #DFDAC3; }
Generally, we advise merchants to choose a background color that contrasts well with the logo for visual accessibility. If your logo is a dark color, we recommend using a light-colored background, and vice versa. Refer to the accessibility resources for help choosing visually accessible colors.
Make the Top Navigation Bar Transparent
Note: the templates have already done this for you.
The top navigation bar is preset to be white. To make the top navigation bar transparent, insert the following code:
/* ---- GLOBAL ---- */
/*Making the preset top nav bar transparent to show the background
color*/
.navbar-white {
background-color: transparent;
border: none; }
Make the Footer Transparent
Note: the templates have already done this for you.
The footer in the pages following the Landing Page where the buttons are is also preset to be white. To make the footer transparent, insert the following code:
/* ---- GLOBAL ---- */
/*Making the footer with the continue, previous, and finish buttons
transparent*/
.navbar-fixed-bottom,
.items-footer {
background-color: transparent !important;
border: none !important; }
Make the Container Background Transparent
Note: the templates have already done this for you.
If you want something like Template 1 and do not want any container backgrounds (e.g., the gray containers in the original Return Center behind all the content), you will need to add some code to make all the container backgrounds transparent.
/* ---- GLOBAL ---- */
/*Making the preset content containers transparent to show the
background color*/
.start-grid-wrapper,
#instruction-grid-wrapper,
.notified-grid-wrapper,
.gift-grid-wrapper,
#gift-instruction-grid-wrapper,
.info-grid-wrapper,
.warranty-grid-wrapper,
.orders-grid-wrapper,
.address-grid-wrapper,
.items-grid-wrapper,
.exchange-grid-wrapper,
.review-grid-wrapper,
.status-grid-wrapper,
.invalid-grid-wrapper {
background-color: transparent !important;
border: none; }
For reference, the content containers correspond to the following pages:
Landing Page
.start-grid-wrapper,
#instruction-grid-wrapper,
Notification Page
.notified-grid-wrapper,
Gift Return
.gift-grid-wrapper,
#gift-instruction-grid-wrapper,
Third Party Warranty
.info-grid-wrapper,
.warranty-grid-wrapper
Orders Page
.orders-grid-wrapper,
Address Page
.address-grid-wrapper,
Items Page
.items-grid-wrapper,
Full Catalog Exchange Page
.exchange-grid-wrapper,
Review Page
.review-grid-wrapper,
Summary Page
.status-grid-wrapper,
Invalid Return Center Page
.invalid-grid-wrapper
Image Background
Insert Background Image
If you are using Template 3 with an image as your Return Center background, you can change the image by replacing the image URL (the URL of the page with only the image) inside “background-image” (note: remember to keep the image URL within quotes).
To get the image URL (e.g., "https://images.unsplash.com/photo-1596433904500-97b901c5d274?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2564&q=80"), drag the image to a new tab or page, or right-click the image and select "Open Image in New Tab".
Example: Template 3’s code
/* ---- GLOBAL ---- */
/*Setting the background image*/
body {
background-image: url("https://images.unsplash.com/photo-1596433904500-97b901c5d274?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2564&q=80");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; }
We recommend testing out the background image by saving, publishing, and refreshing your Return Center to see whether the logo and text are still legible with your chosen image. Typically, simple background images with minimal detail and colors that contrast well with the text and logo work best.
Change the Background Image’s Lightness or Darkness
To increase the contrast between your background image, text, and logo, you can change the value (lightness or darkness) of the background image.
To lighten the background image, replace “background-image” code with the following:
background-image: linear-gradient(rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.2)),
url("https://images.unsplash.com/photo-1596433904500-97b901c5d274?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2564&q=80")
Adjust the 4th value of rgba to adjust the lightness: the closer to 0, the less light, and the closer to 1, the more.
To darken the background image, replace “background-image” code with the following:
background-image: linear-gradient(rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2)),
url("https://images.unsplash.com/photo-1596433904500-97b901c5d274?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2564&q=80")
Adjust the 4th value of rgba to adjust the darkness: the closer to 0, the less dark, and the closer to 1, the more.
 Original |  Lightened |  Darkened |
Content Containers
Content containers are the rectangular boxes behind the page’s content as seen in Template 2 and Template 3. You can customize properties such as background-color, width, border-radius, etc.
Example: you want to add a content container on the Landing Page.
Copying and pasting the following CSS into your code will create a content container for the Landing Page:
/* -- Landing Page: Content Container -- */
#start-return .start-form {
background-color: #FFFFFF !important;
box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
max-width: 500px;
padding: 60px; }
Example: you want to round the corners for the Landing Page’s content containers.
The original code above does not include border-radius property, which we will also explore in our button customizations. Adding a border-radius and setting it greater than 0px will round the corners.
The higher the border-radius value, the rounder the corners and vice versa. Play around with the value until you achieve the desired roundness.
Final code:
/* -- Landing Page: Content Container -- */
#start-return .start-form {
background-color: #FFFFFF !important;
box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
max-width: 500px;
padding: 60px;
border-radius: 10px; }
 No border radius |  border-radius: 10px |
Resources
Accessible Colors
Coding Help
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.