All Collections
Branding the Return Center:
How to Customize the Return Center Templates (Classic Mode)
Return Center Template 1: Minimalistic, Clean Theme, Solid Color Background (Classic Mode)
Return Center Template 1: Minimalistic, Clean Theme, Solid Color Background (Classic Mode)

Copy and paste the provided code, and use the Return Center template articles to learn how to change the code to match your branding.

Kaylie avatar
Written by Kaylie
Updated over a week ago

*IMPORTANT NOTE: The Custom CSS section of the template code belongs on the first page of the Customize Settings in the “Custom CSS” input field in the admin portal (Settings > Returns-Originate > Customize > Returns Center > Landing Page: Global). The “Details Section HTML” template code belongs in the “Details Section” input field on the same page in the admin portal.

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

Icon made by Freepik from Flaticon.

To learn how to customize the templates, check out the section How to Customize the Return Center Templates within the Branding the Return Center Help Center collection.


Overview

Code Customization

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.


Table of Contents

Note: The Table of Contents calls out most major sections, but not everything, so if you don’t see what you’re looking for here, it’s best to go directly to the code to see if we have it.

  • Global Settings

    • Background

    • Font Design System

      • Headings

      • General Paragraph/Body Text

        • Hyperlinks

      • Forms

    • Spacing System

    • Buttons

    • Forms

  • Landing Page

    • Spacing

    • Start Return Button

  • Order Lookup

    • Email Notification Page

    • Orders Page

  • Gift Return Page

    • Start Return Button

  • Address Page

    • "Can’t Find the State/Region You’re Looking For?” Tertiary Button Link

    • Add-on Form Elements

    • Cancel “X” Button

  • Items Page

    • Fonts

    • Items Selection Page (i.e., Item Return Pop-up Modal)

      • Round Corners

      • Buttons

    • Variant Exchange Pop-up Modal

      • Add Item Button

  • Full Catalog Exchanges Page

    • Top Bar

    • Sidebar Product Category Tab States

    • Main Content Area

      • Item Card

  • Review Page

  • Summary Page

    • Rounded Corners

    • Return Status Container

      • Timeline

      • Checkmark Message Callout

      • Footer

    • Next Steps Container

      • Print Shipping Label/Instructions Button

      • Content

    • Call-to-action Content Block

      • CTA Button

  • Third-Party Warranty Claim Pages

    • Order Info Page (i.e., Landing Page)

      • Calendar Pop-up Modal

    • Buttons

      • Buttons / Links

    • Address Page

      • "Can’t Find the State/Region You’re Looking For?” Tertiary Button Link

    • Product Select Page

      • Add A Product Button

      • Catalog Pop-up Modal

      • Item Return Pop-up Modal

    • Buttons

      • “Can't Find Your Product?” Pop-up Modal

    • Buttons

    • Review Page

    • Summary Page

  • Invalid Page

    • Start a New Return Button



Custom CSS

/* --- GLOBAL: TEMPLATE 1 --- */

/*X close icon*/

.modal-header .fa-times:before {

color: #D8352B;

}

/* -- GLOBAL SETTINGS: BACKGROUND -- */

/*Setting the background color*/

body {

background-color: #FFF9F2;

}

.navbar-white {

/*Making the preset top nav bar transparent to show the background color*/

background-color: transparent;

border: none;

/*Adding spacing (note a nav bar layer has margin-top: 10px and margin-bottom:

35px so adding spacing to that)*/

margin-top: 46px;

margin-bottom: 21px;

}

/*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;

}

/*Making the footer with the Continue, Previous, and Finish buttons transparent*/

.navbar-fixed-bottom,

.items-footer {

background-color: transparent !important;

border: none !important;

}

/* -- GLOBAL SETTINGS: FONT DESIGN SYSTEM -- */

/*HEADINGS*/

/*Summary Page CTA Content Block Title*/

h1 {

font-family: 'Poppins', sans-serif !important;

font-size: 36px !important;

font-weight: 700;

line-height: 1.3;

color: #1C1A1E;

}

/*

h2: Landing Page Title

h3: Every page title after the Landing Page

h4: Card titles (e.g., Landing Page “How It Works” text, Items Page Item Card item name, etc.), Items Page Item Card non-returnable messages, Variant Exchange Pop-up Modal's "Select Variant" text, Review Page container titles (e.g., “Shipping,” “Returning,” etc.), Summary Page CTA Content Block Message

*/

h2, h3, h4 {

font-family: 'Poppins', sans-serif !important;

line-height: 1.3;

color: #1C1A1E;

}

/*Landing Page Title*/

h2 {

font-size: 40px !important;

font-weight: 700;

}

/*Every page title after the Landing Page*/

