Email-Icon Created with Sketch. Group 3 Created with Sketch. Domains-SVG-Box Created with Sketch. Domains-SVG-Box Created with Sketch. Domains-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Icon-Internet Created with Sketch. Hosting-SVG-Box Created with Sketch. Icon-Internet Created with Sketch. Icon-Internet Created with Sketch. Hosting-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Trust Pilot Stars Created with Sketch. 1-5-million Created with Sketch. Control-panel-Icon Created with Sketch. WSB-Brush Created with Sketch. WSB-Brush Created with Sketch. WSB-Brush Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. icon-slider-next Created with Sketch. icon-slider-prev Created with Sketch. Webmail-icon Created with Sketch. heart Created with Sketch. Open-24-7 Created with Sketch. open24 Created with Sketch. 24 7 trusted Created with Sketch. Fill 1 Created with Sketch.

CSS parameters for the webshop

If you have a webshop 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 webshop 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 webshop 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
Dropdown menus
Borders
Focus colors
Webshop in mobile view

Font family

With font family you can change the main font that is used in your webshop. 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 webshop, 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 webshop. You can change the color, by changing the HEX code.

Example:

.onecom-webshop-main { background-color: #fdfdfd }

Dropdown menus

Your category selector, as well as the sorting of products, are dropdown menus. You can adjust the colors of the dropdown menus.


Background color (dropdown)

This determines the color of the dropdown 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 (dropdown)

The color chosen here will determine the border color of your dropdown. 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 (dropdown)

This settings determines the color of the text that is used in dropdown menus. You can change the color by changing the HEX color code.

Example:

.onecomwebshop-main .category-text { color: #000000 !important; }

Selected value (dropdown)

This setting determines the color of the text of selected items in a dropdown. You can change the color by changing the HEX color code.

Example:

.onecom-webshop-main .selected-text  { color: #000000 !important; }

Hover color (dropdown)

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; }

Webshop in mobile view

If you want to change the way your webshop looks on mobile devices, you can add your own "viewport" meta tag to the head-section of the HTML file with your webshop.

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:

HTML parameters to embed the webshop
Getting started with your webshop