To style your Kimonix element first go: Account Sidebar > Design > Theme & Styling.
Paste the CSS below into the Custom CSS field of the Account Sidebar settings to style Kimonix-rendered products.
This will ensure your Kimonix products carousel looks similar to the default styling of other product carousels such as the Recently Viewed, Wishlist & Featured Products blocks.
The styles target the class names Kimonix uses (`.kmnx-*`) and use the sidebar's CSS variables (`--mage-sidebar-*`), so colours automatically follow the sidebar theme.
/* ==========================================================================
Kimonix Element — match sidebar styling
========================================================================== */
/* Wrapper padding — aligns Kimonix content with other sidebar sections */
.kimonix-element {
padding-left: 20px;
padding-right: 20px;
}
/* Immediate-child h3 — styled to match the sidebar's section titles */
.kimonix-element > h3 {
font-size: 16px;
font-weight: 600;
color: var(--mage-sidebar-primary, #000000);
letter-spacing: 0.025em;
text-transform: uppercase;
}
/* Container for a Kimonix-rendered product row */
.kimonix-element .kmnx-products-section {
position: relative;
}
/* Horizontal scroller (class name has a dynamic hash suffix) */
.kimonix-element .kmnx-single-row,
.kimonix-element [class*='kmnx-scrollbar-'] {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-behavior: smooth;
padding-bottom: 8px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.kimonix-element .kmnx-single-row::-webkit-scrollbar,
.kimonix-element [class*='kmnx-scrollbar-']::-webkit-scrollbar {
display: none;
}
/* Each product wrapper — fixed width to match sidebar carousel slides */
.kimonix-element [class*='kmnx-scrollbar-'] > * {
width: 144px;
flex-shrink: 0;
}
.kimonix-element .kmnx-select-backdrop {
display: none;
}
/* Product card */
.kimonix-element .kmnx-single-row-card {
display: block;
}
/* Product image container */
.kimonix-element .grid-item-kmnx {
position: relative;
aspect-ratio: 1 / 1;
background-color: var(--mage-sidebar-card-border, #f3f4f6);
border-radius: 8px;
overflow: hidden;
margin-bottom: 8px;
}
.kimonix-element .grid-item-kmnx img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 150ms ease;
}
.kimonix-element .kmnx-single-row-card:hover .grid-item-kmnx img {
transform: scale(1.05);
}
/* Discount badge — positioned over the image */
.kimonix-element .kmnx-badge {
position: absolute;
top: 8px;
left: 8px;
background-color: var(--mage-sidebar-accent, #000000);
color: #ffffff;
font-size: 12px;
font-weight: 500;
padding: 2px 8px;
border-radius: 4px;
}
/* Description block */
.kimonix-element .kmnx-desc {
display: block;
padding: 0;
background: transparent;
}
/* Product title */
.kimonix-element .kmnx-title {
font-size: 14px;
color: var(--mage-sidebar-primary, #000000);
font-weight: 500;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Variant title — subdued secondary text */
.kimonix-element .kmnx-variant-title {
font-size: 12px;
color: var(--mage-sidebar-secondary, #666666);
margin-bottom: 4px;
}
.kimonix-element .kmnx-variant-title-hide {
display: none;
}
.kimonix-element .kmnx-variant-title-brackets {
color: var(--mage-sidebar-secondary, #666666);
}
/* Price section (Kimonix uses an ID, hence the [id^] attribute selector) */
.kimonix-element #kmnx-price-section,
.kimonix-element [id^='kmnx-price-section'] {
display: flex;
align-items: baseline;
gap: 8px;
}
/* Current price */
.kimonix-element .kmnx-price {
font-size: 14px;
color: var(--mage-sidebar-primary, #000000);
font-weight: 500;
}
/* Compare-at price when on sale */
.kimonix-element .kmnx-price .sale {
font-size: 12px;
color: var(--mage-sidebar-secondary, #666666);
text-decoration: line-through;
font-weight: 400;
}
/* "View product" or similar link below the card */
.kimonix-element .kmnx-icon-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--mage-sidebar-secondary, #666666);
transition: color 150ms ease;
}
.kimonix-element .kmnx-icon-link:hover {
color: var(--mage-sidebar-primary, #000000);
}