Custom CSS
For anything Styles and Advanced styling can't reach, add your own CSS. It's loaded on your product and collection pages wherever swatches appear.
Important
Custom CSS is for people comfortable with CSS. If you're not, click Message us under the editor, describe the look you want, and we'll help you style it.
Add CSS
- 1
Open Settings
Go to Settings and scroll to Custom CSS.
- 2
Write your CSS
Type or paste your CSS into the editor. Leave it empty to use the default styling.
The Custom CSS editor - 3
Save
Click Save in the save bar, then refresh a product page on your store.
Class names
| Class | Element |
|---|---|
.vensa-swatches | The whole picker on a product page |
.vensa-option | One option, such as Color |
.vensa-option__label | The label line above an option |
.vensa-swatch | A colour, image or photo swatch |
.vensa-pill | A Swatch in pill value |
.vensa-btn | A button value |
.vensa-polaroid | A polaroid value |
.vensa-tip | The hover tooltip |
.vensa-badge | A badge |
.vensa-price | A price shown on a value |
.vensa-stock | The low-stock message |
.vensa-col-row | The swatch row on a product card |
.vensa-group-option | A product group row |
Values also carry state classes: .is-selected on the chosen value, .is-oos on sold-out values and .is-unavailable on combinations that don't exist.
Examples
/* Uppercase option labels with a little spacing */
.vensa-option__label {
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Make the low-stock message bold */
.vensa-stock {
font-weight: 600;
}
/* Square badge corners */
.vensa-badge {
border-radius: 3px;
}Tip
Sizes, colours, borders and spacing are easier to change in Advanced styling, and they stay correct when the app is updated. Save Custom CSS for things Advanced doesn't offer.
Need help?
Open the app and click Chat with us on the Dashboard for free setup assistance, or contact us with your store address and what you are stuck on.