Overview:
Provide a seamless brand experience for your shoppers by customizing your Return Center to match your brand. The below content teaches you basic CSS (Cascading Style Sheets) customizations that will instantly create a branded Return Center. We'll review:
If you require further customization, we recommend working with your internal Dev Team or connecting with an agency partner.
Note: These steps are only applicable to the ReturnLogic CSS Modern Theme. This theme selection can be found under Settings > Returns - Originate > Customize.
Note: In CSS, colors are often specified by:
a valid color name - Ex. "red"
a HEX value - Ex. "#eebee3"
an RGB value - Ex. "rgb(142,115,115)"
How to Add a Custom Font:
ReturnLogic makes it easy to match the fonts used in your Return Center to those specified in your brand guidelines or used on your website. To change the font:
1. Navigate to your Customize Settings > Return Center > Landing Page
2. In the Custom Font 1 or the Custom Font 2, add:
<link href="insert-font-link&display=swap" rel="stylesheet">
where insert-font-link is a link to your desired font.
3. In the Custom CSS section, add:
body {font-family: 'insert-font-family';}
where insert-font-family is your desired font family.
4. Select 'Save Draft' and 'Publish Settings' at the bottom!
Want to view your changes? Navigate to your Configure Settings and find/select your Originate URL to view your changes on your live Return Center!
How to Change the Return Center Button Colors:
ReturnLogic makes it easy to match the colors used in your Return Center to those specified in your brand guidelines or used on your website. To change the button colors:
Navigate to your Customize Settings > Return Center > Landing Page
2. In the Custom CSS Section, add:
.btn {
background-color: Insert-Color;
border-color: Insert-Color;
color: Insert-Color;
}
.btn:hover {
background-color: Insert-Color;
}
where Insert-Color is your desired color. The background-color will change the color of the button's background color . The border-color will change the color of the border of the button. The color will change the color of the button text. The background-color in the .btn:hover section will change the background color of the button when a mouse hovers over the button.
3. Select 'Save Draft' and 'Publish Settings' at the bottom!
Want to view your changes? Navigate to your Configure Settings and find/select your Originate URL to view your changes on your live Return Center!
How to Add a Background Image:
ReturnLogic makes it easy to add a background image into your Return Center to create a brand-specific experience. To change the background image:
1. Navigate to your Customize Settings > Return Center > Landing Page
2. In the Custom CSS section, add:
.start-grid-container{
background-image: url(Insert URL);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Where it says Insert URL, add the link to your desired image URL.
3. The Return Center comes with a preset border. If you would like to make this border transparent so that your background image shows on the entire page, add the following in the Custom CSS section:
.instructions-container { background-color: transparent; border: none;
}
.items-grid-wrapper, .address-grid-wrapper, .orders-grid-wrapper, .review-grid-wrapper, .review-grid-container, .start-grid-wrapper, .exchange-grid-wrapper, .gift-grid-wrapper, #gift-instruction-grid-wrapper, #instruction-grid-wrapper { background-color:transparent !important; border:none;
}
4. Select 'Save Draft' and 'Publish Settings' at the bottom!
Want to view your changes? Navigate to your Configure Settings and find/select your Originate URL to view your changes on your live Return Center!
How to Change the Background Color:
ReturnLogic makes it easy to match the colors used in your Return Center to those specified in your brand guidelines or used on your website. To change the background color:
1. Navigate to your Customize Settings > Return Center > Landing Page
2. In the Custom CSS section, add:
body {
background-color: Insert-Color;
}
where Insert-Color is your desired background color.
3. The Return Center comes with a preset border. If you would like to make this border transparent so that your background color shows on the entire page, add the following in your Custom CSS section:
.instructions-container { background-color: transparent; border: none;
}
.items-grid-wrapper, .address-grid-wrapper, .orders-grid-wrapper, .review-grid-wrapper, .review-grid-container, .start-grid-wrapper, .exchange-grid-wrapper, .gift-grid-wrapper, #gift-instruction-grid-wrapper, #instruction-grid-wrapper { background-color:transparent !important; border:none;
}
4. Select 'Save Draft' and 'Publish Settings' at the bottom!
Want to view your changes? Navigate to your Configure Settings and find/select your Originate URL to view your changes on your live Return Center!
How to Change the Return Status Page:
Customize the colors on your Return Status Page. Below we'll walk through how to change the colors of the Print Shipping Label button, the Return Status Box, the yellow and green dots, and bullet checkmarks.
1. Navigate to your Customize Settings > Return Center > Landing Page
2. To change the 'Print Shipping Label' button color, in the Custom CSS section, add:
.printShippingLabelButton {
color:Insert-Color;!important;
background-color:Insert-Color!important;
border-color:Insert-Color!important;
}
.printShippingLabelButton:hover {
color:Insert-Color;
background-color:Insert-Color!important;
border-color:Insert-Color;
}
where Insert-Color is your desired colors. The background-color will change the button's background color. The border-color will change the button's border color. The color will change the button text color. All colors in the .printShippingLabelButton:hover section will change the colors of the button when a mouse hovers on that button.
3. To change the Return Status box color, in the Custom CSS section, add:
.headerMessageBottom {
background-color:Insert-Color;
color:Insert-Color
}
.headerMessageTop {
background-color:Insert-Color;
color:Insert-Color
}
.footerMessageBottom {
background-color:Insert-Color;
color:Insert-Color
}
.footerMessageTop {
background-color:Insert-Color;
color:Insert-Color
}
where Insert-Color is your desired colors. The background-color will change the background color of the box while the color will change the text color.
4. To change the blue & yellow circle colors, in the Custom CSS section, add:
.activeCircle {
background-color: Insert-Color!important;
border-color: Insert-Color!important;
}
.completedCircle {
background-color: Insert-Color!important;
border-color: Insert-Color!important;
}
.blueCircle {
background-color: Insert-Color!important;
border-color:Insert-Color!important;
}
where Insert-Color is your desired colors. The background-color will change the background color of the circle while the border-color will change the border of the circle. The .activeCircle refers to the circle indicating what step the return is currently on. The .completedCircle refers to the circles indicating what steps have been completed. The .blueCircle will change the color of all circles once the return has been completed in ReturnLogic.
5. To change the bullet checkmark colors, in the Custom CSS section, add:
.fancyBulletNoPadding,
.fancyBulletPoint {
color:Insert-Color!important;
}
where Insert-Color is your desired color.
6. Select 'Save Draft' and 'Publish Settings' at the bottom!
Want to view your changes? Navigate to your Configure Settings and find/select your Originate URL to view your changes on your live Return Center!
Common Reasons Why My CSS Isn't Working
1. Missing Bracket - CSS requires an open bracket { and closed bracket } to signify what customization pertains to what element. If either open or closed bracket is not included, all following CSS below the missing bracket may not work.
2. Misplaced Bracket - Similarly, if a bracket is added in the wrong spot of the CSS, some of your customizations may be missed or not implemented at all!
To learn more about CSS, check out W3Schools.
If you have any questions about the answer above, feel free to email us at support@returnlogic.com.