If you have an online shop embedded in your HTML script and would like to apply styles to it, we recommend you to add the CSS stylesheet to your web space. It allows you to change font styles, colors and more.
You can download the CSS file on your Shopfront page in the online shop administration. If you already have a CSS file, you can choose the styles below and add them to your existing file.
Where should I place the CSS file?
We recommend that you place the CSS file in the same folder as where the HTML file with your online shop is located. In the HTML file you need to place a link to the CSS file.
The link to your CSS should look like this:
<link rel="stylesheet" type="text/css" href="shopfront-embed-style.css">
Replace shopfront-embed-style.css with the name of your CSS file, if you renamed it. You should place the link, right after your head-tag, but before the closing /head-tag.
Styling Parameters
You can change the following parameters:
- Font family
- Font color
- Fill color
- Drop-down menus
- Borders
- Focus colors
- Promotion label
- Online Shop in mobile view
Font family
With font family you can change the main font that is used in your online shop. The first font is the font that will be displayed. The other two are backup fonts in case the first font cannot be fetched.
Example:
font-family: "Times New Roman",Times,serif;
Font color
By default the font color is set to be the same color for texts, links, hover and more. If you would like to change the color, simply change the HEX code.
If you want to set a different color, for example when hovering over a link, separate the parameter from the list and give it its own HEX color code.
Example:
.onecom-webshop-main,
.onecomwebshop-main a.link,
.onecomwebshop-main a.link:link,
.onecomwebshop-main a.link:visited,
.onecomwebshop-main a.link:hover,
.onecomwebshop-main a.link:active,
.onecomwebshop-main input,
.onecomwebshop-main select,
.onecomwebshop-main .text-color {
color: #363636;
}
Fill color
Fill colors apply to backgrounds on icons throughout the shop. Change the colors by using the settings below.
SVG icon color
The fill color will be applied to SVG icons around the online shop, for example the arrow in the "back" button. You can change the color, by changing the HEX code.
Example:
.onecom-webshop-main .text-color svg {
fill: #363636;
}
Background color (webshop)
This setting will set a background color to your entire online shop. You can change the color, by changing the HEX code.
Example:
.onecom-webshop-main {
background-color: #fdfdfd
}
Drop-down menus
Your category selector, as well as the sorting of products, are drop-down menus. You can adjust the colors of the drop-down menus.
Background color (drop-down)
This determines the color of the drop-down background. Simply change the HEX code in the code to one of your preference.
Example:
.onecomwebshop-main .bg-color {
background-color: #ffffff !important;
}
Border color (drop-down)
The color chosen here will determine the border color of your drop-down. Simply change the HEX and RGBA codes in the code, to the colors of your preference.
Example:
.onecomwebshop-main .border-color {
border-color: rgba(0,0,0,0.5) !important;
}
Text color (drop-down)
This settings determines the color of the text that is used in drop-down menus. You can change the color by changing the HEX color code.
Example:
.onecomwebshop-main .category-text {
color: #000000 !important;
}
Selected value (drop-down)
This setting determines the color of the text of selected items in a drop-down. You can change the color by changing the HEX color code.
Example:
.onecom-webshop-main .selected-text {
color: #000000 !important;
}
Hover color (drop-down)
The two settings below decide the font color on hover as well as the background color. Simply change the HEX and RGBA codes in the code, to the colors of your preference.
Example:
.onecomwebshop-main .bg-light-focus:hover {
color: #000 !important;
background-color: rgba(99,170,219,0.5) !important;
}
Borders
Back button border color
This settings determines the border color for your back button, the 'return to shop' button and when going through checkout. Change the HEX code to the color of your preference.
Example:
.onecomwebshop-main .border-fcolor {
border-color: #363636 !important;
}
Border used around order details
During the checkout process you see a box with an overview of the items that are being purchased. With this setting you can change the color of the border of this box. Simply change the RGBA color to one of your preference. The text in the box is always black.
Example:
.onecomwebshop-main .border-light-font-color {
border-color: rgba(54,54,54,0.5) !important;
}
Heading border
With this setting you can change the color of the underline for headings, for example on the checkout page. Simply change the HEX color to one of your preference.
.onecomwebshop-main .border-light-color {
border-color: #363636 !important;
}
Bottom border
With this setting a line is placed below the items on the checkout page. Simply change the HEX color to one of your preference.
Example:
.onecom-webshop-main .product-item {
border-color: rgba(54,54,54,0.2) !important;
}
Focus colors
The focus colors are used for prices, the cart icon and mobile sliders. Simply change the HEX color to one of your preference.
Example:
.onecomwebshop-main .focus, .onecomwebshop-main .mobile-slider a {
color: #63aadb !important;
}
.onecomwebshop-main .focus svg{
fill: #63aadb !important;
}
Focus colors on hover
These are the same settings as set above, but for their hover behavior. Change the RGBA colors to the color you would like to appear on hover.
Example:
.onecomwebshop-main .bg-extra-light-focus:hover {
background-color: rgba(99,170,219,0.1) !important;
}
Promotion label
With this setting you determine the color of the text and background of the promotion label. You can add a promotion label to a product to make it stand out more. Also check out our guide on promoting products.
Example:
.onecom-webshop-main .product-label {
background-color: #63aadb !important;
color: white !important;
}
Online Shop in mobile view
If you want to change the way your online shop looks on mobile devices, you can add your own "viewport" meta tag to the head-section of the HTML file with your online shop.
If we don't detect such a meta tag, we will automatically add the following meta tag for the perfect mobile experience:
meta name="viewport" content="width=320, initial-scale=1"
Related articles:
