Custom CSS

Custom CSS allows you to add additional custom styles to your entire online store. This area is only required if you cannot create the desired style using the other theme settings. Furthermore, it should only be used by developers who understand CSS coding.

CSS should be formatted in standard CSS format, e.g.

.card {
   border-color: red;
}

Example Custom CSS use cases

Make accordion titles bold:

.accordion-title {
   font-weight: bold !important;
}

Make Collection Cards round (first, set the ratio to square):

.card-ratio-square .card-collection--image img {
   border-radius: 100%;
}

Add a hover effect to the Add to Cart button on the product page: 

.product-form__submit:hover {
   background: blue;
   color: white;
}

Set a full height Image Banner to use SVH (Small Viewport Height):

@media only screen and (max-width: 600px) {
	.banner-style-fullscreen {
	   max-height: 100svh;
	}
	body:has(.full-width-announcement-bar) {
	   max-height: calc(100svh - 35px);
	}
}