h3 {

font-size: 32px !important;

font-weight: 700;

}

/*Card titles (e.g., Landing Page “How It Works” text, Items Page Item Card item name, etc.), Items Page Item Card non-returnable messages, Variant Exchange Pop-up Modal's "Select Variant" text, Review Page container titles (e.g., “Shipping,” “Returning,” etc.), Summary Page CTA Content Block Message*/

h4 {

font-size: 18px !important;

font-weight: 700 !important;

}

/*

h5: Page descriptive text (below h3), Review and Summary Pages product name text

h6: Third-party Warranty Add a Product Page Item Pop-up Modal item details

p: General paragraph text

*/

h5, h6, p {

font-family: 'Josefin Sans', sans-serif !important;

font-size: 16px;

font-weight: 400;

line-height: 1.65;

color: #1C1A1E;

}

/*GENERAL PARAGRAPH/BODY TEXT*/

/*p (general paragraph text) edited above*/

/*General body text, button text, and shipping method description*/

body {

font-family: 'Poppins', sans-serif !important;

font-size: 16px;

}

/*Descriptor text, e.g., Return Type Button description, Full Catalog Exchange Item Card variant detail*/

.text-muted {

color: #6E6D6F;

}

/*Non-error red highlight text, e.g., item’s non-returnable messages on the item card (h4) and "required" text*/

.color-red {

font-size: 16px;

}

/*a = Hyperlinks*/

/*All links*/

a {

font-family: 'Josefin Sans', sans-serif !important;

font-size: 16px !important;

color: #7C4DBE;

background-color: transparent !important;

text-decoration: none !important;

}

/*Unvisited link*/

a:link {

font-family: 'Josefin Sans', sans-serif !important;

font-size: 16px !important;

color: #7C4DBE;

background-color: transparent;

text-decoration: none;

}

/*Default is blue – don't want link and visited link to be different colors because shopper will make different returns using same links*/

a:visited {

color: #7C4DBE;

background-color: transparent;

text-decoration: none;

}

/*Mousing over a hyperlink*/

a:hover {

color: #9400D3;

background-color: transparent;

text-decoration: underline !important;

}

/*"Use anyway" link in invalid address pop-up*/

a.invalid-address-override:hover {

color: #9400D3;

background-color: transparent;

text-decoration: underline !important;

}

/*FORMS*/

/*Form labels and identifier text for text boxes, buttons, selections, etc.*/

label {

font-family: 'Josefin Sans', sans-serif !important;

font-size: 16px !important;

color: #1C1A1E;

margin-bottom: 4px;

}

/*Form input text*/

.form-control {

font-family: 'Josefin Sans', sans-serif !important;

font-size: 18px !important;

font-weight: 400 !important;

color: #1C1A1E;

}

/*Error notification text to inform shopper that inputted form information is incorrect, e.g., "Email Address is required" */

.label-error {

font-family: 'Josefin Sans', sans-serif !important;

font-size: 16px !important;

font-weight: 400;

margin-top: 8px;

margin-bottom: 0 px;

}

/* -- GLOBAL SETTINGS: SPACING SYSTEM -- */

/*Decreasing space between title and subtitle*/

.rl-page-header {

margin: 0 0 16px;

}

/*Creating more space between subtitle and cards; existing padding-bottom: 15px !important*/

.sub-header {

margin-bottom: 25px;

}

/* -- GLOBAL SETTINGS: BUTTONS -- */

/*Rounded corners*/

.btn {

border-radius: 8px;

font-size: 16px !important;

}

/*PREVIOUS BUTTON*/

.items-footer .btn-danger {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 32px;

padding-right: 32px;

}

.items-footer .btn-danger:active,

.items-footer .btn-danger:hover {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

}

/*CONTINUE BUTTON*/

.items-footer .btn-success {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 32px;

padding-right: 32px;

}

.items-footer .btn-success:disabled,

.items-footer .btn-success:disabled:hover {

color: #FFFFFF !important;

background-color: #DCDAFF !important;

border-color: #DCDAFF !important;

}

.items-footer .btn-success:active,

.items-footer .btn-success:hover {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

}

/*INACTIVE BUTTON*/

.btn[disabled],

.btn[disabled]:hover {

color: #FFFFFF !important;

background-color: #DCDAFF !important;

border-color: #DCDAFF !important;

}

/* -- GLOBAL SETTINGS: FORMS -- */

/*

input: a form input where the shopper will enter data, e.g., single-line text input field, email field, etc.

select: drop-down list

textarea: multi-line text input

*/

input,

select,

textarea {

border-radius: 8px;

}

/*Customizing active form element (i.e., shopper typing in input field)*/

input:focus,

select:focus,

