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.
Table of Contents
Buttons
Button Classes Glossary
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
Button States
There are 5 main button states to keep track of:
Default: the default state is defined by the class name of the button, e.g., .btn-primary. In this state, the button is enabled (i.e., clickable), but not hovered over or clicked on.
Hover: when the default button is hovered over by one’s mouse; e.g., btn-primary:hover
Active: when the default button is clicked on by a mouse; e.g., btn-primary:active
Disabled: the inactive state of a button; e.g., btn-primary:disabled
Disabled:hover: the inactive state of a button when hovered over by one’s mouse; e.g., btn-primary:disabled:hover
Customize Button Elements
Identify which button elements you wish to customize (reference Button Classes Glossary above).
Relevant button CSS properties you can customize:
color: color of the text on the button
Set using predefined color names or RGB, HEX, HSL, RGBA, HSLA values – we used HEX
Make sure your text contrasts enough with your button background (refer to the accessibility resources for help choosing visually accessible colors)
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 button 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
Change spacing using padding and margins (for more info about spacing, reference "Customizing the Spacing of the Return Center Templates")
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
Example: you want to change the background color of the “Previous” items-footer button to red (#FF0000).
/* ---- GLOBAL ---- */
.items-footer .btn-danger {
position: relative;
background-color: #5E6D6E;
color: #FFFFFF;
border-color: #5E6D6E;
border-radius: 0;
padding-left: 60px !important;
padding-right: 60px !important;
min-width: 225px !important; }
To change the button color, you need to edit the background-color property:
Final Code:
/* ---- GLOBAL ---- */
.items-footer .btn-danger {
position: relative;
background-color: #FF0000;
color: #FFFFFF;
border-color: #5E6D6E;
border-radius: 0;
padding-left: 60px !important;
padding-right: 60px !important;
min-width: 225px !important; }
After saving and publishing your CSS edits, you should see a red “Previous” button.
Example: you want to round the corners of the “Previous” items-footer button.
/* ---- GLOBAL ---- */
.items-footer .btn-danger {
position: relative;
background-color: #5E6D6E;
color: #FFFFFF;
border-color: #5E6D6E;
border-radius: 0;
padding-left: 60px !important;
padding-right: 60px !important;
min-width: 225px !important; }
To increase the roundness of button corners, you will need to edit the border-radius property.
Final Code:
/* ---- GLOBAL ---- */
.items-footer .btn-danger {
position: relative;
background-color: #5E6D6E;
color: #FFFFFF;
border-color: #5E6D6E;
border-radius: 2;
padding-left: 60px !important;
padding-right: 60px !important;
min-width: 225px !important; }
After saving and publishing, you should see a “Previous” button with rounded corners.
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. However, if you require further customization, we recommend working with your internal development team or connecting with an agency partner.