This guide shows you how to customize the look and feel of your Smart Collections with simple CSS snippets. Each section focuses on a different part of the layout. Copy a snippet. Paste it into your theme’s custom CSS. Adjust colors, sizes, and spacing to match your brand.
Quick Finder
Titles
Images
Buttons
Prices
Filters
Where to Add CSS For Smart Collections?
Add Custom CSS the Rebuy Admin's 'Themes' settings to further tailor the appearance beyond the provided settings.
Access Theme Settings:
Navigate to the settings page in your Rebuy admin.
Click on 'Themes' to open the theme customization options.
Scroll down to the "Custom CSS" Box.
Place CSS Code either at the top or bottom of the box - Click Save.
Additional CSS Docs:
For more detailed instructions and examples on implementing CSS customizations, you can refer to our CSS guides.
Hero Section
The Hero Section is the large banner at the top of your Smart Collection page. You can adjust the spacing, title text, description text, and image. These changes let you control how your first impression looks to customers.
Hero Title & Description
The Hero Title is the large heading text at the top of your Smart Collection page, and the Hero Description is the smaller text underneath it. These two elements are often the first thing your customers notice, so making them bold, clear, and easy to read is important.
You can use CSS to adjust the color, font style, and size of each. This allows you to match your store’s branding and keep your design consistent.
Hero Title
Set the color, font, and size for the big hero title of your collection page:
/* Smart Collections Hero Title */
.rebuy-smart-collections__hero-title {
color: #yourColorHex; /* Text Color */
font-family: "Montserrat"; /* Choose your font */
font-size: 40px; /* Make the title large */
font-weight: bold; /* Keep it bold */
}
Hero Description
The description is smaller, supporting text under the main heading. Set the color, font, and size for the description of your collection page:
/* Smart Collections Hero Description */
.rebuy-smart-collections__hero-description {
color: #yourColorHex; /* Text Color */
font-family: "Montserrat"; /* Choose your font */
font-size: 16px;
}
Tip: Use a lighter shade of your brand color here to create contrast with the main title.
Hero Image
Control how the hero image scales and fits. Use 100% width to fill the space. Use “contain” if you want the entire image visible without cropping. Add rounded corners if desired.
Adjust the size of the Collection Hero Image:
object-fit: contain;Ensures the whole image is visible inside its box.border-radiusadds rounded corners.
*Add/remove or adjust properties as needed
/* Smart Collection Hero image area */
#rebuy-smart-collection-sidebar .rebuy-smart-collections__hero-image {
height: 320px;
}
/* Smart Collection Hero image */
#rebuy-smart-collection-sidebar .rebuy-smart-collections__hero-image img {
object-fit: contain !important; /* or cover */
border-radius: 20px !important;
}
Collections Filter Section
The Filter Section is the sidebar panel where customers refine what products they see. You can style the background, titles, icons, and dropdowns so the filters are easy to read and match your store’s design.
Full Collections Filter Section CSS Selector List
Full Collections Filter Section CSS Selector List
#rebuy-smart-collection-sidebar {}
.rebuy-smart-collections-sidebar__main-section {}
.rebuy-smart-collections__filter-section {}
.rebuy-smart-collections-sidebar__filter-section {}
.rebuy-smart-collections-sidebar__filter-section-title {}
.rebuy-smart-collections__filter-list-container {}
.rebuy-smart-collections-sidebar__filter-container {}
.rebuy-smart-collections-sidebar__filter-list {}
.rebuy-smart-collections-sidebar__filter-list-container {}
.rebuy-smart-collections-sidebar__filter-list-header {}
.rebuy-smart-collections-sidebar__filter-list-toggle {}
.rebuy-smart-collections-sidebar__filter-list-toggle .fa-plus {}
.rebuy-smart-collections-sidebar__filter-list-toggle .fa-minus {}
.rebuy-smart-collections-sidebar__filter-list-title {}
.rebuy-smart-collections-sidebar__filter-list-body {}
.rebuy-smart-collections__filter-option {}
.rebuy-smart-collections__filter-option-list {}
.rebuy-radio-label {}
.radio-input {}
.rebuy-radio {}
.radio-label {}
.radio-label.disabled {}
.rebuy-checkbox {}
.rebuy-smart-collections__filter-option-checkbox-label {}
.rebuy-smart-collections__filter-label {}
.rebuy-smart-collections__filter-availability {}
.rebuy-smart-collections__filter-product-type {}
.rebuy-smart-collections__filter-price {}
.rebuy-smart-collections__filter-price-block {}
.rebuy-smart-collections__filter-price-label {}
.rebuy-smart-collections__filter-price-input {}
.rebuy-smart-collections__filter-price-dash {}
.rebuy-smart-collections__filter-product-tags {}
.rebuy-smart-collections__filter-vendor {}
#rebuy-option-price-from {}
#rebuy-option-price-to {}
.far.fa-plus {}
.fal.fa-times {}
/* ---- Smart Collections Sorting & Mobile Trigger ---- */
.rebuy-smart-collections__sort-by {}
.rebuy-smart-collections-sidebar__sort-by {}
.rebuy-smart-collections-sidebar__sort-by--desktop {}
.rebuy-smart-collections-sidebar__sort-by-label {}
.rebuy-select {}
#rebuy-smart-collections-sort-options {}
#rebuy-smart-search-sort-options {}
.rebuy-smart-collections-sidebar__filter-trigger {}
.rebuy-smart-collections-sidebar__filter-trigger--mobile {}
.rebuy-smart-collections-sidebar__filter-mobile-facets {}
.rebuy-smart-collections-sidebar__filter-mobile-facets-icon {}
.rebuy-smart-collections-sidebar__filter-mobile-facets-label {}
Tip: Use contrasting colors for titles and icons so filters stay clear and accessible.
Sidebar Filter Section Background
Styles the filter panel box. Set the background color, add padding inside, and push the products away with right margin for clear separation.
/* Smart Collections Filter Section */
.rebuy-smart-collections__filter-section {
background: #yourColorHex
margin-right: 20px;
padding: 16px;
}
Filter List Titles
Control title sizes and colors inside the filter panel. Use larger, bolder text for section titles. Use slightly smaller text for each filter group.
Smart Collections Section title:
Add/remove or adjust properties as needed
/* Smart Collections Section title - the text that says "Filters" */
.rebuy-smart-collections-sidebar__filter-section-title.rebuy-title {
font-size: 1.5rem;
font-weight: 900;
color: #d005f0;
margin: 0 0 12px 0;
}
/* Smart Collections Filter Type Titles */
.rebuy-smart-collections-sidebar__filter-list-title {
font-size: 1.1rem;
font-weight: 800;
color: #f00000;
margin: 0;
}
Filter List Blocks
Use CSS to style the clickable headers that open and close each filter group.
Change the background and padding to make them stand out and easier to tap.
/* Smart Collections Filter list */
button.rebuy-smart-collections-sidebar__filter-list-toggle,
.rebuy-smart-collections-sidebar__filter-list-title {
background-color: #yourColorHex;
color: #yourColorHex; /* Text Color */
padding: 10px 12px;
border-radius: 5px;
font-weight: bold;
}
Filter List Blocks Dividers
Use CSS to style the filter group divider lines. These dividers are simply visual separators. Their purpose is to break content into clear sections so that everything is easier to read at a glance.
Change the color, Add thicker divider lines or spacing between filter groups
/* Smart Collections Filter Dividers */
.rebuy-smart-collections-sidebar__filter-list-header {
border-top: 2px solid #eee; /* Size Style Color */
padding: 15px 0; /* Spacing */
}
Want to remove them? Override the border-top property:
border: none;
Filter Icons
Set the colors for the filter icons used to expand or collapse filter groups. Use CSS to change the colors that match your brand.
Choose between two icon styles for expanding or collapsing filter options:
Plus/Minus (default)
Chevron
Rebuy Admin > Smart Collections panel > Smart Collections Template Settings > Filters & Sorting
Smart Collection Filter Plus/Minus Icons:
/* Smart Collections Plus icons */
#rebuy-smart-collection-sidebar .rebuy-smart-collections-sidebar__filter-list-toggle .fa-plus {
color: #yourColorHex;
}
/* Smart Collections Minus icon */
#rebuy-smart-collection-sidebar .rebuy-smart-collections-sidebar__filter-list-toggle .fa-minus {
color: #yourColorHex;
}
Smart Collection Chevron Icons:
/* Smart Collections Chevron Icon Closed */
#rebuy-smart-collection-sidebar .rebuy-smart-collections-sidebar__filter-list-toggle .far.fa-chevron-down.filter-close {
color: #yourColorHex;
}
/* Smart Collections Chevron Icon Opened */
#rebuy-smart-collection-sidebar .rebuy-smart-collections-sidebar__filter-list-toggle .far.fa-chevron-down.filter-open {
color: #yourColorHex;
}
'Sort By' Dropdown
Style the Sort By control. Round the corners, set the background, and match the text color with your brand.
Add/remove or adjust properties as needed
/* Smart Collections Sort-By Dropdown */
.rebuy-smart-collections__sort-by .rebuy-select {
border-radius: 12px; /* Rounded corners */
border: 0px solid #ddd; /* Subtle border */
background-color: #ebebeb;
color: #4555e1; /* Text Color */
}
.rebuy-smart-collections-sidebar__sort-by-label {
color: #4555e1;
}
Promo Tiles
Promo Tiles are image blocks you can use to highlight promotions or special categories. With CSS, you can control how these images scale and display so they stay sharp and consistent across your store.
Tip: Choose simple, bold images that won’t get distorted when scaled.
Add/remove or adjust properties as needed
Control how promo tile images fill their boxes. Set height to fill the space for consistent layouts.
/* Smart Collection Promo Tile: */
.rebuy-smart-collections__promo-tile,
#rebuy-smart-collections img.rebuy-smart-collections__promo-tile-image {
background-color: #fff; /* color behind image */
height: 100%;
border-radius: 16px;
}
Product Blocks
Product Blocks are the main product listings inside your Smart Collection. You can style images, titles, prices, badges, and buttons. These edits help your products stand out and make the shopping experience smoother for customers.
Smart Collections Product Block CSS Selector List
Smart Collections Product Block CSS Selector List
/* ---- Smart Collections Product Grid & Products ---- */
.rebuy-smart-collections__container {}
.rebuy-smart-collections__container-products {}
.rebuy-smart-collections__product {}
.rebuy-smart-collections-sidebar__product {}
.rebuy-smart-collections__promo-tile {}
.rebuy-product-media {}
.rebuy-smart-collections__product-media {}
.rebuy-smart-collections__absolute-image-container {}
.rebuy-smart-collections__promo-tile-image {}
.rebuy-smart-collections__product-image {}
.rebuy-smart-collections__absolute-image {}
.rebuy-smart-collections__absolute-image--zoomed {}
.rebuy-smart-collections__promoted-tag {}
.rebuy-smart-collections__product-detail {}
.rebuy-product-info {}
.rebuy-product-title {}
.rebuy-product-price {}
.rebuy-money {}
.rebuy-money.sale {}
.rebuy-money.compare-at {}
.rebuy-product-options {}
#rebuy-smart-search-results-variant-select {} /* reused id */
.rebuy-product-actions {}
.rebuy-button {}
.rebuy-smart-collections__cta {}
Product Images
Sets the background and corner style around product images. Use rounded corners for a softer look.
Image sizing is best controlled in the widget’s Product Display settings.
/* Smart Collection Product Images: */
#rebuy-smart-collections .rebuy-smart-collections__product-media {
background-color: #yourColorHex;
border-radius: 0px; /* makes sharp corners */
/* increase border-radius px amount for rounded corners. */
}
Featured Badge
Style the “Featured” tag on products. Match background and text to your brand. Adjust corner radius for shape.
Add/remove or adjust properties as needed
/* Smart Collection Featured Badge: */
#rebuy-smart-collections .rebuy-smart-collections__promoted-tag {
background-color: #yourColorHex;
color: #yourColorHex; /* Text Color */
font-size: 11px;
border-radius: 3px; /* 0px makes sharp corners */
/* increase border-radius px amount for rounded corners. */
}
Product Titles
Use CSS to change the product titles color and size. Choose a readable size and a brand color that meets contrast needs.
Add/remove or adjust properties as needed
Smart Collection Product Titles
/* Smart Collection Product Titles: */
#rebuy-smart-collections .rebuy-smart-collections__product .rebuy-product-title {
color: #yourColorHex; /* Text Color */
font-size: 16px;
}
Smart Collection Variant titles (the variant option's dropdown)
Styles the variant selector on each product. Control text color, size, and corner shape.
/* Smart Collection Product Variant Dropdown: */
#rebuy-smart-collections .rebuy-smart-collections__product .rebuy-select {
color: #yourColorHex; /* Text Color */
font-size: 16px;
border-radius: 0px; /* 0px makes sharp corners */
/* increase border-radius px amount for rounded corners. */
}
Product Prices
Control sale and compare-at price colors and sizes. Use a strong color for sale prices to draw attention. Keep sizes consistent with your product text.
Product Price
/* Smart Collection Sale Price: */
#rebuy-smart-collections .rebuy-money {
color: #yourColorHex;
font-size: 16px;
}
Sale Price
/* Smart Collection Sale Price: */
#rebuy-smart-collections .rebuy-money.sale {
color: #yourColorHex !important;
font-size: 16px !important;
}
Compare at Price
/* Smart Collection Compare at Price: */
#rebuy-smart-collections .rebuy-money.compare-at {
color: #yourColorHex !important;
font-size: 16px !important;
}
Product Buttons
Style Add to Cart buttons. Set background, text color, borders, size, and corner style. Add a hover color for feedback when customers point or tap.
Smart Collection Add to Cart Buttons
Add/remove or adjust properties as needed
/* Smart Collection 'Add to Cart' buttons: */
#rebuy-smart-collections .rebuy-button,
#rebuy-smart-collections .rebuy-smart-collections__cta {
background: #yourColorHex !important;
color: #yourColorHex !important;
border-color: #yourColorHex !important;
font-size: 16px !important;
border-radius: 0px !important; /* makes sharp corners */
/* increasing border-radius amount for rounded corners. */
}
/* Smart Collection buttons - Hover color: */
#rebuy-smart-collections .rebuy-button:hover,
#rebuy-smart-collections .rebuy-smart-collections__cta:hover {
background-color: #yourColorHex !important;
}