textarea:focus {

border: 2px solid #7C4DBE !important;

box-shadow: offset 4px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 77, 190, 0.6);

}

/*Added form field (affects both the Items Selection Page (i.e., Item Return

Pop-up Modal) and Third-Party Return Pop-up Modal*/

.modal-content .color-accent-banding {

border-radius: 8px;

background-color: #EDECFF;

margin-bottom: 12px;

}

/* --- LANDING PAGE --- */

/*hr is the gray divider line on the Landing Page and Gift Return Page between the

Welcome Title and Instructions and on the Email Notification Verification page;

here I'm "deleting" the line*/

.start-form hr,

.gift-form hr {

margin: 0px;

border-top: 0px;

}

/*Making the Landing Page content sections smaller*/

.start-form,

.instructions-container {

max-width: 568px;

}

/*"Sorry, we couldn't find that order." message*/

.alert-danger {

color: #B52E26;

background-color: #FEE6E5;

border-color: #D8352B;

}

/* -- LANDING PAGE: SPACING -- */

/*startForm is the Landing Page email and order number form;

increasing the space between the Welcome Message and form*/

#startForm {

margin-top: 24px;

}

/*Increasing space between form input fields and button*/

.form-group {

margin-bottom: 20px;

}

/*Increasing space around Landing Page container*/

.start-grid-container {

padding: 28px;

}

/* -- LANDING PAGE: START RETURN BUTTON -- */

#start-return .btn-start-rma {

/* Adding a top margin so the spaces between input fields and the button are the same because there's additional space between text*/

margin-top: 4px;

/*Adding a bottom margin here to increase space since can't add top margin to the links since that's a form class*/

margin-bottom: 32px;

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

}

#start-return .btn-start-rma:disabled,

#start-return .btn-start-rma:disabled:hover {

color: #FFFFFF !important;

background-color: #DCDAFF !important;

border-color: #DCDAFF !important;

}

#start-return .btn-start-rma:active,

#start-return .btn-start-rma:hover {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

}

/* --- ORDER LOOKUP --- */

/* -- ORDER LOOKUP: EMAIL NOTIFICATION PAGE -- */

/*Rounded corners*/

.card,

.returnable {

border-radius: 8px;

}

/*Changing space around mail icon*/

.notified-card .notified-header .notified-icon {

padding: 14px 0 12px;

}

/*hr is the gray divider line*/

.notified-card hr {

margin-top: 20px;

margin-bottom: 20px;

}

/*Changing "We've sent you a..." font color*/

.notified-card .text-muted {

color: #1C1A1E;

}

/*Changing space under "Check your spam/junk mail if you cannot find an email from us."*/

.notified-card {

padding-bottom: 16px;

}

/* -- ORDER LOOKUP: ORDERS PAGE -- */

/*Showing Order Card is clickable*/

.returnable {

cursor: pointer;

}

/*Changing space top at the top of the Order Card*/

.card .order-header {

padding-top: 24px;

}

.orders-form .card h1.orderNumber {

/*Changing space around Order Number*/

margin-top: 12px;

margin-bottom: 8px;

/*Changing Order Number font size*/

font-size: 20px !important;

}

/*Price band*/

.card .order-total {

background-color: #7C4DBE;

}

/*Spacing around content after the price*/

.orders-form .card .article {

padding-top: 8px;

}

.card .order-date {

font-size: 16px;

margin-top: 8px;

margin-bottom: 16px;

}

/* --- GIFT RETURN PAGE --- */

/*Fixing text input instruction messages’ margins*/

.margin-left-5 {

margin-left: 0px;

}

.margin-top-5 {

margin-top: 4px;

}

/*Increasing space between "Not a Gift?" link and Start Return Button*/

.color-red {

margin-right: 16px;

}

/* -- GIFT RETURN PAGE: START RETURN BUTTON -- */

.gift-form .btn-primary {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 32px;

padding-right: 32px;

}

.gift-form .btn-primary:disabled,

.gift-form .btn-primary:disabled:hover {

color: #FFFFFF !important;

background-color: #DCDAFF !important;

border-color: #DCDAFF !important;

}

.gift-form .btn-primary:active,

.gift-form .btn-primary:hover {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

}

/* --- ADDRESS PAGE --- */

.address-card,

.international-card {

max-width: 552px;

padding-top: 36px;

padding-left: 28px;

padding-right: 28px;

border-radius: 8px;

}

/*Increasing space after each input field*/

#addressChangeForm .form-group {

margin-bottom: 24px;

}

/* -- ADDRESS PAGE: "CAN'T FIND THE STATE/REGION YOU'RE LOOKING FOR?" TERTIARY BUTTON LINK -- */

.address-card .btn-link,

