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
Forms
Forms are where your shoppers enter information.
Customize Form Elements
Identify which form elements you wish to customize.
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
Customize form elements by editing the following properties:
border-radius: the roundness of the form element's corners
The greater the border-radius pixel value, the rounder the 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 border's thickness
You can also directly increase the pixel value of "border" and the reverse for a thinner border
border-color: color of the form element's borders
You can also change the form element's 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
Spacing: change using padding and margins (for more info about spacing, reference the "Customizing the Spacing of the Return Center Templates")
padding: space inside field
padding-top: top space inside field
padding-bottom: bottom space inside field
padding-left: left-side space inside field
padding-right: right-side space inside field
margin: space outside field
margin-top: top space outside field
margin-bottom: bottom space outside field
margin-left: left-side space outside field
margin-right: right-side space outside field
/* ---- GLOBAL ---- */
/*Customizing input fields*/
input {
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
margin: 0 !important;
/*increase the border-radius to make the corners more round*/
border-radius: 0 !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background: #fff !important;
border: 1px solid #6C7A7D !important;
padding: 16px !important; }
Example: you want the input field to have a purple outline and a box shadow when clicked on and typed in.
/* ---- GLOBAL ---- */
/* Customizing active input field (i.e., shopper typing in input field) */
input: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); }
Customize Added Form Element Highlights
If you want to customize the added form field highlights for both the Items Selection Page (i.e., Item Return Pop-up Modal) and Third-Party Return Pop-up Modal, edit the properties of “.modal-content .color-accent-banding". Edit “.variant-container .color-accent-banding" for further customizations to the Third-Party Return Pop-up Modal’s added form field highlight.
Example: you want the newly added secondary reason drop-down list to have a light purple color highlight.
/* ---- GLOBAL ---- */
/*Customize added form element highlight*/
.modal-content .color-accent-banding {
border-radius: 8px;
background-color: #EDECFF;
margin-bottom: 12px; }
/*Additional customizations to Third-Party Return Pop-up Modal’s added
form element highlight*/
.variant-container .color-accent-banding {
margin-bottom: 24px;
padding: 12px;
padding-top: 16px;
padding-bottom: 0px; }
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.