Skip to main content

Variables

Every Fourthwall store has :root1 variables, these can be edited using Custom HTML.

Root Variables​

:root {
    --color-primary: 
    --color-on-primary: 
    --color-background: 
    --color-on-background: 
    --color-product-image-background:
    --color-primary-rgb: 
    --color-on-primary-rgb: 
    --color-background-rgb: 
    --color-on-background-rgb: 
    --color-background-brightness:
    --button-corner-radius:
    --input-corner-radius:
    --image-corner-radius:
    --font-family-base:
    --font-family-heading:
    --font-weight-base: 
    --font-weight-base-bold: 
    --font-weight-heading:
    --font-style-base: 
    --font-style-heading: 
    --text-transform-base: 
    --text-transform-heading: 
    --logo-width: 
    --image-ratio-padding: 
}

How to edit & create variables​

Make sure to read over & before continuing.

:root {
--color-primary: red;
 }
 
 p { 
    color: var(--color-primary);
 };

In the example above the variable color-primary has been set to red, this will overwrite whatever it is set to via your Fourthwall settings. You can then deploy this variable using var(--color-primary), which will set the color to red. This can be done for any variable listed above, you can also create new variables to use throughout your code.

:root {
--new-variable: blue;
}

p {
    color: var(--new-variable);
}

You can set a variable to basically anything, as long as the element you are assigning it to can use it.

:root {
--image-url-variable: url(https://image-url.png);
--padding-variable: 10%;
--radius-variable: 15px;
}

div {
background-image: var(--image-url-variable);
padding: var(--padding-variable);
border-radius: var(--radius-variable);
}

Footnotes​

  1. Root is a global variable, it will work on any page it is connected to. ↩