.international-card .btn-link {

font-family: 'Josefin Sans', sans-serif !important;

font-size: 16px !important;

font-weight: 400;

line-height: 1.65;

color: #7C4DBE !important;

}

.address-card .btn-link:hover,

.international-card .btn-link:hover,

.address-card .btn-link:active,

.international-card .btn-link:active {

color: #9400D3 !important;

}

/* -- ADDRESS PAGE: ADD-ON INPUT FIELDS

(from clicking "Can't find the State/Region you're looking for?") -- */

.input-group-addon {

font-size: 16px;

color: #6E6D6F;

background-color: #F2F2F4;

border-top-left-radius: 8px;

border-bottom-left-radius:8px;

}

/*Fixing space to match other input fields*/

.input-group .form-control {

padding-top: 20px;

padding-bottom: 22px;

}

/* -- ADDRESS PAGE: CANCEL "X" BUTTON

(after clicking "Can't find the State/Region you're looking for?") -- */

.input-group-btn .btn-danger {

/*Fixing button to match spacing*/

padding-top: 10px;

padding-bottom: 10px;

/*Matching brand color red*/

background-color: #D8352B;

}

.input-group-btn .btn-danger:active,

.input-group-btn .btn-danger:hover {

background-color: #923A35;

}

/* --- ITEMS PAGE --- */

.items-card {

padding-bottom: 36px;

/*clickable cursor for returnable items*/

cursor: pointer;

}

/*Round corners for both the card and the disabled overlay*/

.items-card,

.item-disabled-overlay {

border-radius: 8px;

}

/*Disabled cursor for non-returnable items*/

.item-disabled-overlay,

.return-details {

cursor: not-allowed;

}

/* -- ITEMS PAGE: FONTS -- */

/*Variant details text e.g., color*/

.sku-details p {

font-size: 16px !important;

/*Generally don't want to change the opacity to make something lighter*/

opacity: 1;

color: #6E6D6F;

}

.order-number p {

opacity: 1;

font-weight: 400;

color: #1C1A1E;

}

.order-price {

font-weight: 400;

color: #1C1A1E;

}

/*Return price and "(Exchange Credit)" text*/

.return-price {

font-size: 16px;

font-weight: 400;

color: #1C1A1E;

}

/*Item's non-returnable messages on the item card (h4), "required" text, and

"This return type is not available for this product." text*/

.color-red {

color: #D8352B;

}

/*Item's non-returnable messages on the item card*/

.items-card .color-red {

padding-top: 20px;

}

/* -- ITEMS PAGE: ITEM RETURN POP-UP MODAL -- */

.item-modal-header-title {

padding-left: 16px;

}

/* - ITEM RETURN POP-UP MODAL: ROUND CORNERS - */

/*Rounding the pop-up modal corners*/

.modal-content {

border-radius: 8px;

}

/*Rounding the gray overlay top corners*/

.modal-header,

.variant-options-header {

border-top-left-radius: 8px;

border-top-right-radius: 8px;

}

/*Rounding the title gray overlay top-left corner*/

.col-lg-11,

.fa-2x,

.item-modal-header-title {

border-top-left-radius: 8px;

}

/*Rounding the x (close icon) gray overlay top-right corner*/

.pull-right {

border-top-right-radius: 8px;

}

/* - ITEM RETURN POP-UP MODAL: BUTTONS - */

/*

#rmaForm is the Return Type Pop-up Modal

*/

/*BROWSE IMAGES BUTTON*/

#rmaForm .btn-primary {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 32px;

padding-right: 32px;

margin-top: 8px;

margin-bottom: 8px;

}

#rmaForm .btn-primary:active,

#rmaForm .btn-primary:hover {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

}

/*NEXT BUTTON*/

#rmaForm .btn-success {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 80px;

padding-right: 80px;

}

#rmaForm .btn-success:disabled,

#rmaForm .btn-success:disabled:hover {

color: #FFFFFF !important;

background-color: #DCDAFF !important;

border-color: #DCDAFF !important;

}

#rmaForm .btn-success:active,

#rmaForm .btn-success:hover {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

}

/*RETURN TYPES*/

.btn-return-type {

border-radius: 8px;

border: 1px solid #7C4DBE;

}

.btn-return-type:disabled {

color: #6E6D6F !important;

background-color: #F2F2F4 !important;

border: 1px solid #6E6D6F !important;

}

.btn-return-type.active {

box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(124, 77, 190, 0.05) 0px 0px 0px 1px inset;

border: none;

}

.btn-return-type:hover {

box-shadow: rgba(124, 77, 190, 0.2) 0px 12px 28px 0px, rgba(124, 77, 190, 0.1) 0px 2px 4px 0px, rgba(124, 77, 190, 0.8) 0px 0px 0px 2px inset;

background-color: #FFFFFF;

border: 2px solid #7C4DBE;

}

