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.
Please note you must be on Classic Mode in your Customize Settings. These templates do not apply to Modern Mode.
Table of Contents
Spacing
Line Height
Line height is the 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
Example 1: you want to increase the line-height of the Item Page Item Card text.
Take the following original template code:
/* --- ITEMS PAGE --- */
/* -- Items Page Item Card: Text -- */
.sku-details, .order-number, .order-price {
font-size: 16px;
font-family: helvetica !important;
line-height: 1.3 !important;
color: #1F1F1F !important; }
To increase the text spacing, you can change the line-height:
Final code:
/* --- ITEMS PAGE --- */
/* -- Items Page Item Card: Text -- */
.sku-details, .order-number, .order-price {
font-size: 16px;
font-family: helvetica !important;
line-height: 1.6 !important;
color: #1F1F1F !important; }
Padding
Padding determines the amount of space between an element’s contents and border. You can use different length units, but we used pixels (px).
padding-top: amount of space above an element’s contents within its border
padding-bottom: amount of space below an element’s contents within its border
padding-left: amount of space to the left of element’s contents within its border
padding-right: amount of space to the right of element’s contents within its border
Example: you want to set your global “Previous” button padding to 8px for the top, 8 px for the bottom, 32px for the left, and 32 px for the right.
/* ---- GLOBAL ---- */
.items-footer .btn-danger {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 32px;
padding-right: 32px; }
Margin
Margin determines the amount of space outside an element’s border. You can use different length units, but we used pixels (px).
margin-top: amount of space above an element outside its border
margin-bottom: amount of space below an element outside its border
margin-left: amount of space to the left of an element outside its border
margin-right: amount of space to the right of an element outside its border
Example: you want to continue customizing the “Previous” button (from the previous example in this article) and set the right-side margin to 104px.
/* ---- GLOBAL ---- */
.items-footer .btn-danger {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 32px;
padding-right: 32px;
margin-right: 104px; }
Resources
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.