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
Fonts
Font Classes Glossary
Note that in some cases you’ll need to specify what section’s font you’re editing (i.e., .classname <tagname> or #ID <tagname>), and some html elements have classes to override their properties. We’ve included some examples here (e.g., .sku-details p and .activeText) but encourage you to utilize the Inspect Element tool.
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 Hyperlinks section below 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"
Customize Font Elements
Identify which font elements you wish to customize.
Some relevant properties you may wish to edit:
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)
Example: for the CSS below, you want to change the font-family of h1, h2, and h3 to Raleway.
/* ---- GLOBAL ---- */
h1, h2, h3 {
font-family: helvetica, sans-serif !important;
line-height: 1.3;
color: #1F1F1F !important; }
To change the font, you must edit the font-family:
Final code:
/* ---- GLOBAL ---- */
h1, h2, h3 {
font-family: raleway, sans-serif !important;
line-height: 1.3;
color: #1F1F1F !important; }
Example: for the CSS below, you want to change the font-family of only h3 to Raleway.
/* ---- GLOBAL ---- */
h1, h2, h3 {
font-family: helvetica, sans-serif !important;
line-height: 1.3;
color: #1F1F1F !important; }
To do this, you must style h3’s CSS font-family property separately since the font-family is different from that of h1 and h2.
Final code:
/* ---- GLOBAL ---- */
h1, h2 {
font-family: helvetica, sans-serif !important;
line-height: 1.3;
color: #1F1F1F !important; }
h3 {
font-family: raleway, sans-serif !important;
font-size: 32px !important;
font-weight: 700;
line-height: 1.3;
color: #1F1F1F !important; }
Web-safe Fonts
Web-safe fonts display properly on any browser on any device with any operating system. Some web-safe fonts (categorized by generic font families) include...
Serif Fonts
Garamond
Georgia
Times New Roman
Sans-serif Fonts
Arial
Helvetica
Tahoma
Verdana
Monospaced Fonts
Courier New
Web-safe fonts may not match your branding, though, so don’t feel confined to only using web-safe fonts. Do, however, check how your fonts appear on different browsers, devices, and operating systems, and regardless of whether you do or don’t use a web-safe font, always have fallback fonts in your HTML and CSS since no font is 100% web safe.
CSS Fallback Fonts
Always have a list of similar back-up fonts in the font-family property and end with the generic font-family name. The browser will go through the list until a font works, and if all else fails, use the features of the specified generic font family.
Generic Font Families
Serif fonts: contain serifs, decorative strokes on the ends of the letter’s shape, e.g., Times New Roman and Georgia
Sans-serif fonts: don’t have serifs, e.g., Arial and Helvetica
Monospace fonts: have fixed, equal character width and spacing, e.g., Courier New and JetBrains Mono
Cursive fonts: resemble handwriting, e.g., Brush Script MT and Comic Sans MS
Fantasy fonts: are primarily decorative, e.g., Impact and Luminari
Hyperlinks
Hyperlink Classes Glossary
a: hyperlinks
a:link: unvisited hyperlink
a:visited: visited hyperlink
a:hover: mousing over a hyperlink
a.invalid-address-override:hover: "Use anyway" hyperlink in invalid address pop-up – overrides general link so need to style this as well
Hyperlink Structure
<a href = “INSERT URL HERE” > Hyperlink text </a>
The desired link for the hyperlink must be placed within the quotes in the first <a href> tag.
Text placed within the <a>..</a> tags is the clickable text that shoppers can see and interact with instead of the lengthy URL.
Hyperlink Styling
Hyperlinks can be styled with the same CSS properties as text.
<p style= “INSERT CSS STYLING” > Paragraph Text <a href=
“INSERT URL HERE” > Hyperlink text </a> Paragraph Text </p>
Example: you want to include a hyperlink with Helvetica font-family that will direct shoppers to your “About Us” page.
Start with desired paragraph text:
<p> Learn more about us here.</p>
Select your desired URL and decide what text you want to turn into hyperlinks. For this example, we will choose “here”.
<p> Learn more about us <a href=
“https://www.returnlogic.com”>here</a>.</p>
Finally, incorporate font styling by adding Helvetica as a font-family. Your final code should look like the following:
<p style= “font-family: helvetica, sans-serif”> Learn more about us
<a href= “https://www.returnlogic.com”>here</a>.</p>
Hyperlink States
Make sure you style your hyperlinks' general, unvisited, visited, and hover states to match your branding. We recommend styling the unvisited state and visited state the same because shoppers may make multiple returns and revisit the same link multiple times. We also recommend leaving the hover state underlined for visual accessibility.
Example: your brand color is purple, so you want your hyperlink to be purple.
/* ---- GLOBAL ---- */
/*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; }
Templates 2 and 3: Details Section
In Template 2 and Template 3, we have an additional Details section on the Landing Page:
Currently, the template code is as follows:
<p style="font-size:16px;"> For more information about our return
policy, please visit our <a href="INSERT RETURN POLICY URL HERE">
Return Policy </a> page. For additional support, please contact us via
[INSERT CONTACT DETAILS HERE]. To learn more about us, please visit
our <a href=" INSERT ABOUT US URL HERE "> About Us </a> page.</p>
To customize the hyperlink for your Return Policy page, update the URL as indicated in the following:
<a href =”INSERT RETURN POLICY URL HERE”>Return Policy</a>
Make sure your URL falls within the quotations. To customize the hyperlink text, replace the “INSERT HYPERLINK TEXT HERE” text within the <a...></a> tags.
To customize the contact details for additional support, update the text within the <p></p> tags.
To customize the hyperlink for your About Us page, update the URL as indicated in the following:
<a href =”INSERT ABOUT US URL HERE” > About Us </a>
Once again, make sure your URL falls within the quotations. To customize the hyperlink text, replace the “INSERT HYPERLINK TEXT HERE” text within the <a...></a> tags.
Note: you can also add or remove hyperlinks if you follow proper hyperlink structure as we’ve discussed in this section.
Resources
Accessible Colors
Free, Open-source Fonts
Web-safe Fonts
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.