/* -- ITEMS PAGE: VARIANT EXCHANGE POP-UP MODAL -- */

/*"Select Variant" title text (h4)"*/

.text-primary {

color: #6B45A1;

}

/* - VARIANT EXCHANGE POP-UP MODAL: ADD ITEM BUTTON - */

.variant-modal .btn-primary {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 80px;

padding-right: 80px;

}

.variant-modal .btn-primary:disabled {

color: #FFFFFF !important;

background-color: #DCDAFF !important;

border-color: #DCDAFF !important;

}

.variant-modal .btn-primary:active,

.variant-modal .btn-primary:hover {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

}

/* --- FULL CATALOG EXCHANGES PAGE --- */

/* -- FULL CATALOG EXCHANGES PAGE: TOP BAR */

/*Top bar container with page title, search, and cart*/

.exchange-title-container {

padding-left: 16px;

padding-right: 24px;

}

/*Full Catalog Exchange Page Title*/

.exchange-title {

font-weight: 700;

}

/* -- FULL CATALOG EXCHANGES PAGE: SIDEBAR PRODUCT CATEGORY TAB STATES -- */

.exchange-menu-options-title {

color: #1C1A1E;

}

.exchange-menu-options-title-selected {

color: #7C4DBE;

}

.exchange-menu-options-title:hover {

color: #7C4DBE;

text-decoration: underline;

}

/* -- FULL CATALOG EXCHANGES PAGE: MAIN CONTENT AREA -- */

/*Selected product category header*/

.exchange-selected-menu-option {

font-size: 16px;

color: #656483;

background-color: #EDECFF;

}

/*Spacing between item cards*/

.exchange-search-results {

justify-content: space-evenly;

}

/* - MAIN CONTENT AREA: ITEM CARD - */

.exchange-search-result-item {

padding: 8px;

padding-bottom: 12px;

border-radius: 8px;

width: 208px;

}

.exchange-search-result-item:hover {

border-color: #7C4DBE;

box-shadow: rgba(124, 77, 190, 0.2) 0px 12px 28px 0px, rgba(124, 77, 190, 0.1) 0px 2px 4px 0px, rgba(124, 77, 190, 0.8) 0px 0px 0px 2px inset;

}

/*Product title and entire container for all the product details*/

.exchange-search-result-item-title {

font-size: 16px !important;

line-height: 1.5;

padding-top: 4px;

padding-left: 8px;

}

/* --- REVIEW PAGE --- */

/*Making the box width smaller*/

.review-form {

max-width: 768px;

}

.review-card {

border-radius: 8px;

}

/*Price amount*/

.return-item-total span,

.selected-exchange-item-variant span {

font-weight: 400;

font-size: 16px;

color: #1C1A1E;

}

/*Increasing the space between the price details for readability*/

.total-label,

.total-amount {

margin-bottom: 4px;

}

/*Tells you info about the exchange, credit, etc.

e.g., "You have not used all of your Exchange credit.

The outstanding amount will be refunded to you."*/

.alert-info,

.alert-warning {

border-radius: 8px;

font-size: 16px;

color: #656483;

background-color: #EDECFF;

border-color: #716DBF;

}

/* --- SUMMARY PAGE --- */

/* -- SUMMARY PAGE: ROUNDED CORNERS -- */

.status-band,

#parentDiv,

#childDiv1 {

border-radius: 8px;

}

.status-card,

.headerMessageTop,

#childDiv2,

.nextHeader {

border-top-left-radius: 8px;

border-top-right-radius: 8px;

}

#footerContainer,

.footerMessageBottom,

#childDiv2,

.status-card {

border-bottom-left-radius: 8px;

border-bottom-right-radius: 8px;

}

/*INNER BORDERS*/

#childDiv1 {

margin-bottom: 0px !important;

padding-bottom: 0px !important;

}

#childDiv2 {

margin-bottom: 0px !important;

padding-bottom: 131px !important;

}

/* -- SUMMARY PAGE: RETURN STATUS CONTAINER -- */

/*"Your Return Status" Title*/

.headerMessageTop {

color: #FFFFFF;

background-color: #7C4DBE;

padding-top: 8px;

padding-bottom: 8px;

}

/*"Return #" Subtitle*/

.headerMessageBottom {

color: #1C1A1E;

background-color: #EDECFF;

padding-top: 4px;

padding-bottom: 4px;

}

/* - RETURN STATUS CONTAINER: TIMELINE - */

/*STATUS CIRCLES*/

.circle {

border: 2px solid #F2F2F4;

background-color: #F2F2F4;

}

