Popular CSS snippets examples

Custom fonts

Changing fonts for the entire Product Fruits experience.

.productfruits--container-root {
	font-family: Arial;
}

Tours

Custom fonts

.productfruits--tour-container {
	font-family: Arial;
}

Skip button colors

.productfruits--card-footer
.productfruits--card-footer-skip-button {
    background-color: black;
    color: white;
}

Previous button colors

.productfruits--card-footer
.productfruits--card-footer-back-button {
    background-color: black;
    color: white;
}

Hide the Skip button and show the close cross button in the corner

.productfruits--card-footer
.productfruits--card-footer-skip-button {
    display: none !important; /* hide the default footer Skip button */
}

.productfruits--card-header-skip-button {
    display: block; /* show the cross button */
    background-color: #441122; /* adjust the color */
    top: 15px; /* adjust the position */
    right: 15px; /* adjust the position */
}