Overview
The following is a glossary of the classes, IDs, HTML tags, and CSS properties as well as a list of resources that may be relevant and helpful to you while customizing the Return Center.
Please note this glossary is written based off using the setting Classic Mode in your Customize Settings. These instructions do not apply to Modern Mode.
Table of Contents
Styling Glossary
In the Return Center templates, we define certain elements (e.g., buttons, images, text, etc.) with specific classes and/or IDs. The glossary below identifies relevant ones that our merchants commonly customize:
Fonts
Headings
h1: Summary Page CTA Content Block Title
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
h5: page descriptive text (below h3 page title), Review and Summary Pages product name text
h6: Third-party Warranty Add a Product Page Item Pop-up Modal item details
General Paragraph/Body Text
p: general paragraph text
.sku-details p: Items Page Item Card Variant Details, e.g., color or size
.order-number p: Items Page Item Card Order Number
.trackingText: Summary Page Return Status Container noncurrent statuses
.activeText: Summary Page Return Status Container current status
.returnByText: Summary Page Return Status Container Return By Message
.summaryMessageText: Summary Page Next Steps Container bullet point text
.returnByDate: Summary Page Next Steps Container Return By Message
body: general body text, button text, and shipping method description
.order-price: Items Page Item Card Order Price
.return-price: Items Page Item Card Return Price and "(Exchange Credit)" text
.headerMessageTop: Summary Page Return Status Container Title
.headerMessageBottom: Summary Page Return Status Container Return # Subtitle
.footerMessageTop: Summary Page Return Status Container RMA Status Message
.footerMessageBottom: Summary Page Return Status Container RMA Authorization Required/Authorized Message (about emailing)
.nextHeader: Summary Page Next Steps Container Title
.text-muted: descriptor text, e.g., Return Type Button description, Full Catalog Exchange Item Card variant detail
.color-red: non-error red highlight text, e.g., item’s non-returnable messages on the Items Page Item Card (h4) and "required" text
a: hyperlinks – refer to "Customizing the Fonts and Hyperlinks of the Return Center Templates" Hyperlinks section for more details
Forms
label: form labels and identifier text for text boxes, buttons, selections, etc.
input: encompasses example text, text boxes, and form input field text
.form-control: form input field text
.label-error: error notification text to inform shopper that inputted form information is incorrect, e.g., "Email Address is required"
Buttons
GLOBAL
.btn: specifies button class
.btn[disabled]: inactive button
.items-footer .btn-danger: “Previous” button that takes you back to previous page of return process
.items-footer .btn-success: “Continue” button that takes you to next page of the return process
LANDING PAGE
#start-return .btn-start-rma: button that begins the return process after shopper fills out input fields
ADDRESS PAGE
.address-card .btn-link, .international-card .btn-link: "Can't find the State/Region you're looking for?" tertiary button
link.input-group-btn .btn-danger: cancel “X” button if you want to close out of the input fields that appear after clicking on "Can't find the State/Region you're looking for?"
ITEMS PAGE
Items Selection Page (i.e., Item Return Pop-up Modal):
#rmaForm .btn-primary: “Browse Images” button to upload image
#rmaForm .btn-success: “Next” button to proceed with the returns process
.btn-return-type: return type button where shopper chooses the item’s return type
Variant Exchange Pop-up Modal
.variant-modal .btn-primary: button to add product when shopper chooses new variant exchange
SUMMARY PAGE
Next Steps Container
.btn-print-label: button that allows shopper to print their shipping label
CTA Section
.status-card .btn-primary: CTA Button
GIFT RETURN PAGE
.gift-form .btn-primary: button that starts a return
THIRD-PARTY WARRANTY PAGES
Third-party Warranty Landing Page
.info-card .form-group .btn-primary: “Browse Images” button to upload image if using a one-column template like Template 1
.two-column-form .btn-primary: “Browse Images” button to upload image if using a two-column template like Template 2 or Template 3
.text-center .btn-primary: the start return button
Third-party Warranty Landing Page Calendar Pop-up Modal
.uib-title: current view calendar date title button that allows you to go back to overview of months or years
.uib-left: left chevron to move between months or years
.uib-right: right chevron to move between months or years
.uib-day button: all date buttons
.uib-month button: all month buttons
.uib-year button: all year buttons
.uib-year .btn-info: today’s year
.uib-month .btn-info: today’s month
.uib-day .btn-info: today’s day
.uib-datepicker-current: “Today” button to go back to today’s date
.uib-clear: “Clear” button to clear input
.uib-close “Done” button to close calendar pop-up modal
Third-party Warranty Address Page
.info-card .btn-link: “Can't find the State/Region you're looking for?" tertiary button
Third-party Warranty Product Select Page
.shop-catalog-button: find and add product to a third-party warranty claim
Third-party Warranty Item Return Pop-up Modal
.variant-container .btn-primary: “Browse Images” button to upload image
.variant-div .btn-success: add product to the third-party warranty claim after finishing return details
Third-party Warranty “Can’t Find Your Product?” Pop-up Modal
.warranty-select-container .btn-primary: “Browse Images” button to upload image
.warranty-select-container .btn-default: “Back” button to go back to the Product Select Third-party Warranty: Catalog Pop-up Modal
.warranty-select-container .btn-success: “Add” button to add written-in product to warranty claim
INVALID PAGE
.invalid-card .btn-success: “Start a New Return” button
Form HTML Elements
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
Relevant CSS Properties
BACKGROUND
background-color: color of the background's body
Set using predefined color names or RGB, HEX, HSL, RGBA, HSLA values – we used HEX
Make sure your text contrasts enough with your background (refer to the accessibility resources for help choosing visually accessible colors)
background-image: sets the background image for the site
We recommend simple background images with minimal detail and colors that contrast well with the text and logo
SPACING
line-height: space between lines of text. To be visually accessible we recommend...
~1-1.3 for headings
~1.4-1.65 for body text
~1.3 for captions
padding: space inside button
padding-top: top space inside button
padding-bottom: bottom space inside button
padding-left: left-side space inside button
padding-right: right-side space inside button
margin: space outside button
margin-top: top space outside button
margin-bottom: bottom space outside button
margin-left: left-side space outside button
margin-right: right-side space outside button
FONTS AND HYPERLINKS
font-family: font, e.g. Raleway, Arial, etc.
Google Fonts is a great free, open-source library!
font-size: text size
We recommend...
Setting the font size with pixels (px) for full control
A minimum font size of at least 16pt for visual accessibility
font-weight: the perceived weight or boldness of the text
400 is equivalent to normal
700 is bold
text-decoration: overline, line-through, underline
line-height: space between lines of text
For visual accessibility, we recommend...
~1-1.3 for headings
~1.4-1.65 for body text
~1.3 for captions
color: text color
Set using predefined color names or RGB, HEX, HSL, RGBA, HSLA values – we used HEX
Make sure your text contrasts enough with your background (refer to the accessibility resources for help choosing visually accessible colors)
BUTTONS
background-color: color of the button’s body
Set using predefined color names or RGB, HEX, HSL, RGBA, HSLA values – we used HEX
Make sure your text contrasts enough with your background (refer to the accessibility resources for help choosing visually accessible colors)
border-radius: the roundness of the button’s corners
The greater the border-radius pixel value, the rounder the button corners
Having no border radius gives off a more serious vibe, while a rounder border radius has a friendlier feeling. Whatever you choose, make sure you are consistent.
border-color: color of the button’s borders
FORM ELEMENTS
border-radius: the roundness of the form element’s corners
The greater the border-radius pixel value, the rounder the button corners
Having no border radius gives off a more serious vibe, while a rounder border radius has a friendlier feeling. Whatever you choose, make sure you are consistent.
border-width: the thickness of the “border” (shorthand for border-width border-style border-color)
You can also directly increase the pixel value of "border" and the reverse for a thinner border
border-color: color of the input field’s borders
You can also change the input field border-color through the hex code in “border” (shorthand for border-width border-style border-color)
[insert form element]:focus: an active field (i.e., how a field appears when clicked on and shopper is currently entering data); to customize, edit the properties of “input:focus”, "select:focus", and "textarea:focus":
border: shorthand for border-width border-style border-color
border-width: increase the pixel value to increase the thickness or use a pre-defined value (thin, medium, or thick)
border-style: dotted, dashed, solid, double, etc.
border-color: change the HEX code to change the color
box-shadow: adds shadow(s) to an element
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.