.completedCircle {

background-color: #EDECFF!important;

border: 2px solid #EDECFF!important;

}

.activeCircle {

background-color: #7C4DBE!important;

border: 2px solid #7C4DBE!important;

}

/*.blueCircle: all completed circles – changing color to match branding*/

.blueCircle {

background-color: #7C4DBE!important;

border: 2px solid #7C4DBE!important;

}

/*STATUSES*/

/*Noncurrent statuses*/

.trackingText {

font-size: 16px;

color: #6E6D6F;

white-space: nowrap;

}

/*Current status*/

.activeText {

color: #6B45A1 !important;

}

/* - RETURN STATUS CONTAINER: CHECKMARK MESSAGE CALLOUT - */

/*Big checkmark icon*/

.requestedIcon,

.authorizedIcon,

.activeIcon,

.completeIcon,

.processedIcon,

.receivedIcon {

color: #7C4DBE!important;

}

/*Return By Message*/

.returnByText {

color: #1C1A1E;

}

/* - RETURN STATUS CONTAINER: FOOTER - */

/*RMA Status Message*/

.footerMessageTop {

font-size: 18px;

color: #FFFFFF;

background-color: #7C4DBE;

}

/*RMA Authorization Required/Authorized Message (about emailing)*/

.footerMessageBottom {

font-size: 16px;

color: #656483;

background-color: #EDECFF;

}

/* -- SUMMARY PAGE: NEXT STEPS CONTAINER -- */

/*Next Steps Title*/

.nextHeader {

color: #1C1A1E;

padding-top: 8px;

padding-bottom: 8px;

}

/* - NEXT STEPS CONTAINER: PRINT SHIPPING LABEL/INSTRUCTIONS BUTTON - */

.btn-print-label {

color: #FFFFFF !important;

background-color: #7C4DBE!important;

border-color: #7C4DBE;

}

.btn-print-label:active,

.btn-print-label:hover {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

}

.printShippingLabelDiv a:hover {

text-decoration: none !important;

}

/* - NEXT STEPS CONTAINER: CONTENT - */

/*Checkmarks*/

.fancyBulletNoPadding,

.fancyBulletPoint {

color: #7C4DBE!important;

}

/*Bullet point text*/

.summaryMessageText {

font-size: 16px;

font-weight: 400;

color: #1C1A1E;

}

.returnByDate {

font-size: 16px;

font-weight: 400;

color: #1C1A1E;

}

/* -- SUMMARY PAGE: CALL-TO-ACTION CONTENT BLOCK -- */

/*All the content*/

.status-banner-content {

padding-top: 24px;

}

.status-card h4 {

font-weight: 400;

}

/* - CTA BUTTON - */

.status-card .btn-primary {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 32px;

padding-right: 32px;

}

.status-card .btn-primary:active,

.status-card .btn-primary:hover {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

}

.status-banner-content a:hover {

text-decoration: none !important;

}

/* --- THIRD-PARTY WARRANTY PAGES --- */

/* -- 3PL ORDER INFO (I.E., LANDING) PAGE -- */

/*Making it a single-column form*/

.info-form {

max-width: 552px;

}

/*.info-card: entire card*/

.info-form .info-card {

margin-top: 24px;

border-radius: 8px;

padding-top: 36px;

padding-bottom: 24px;

padding-left: 28px;

padding-right: 28px;

}

.two-column-form .form-column {

margin-right: 0px;

margin-left: 0px;

}

/*Deleting extra space between input fields*/

.info-form .form-column .form-group {

min-height: 0px;

}

/*Increasing space between input fields*/

.info-form .form-group {

margin-bottom: 24px;

}

/* - 3PL LANDING PAGE: CALENDAR POP-UP MODAL - */

/*Today's Date*/

.uib-year .text-info,

.uib-month .text-info,

.uib-day .text-info {

color: #7C4DBE;

}

/*Day Headers*/

.small, small {

font-size: 16px;

}

/*Week #*/

.h6 {

font-size: 16px;

}

/*Non-current month's days*/

.uib-day .text-muted {

color: #6E6D6F;

}

/*3PL CALENDAR: BUTTONS*/

/*CURRENT VIEW CALENDAR DATE TITLE + CHEVRONS*/

.uib-title,

.uib-left,

.uib-right {

color: #1C1A1E;

}

.uib-title:hover,

.uib-left:hover,

.uib-right:hover {

color: #7C4DBE;

background-color: #F2F2F4;

border-color: #7C4DBE;

}

/*ALL DATE BUTTONS*/

.uib-day button,

.uib-month button,

.uib-year button {

font-size: 16px;

color: #1C1A1E;

}

.uib-day button:hover,

