For a consistent look and feel of your e-commerce shop, it is important that the widget matches the color palette of your product pages. In this article, we will explain how to modify the colors of the widget if you are using a Vintage Shopify Theme.
First, keep in mind that you can modify the following color variables:
-
Primary Color
-
Secondary Color
-
Accent Color
These three variables are applied to the entire widget, which means that any color update will apply to both the “Find my size” button and the other screens of the widget.
Next, let’s clarify the difference between the variables in each element:
Button
Primary Color: the color of the inactive button, before the user clicks on or hovers over it.
Secondary Color: the color of the button when the user hovers over it.
How to change the color variables:
If you would like to change the colors of the widget, change the color in your Sizefox JavaScript snippet, as per example below:
<script> window.Sizefox = {
styles: {
colors: {
primary: "black",
secondary: "grey",
accent: "beige",
}
}, orgId: "custom-9999", platformId: "my-shopify.myshopify.com",
previewMode: true, product: { serial: "{{ product.id | json }}",
title: {{ product.title | json }}, keywords: {{ product.tags | json }},
vendor: {{ product.vendor | json }}, }, }; </script>
<script type="text/javascript" charset="utf-8"
defer src="embedder.sizefox-bundle.js"></script>
Technical Specifications
A <color> can be defined as follows:
-
Using a keyword (such as blue or transparent). All existing keywords specify a color in the sRGB color space
-
Using the RGB cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations). These always specify a color in the sRGB color space
-
Using the HSL cylindrical-coordinate system (via the hsl() and hsla() functional notations). These always specify a color in the sRGB color space
-
Using the LCH cylindrical coordinate system, via the lch() functional notation. This can specify any visible color.
-
Using the Lab coordinate system, via the lab() functional notation. This can specify any visible color.
-
Using the color() functional notation, to specify a color in a variety of predefined or custom color spaces.
Resource: CSS MDN Web docs <color>