.uib-month button:hover,

.uib-year button:hover {

color: #7C4DBE;

background-color: #F2F2F4;

border-color: #7C4DBE;

}

/*FOOTER BUTTONS*/

/*TODAY'S DATE BUTTONS*/

.uib-year .btn-info,

.uib-month .btn-info,

.uib-day .btn-info {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

}

.uib-year .btn-info:hover,

.uib-month .btn-info:hover,

.uib-day .btn-info:hover {

background-color: #F2F2F4 !important;

}

/*"TODAY" BUTTON*/

.uib-datepicker-current {

font-size: 16px;

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

}

.uib-datepicker-current:active,

.uib-datepicker-current:hover {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

}

/*CLEAR BUTTON*/

.uib-clear {

font-size: 16px;

color: #D8352B !important;

background-color: #FFFFFF !important;

border-color: #D8352B !important;

}

.uib-clear:active,

.uib-clear:hover {

color: #FFFFFF !important;

background-color: #D8352B !important;

border-color: #D8352B !important;

}

/*DONE BUTTON*/

.uib-close {

font-size: 16px;

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

}

.uib-close:active,

.uib-close:hover {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

}

/* - 3PL LANDING PAGE: 3PL FORM BUTTONS/LINKS - */

/* 3PL BROWSE IMAGES BUTTON*/

.info-card .form-group .btn-primary {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

border-radius: 8px;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 32px;

padding-right: 32px;

margin-bottom: 8px;

}

.info-card .form-group .btn-primary:active,

.info-card .form-group .btn-primary:hover {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

}

/*3PL "REMOVE IMAGE LINK"*/

.info-card .alert-danger-muted {

color: #D8352B !important;

}

/*Increasing the space between Remove Image Link and Start Button*/

.info-card .col-md-12 {

margin-bottom: 36px;

}

/*3PL START RETURN BUTTON*/

.text-center .btn-primary {

color: #FFFFFF;

background-color: #7C4DBE;

border-color: #7C4DBE;

border-radius: 8px;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 64px;

padding-right: 64px;

margin-bottom: 24px;

}

.text-center .btn-primary:active,

.text-center .btn-primary:hover {

color: #7C4DBE;

background-color: #FFFFFF;

border-color: #7C4DBE;

}

/* -- 3PL ADDRESS PAGE -- */

/* - 3PL ADDRESS PAGE: "CAN'T FIND THE STATE/REGION YOU'RE LOOKING FOR?" TERTIARY BUTTON LINK - */

.info-card .btn-link {

font-family: 'Josefin Sans', sans-serif !important;

font-size: 16px !important;

font-weight: 400;

line-height: 1.65;

color: #7C4DBE !important;

}

.info-card .btn-link:hover,

.info-card .btn-link:active {

color: #9400D3 !important;

}

/* -- 3PL PRODUCT SELECT PAGE -- */

.warranty-form {

max-width: 552px;

}

.warranty-card {

border-radius: 8px;

}

/* - 3PL PRODUCT SELECT PAGE: ADD A PRODUCT BUTTON - */

.shop-catalog-button {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

border-radius: 8px;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 64px;

padding-right: 64px;

}

.shop-catalog-button:active,

.shop-catalog-button:hover {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

}

/*Increasing space between search icon and button text*/

.fa-search {

margin-right: 4px;

}

/* - 3PL PRODUCT SELECT: CATALOG POP-UP MODAL - */

/*X icon*/

.warranty-select-header-container .fa-times:before {

font-size: 1.2em;

}

/*Increasing the item name's font weight*/

.search-result-title {

font-weight: 700;

margin-left: 16px;

}

/*Making the select box smaller*/

.warranty-select-card .fa-2x {

font-size: 1em;

}

/* - 3PL PRODUCT SELECT: ITEM RETURN POP-UP MODAL - */

/*Icons*/

.variant-container .fa, .fas {

font-weight: 700;

}

/*Arrow icon*/

.variant-div .fa-3x {

margin-left: 12px;

font-size: 2em;

}

/*X close icon*/

.row .padding-10 .fa-times:before {

margin-right: 16px;

font-size: 1.2em;

}

/*Increase Return Reason and Additional Info Input Field Box Width*/

.input-xl,

.text-area-xl {

width: 378px;

}

/*Added input field highlight*/

.variant-container .color-accent-banding {

margin-bottom: 24px;

padding: 12px;

padding-top: 16px;

padding-bottom: 0px;

}

/*Image*/

.variant-container .col-md-8 {

margin-top: 48px;

}

/*Remove Image*/

.variant-container .col-md-4 .pointer {

color: #D8352B !important;

white-space: nowrap;

}

/*BUTTONS*/

/*3PL BROWSE IMAGES BUTTON*/

.variant-container .btn-primary {

font-family: 'Poppins', sans-serif !important;

font-size: 16px;

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

border-radius: 8px;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 32px;

padding-right: 32px;

margin-bottom: 8px;

}

.variant-container .btn-primary:active,

.variant-container .btn-primary:hover {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

}

/* 3PL ADD PRODUCT BUTTON*/

.variant-div .btn-success {

color: #FFFFFF;

background-color: #7C4DBE;

border-color: #7C4DBE;

border-radius: 8px;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 64px;

padding-right: 64px;

}

.variant-container .col-md-12 .btn-success:disabled,

.variant-container .col-md-12 .button-xl:disabled,

.variant-container .col-md-12 .btn[disabled] {

color: #FFFFFF;

background-color: #DCDAFF;

border-color: #DCDAFF;

}

.variant-container .col-md-12 .btn-success:active,

.variant-container .col-md-12 .button-xl:active,

.variant-container .col-md-12 .btn-success:hover,

.variant-container .col-md-12 .button-xl:hover {

color: #7C4DBE;

background-color: #FFFFFF;

border-color: #7C4DBE;

}

/* - 3PL "CAN'T FIND YOUR PRODUCT?" POP-UP MODAL - */

.warranty-select-container .form-group {

margin-left: 7px;

}

/*Fixing spacing in Product Description Input Field*/

.item-input-container textarea.form-control {

padding: 12px 16px !important;

}

/*BUTTONS*/

/*BROWSE IMAGES BUTTON*/

.warranty-select-container .btn-primary {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 32px;

padding-right: 32px;

margin-top: 8px;

margin-bottom: 8px;

}

.warranty-select-container .btn-primary:active,

.warranty-select-container .btn-primary:hover {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

}

/*"Remove Image" tertiary button*/

.warranty-select-container .alert-danger-muted {

color: #D8352B !important;

}

/*BACK BUTTON*/

.warranty-select-container .btn-default {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 32px;

padding-right: 32px;

margin-top: 8px;

margin-bottom: 8px;

}

.warranty-select-container .btn-default:active,

.warranty-select-container .btn-default:hover {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

}

/*ADD BUTTON*/

.warranty-select-container .btn-success {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

padding-top: 8px;

padding-bottom: 8px;

padding-left: 36px;

padding-right: 36px;

margin-top: 8px;

margin-bottom: 8px;

}

.warranty-select-container .btn-success:disabled,

.warranty-select-container .btn-success:disabled:hover {

color: #FFFFFF !important;

background-color: #DCDAFF !important;

border-color: #DCDAFF !important;

}

.warranty-select-container .btn-success:active,

.warranty-select-container .btn-success:hover {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

}

/* -- 3PL REVIEW PAGE -- */

.warranty-grid-container {

max-width: 972px;

}

.selected-warranty-item-variant {

margin-right: 24px;

}

/* -- 3PL SUMMARY PAGE -- */

.authRequiredText {

font-size: 16px;

font-weight: 400;

color: #1C1A1E;

}

/* --- INVALID PAGE --- */

/*Rounded corners*/

.invalid-card {

border-radius: 8px;

}

/*Changing space around error icon*/

.invalid-card .invalid-icon {

padding: 14px 0 12px;

}

/*Changing spacing between icon and text*/

.invalid-card .invalid-text {

padding-top: 0px !important;

}

/*Changing title*/

.invalid-details {

font-size: 32px !important;

line-height: 1.3 !important;

color: #1C1A1E;

}

/*hr is the gray divider line*/

.invalid-card hr {

margin-top: 20px;

margin-bottom: 20px;

}

/* -- INVALID PAGE: START A NEW RETURN BUTTON -- */

.invalid-card .btn-success {

color: #FFFFFF !important;

background-color: #7C4DBE !important;

border-color: #7C4DBE !important;

}

.invalid-card .btn-success:disabled,

.invalid-card .btn-success:disabled:hover {

color: #FFFFFF !important;

background-color: #DCDAFF !important;

border-color: #DCDAFF !important;

}

.invalid-card .btn-success:active,

.invalid-card .btn-success:hover {

color: #7C4DBE !important;

background-color: #FFFFFF !important;

border-color: #7C4DBE !important;

}

.invalid-card a:hover {

text-decoration: none !important;

}



Details Section HTML

<p>Read our entire return policy <a href="https://westend-demo-store-a.myshopify.com/pages/returns-exchanges">here</a>. For additional support, please reach out to us via our Zendesk chatbox in the lower righthand corner. </p>



We're here to help! Email us at support@returnlogic.com or use the live chat inside the platform with any questions or feedback.



Did this answer your question?