Usage
Everything on the storefront is a standard CS-Cart block, banner, menu or setting. Edit it where you edit any block: Website > Themes > Layouts (the Block Manager) and Marketing > Banners.
Homepage sections
Section titled “Homepage sections”The homepage is one grid with one sub-grid per section (user class ke-sec ke-sec--<name>): hero, promises, categories,
product of the day + offers, product tabs, category mosaic, deal band, promo banners, “Shop the set”, compact products,
brands, reviews, blog and (Multi-Vendor) shops. Reorder, hide or edit them in the Block Manager. The block name is the
section title.
- Hero (banners block, template “Keystone hero slider”): one slide per banner. The banner name is the headline
(
*words*in stars are highlighted); on the banner page Keystone adds an eyebrow, a lead, two buttons, a rating line and a product whose price sticker appears on the slide. Block setting: seconds per slide (0 = no autoplay). - Side banners, promo banners: banners blocks with the same banner fields.
- Product of the day (products block): the first product of the block. The countdown runs to the end of the product’s catalog promotion, or to the end of the visitor’s day when there is none.
- Offers running now: the store’s active promotions (Marketing > Promotions) with “N days left”.
- Product tabs: product blocks next to each other with the user class
kv-tabsbecome one tabbed section. - Category tiles / mosaic: categories blocks (manual list or tree).
Mega menu
Section titled “Mega menu”The main menu is the standard menu (Website > Menus) shown as a mega menu:
- Top items that link to a category show its subcategories, the category picture, the top brands and the best deal.
- Icons: in the Market and Classic layouts the menu bar shows the category picture before each item. To use a line
icon instead, give the menu item the user class
ke-ic-<name>: phone, laptop, tv, audio, game, camera, home, watch, plug, tag, gift, star, shirt, leaf, heart, sport, book, baby. - Labels: the user class
ke-lbl-new,ke-lbl-hotorke-lbl-saleadds a small label. - Banners in the panels: add banners to the Menu banners block (next to the main menu). A banner joins the panel of the menu item its link points into (its category or one of its subcategories).
Promo cells inside the product grid
Section titled “Promo cells inside the product grid”The Grid promo cells block (category page, below the main content) puts one cell per banner into the product grid:
- Block setting Cell positions: after how many products each banner appears (
2,7,11). - Block setting Wide cells: the banners that take two columns (
1or1,3). - Banner: picture, name, eyebrow, lead and button label as on the hero. “Darker scrim” = dark band style.
- Countdown: choose a promotion in the banner’s Keystone fields; the cell counts down to its end.
- Popup: the banner’s second button opens its link in a popup on the page. A YouTube, Vimeo or .mp4 link plays the video; a link to a page of your store (a blog post, a guide) shows its article.
- Per category: open the category, tab Layouts (or the Block Manager’s per-category content) and pick other banners for this category.
Category pages
Section titled “Category pages”- Subcategories show as chips with pictures (fast navigation).
- Ticked filter values appear as chips above the products; a click removes one, Clear all resets the filters.
- “Show more products” loads the next page into the grid (setting Show more products).
Product pages
Section titled “Product pages”- The gallery shows product videos (CS-Cart 4.21 product videos and our Product Videos add-on).
- Keystone product promises (static block) is the trust block under the Buy button; edit its text in the Block Manager.
- Frequently bought together (products block, “Similar products” filling by default; pick products per product in the Block Manager): every product with a checkbox and one “Add selected to cart” button.
- On phones a Buy bar stays at the bottom while the Add to cart button is out of view.
Colour swatches
Section titled “Colour swatches”Products that are variations of each other (the Product variations add-on) by a colour feature show one swatch per colour on the card; a swatch opens that variation. Colours come from the feature variant colour, else from the colour name. Products with a “Colour” option show its values as swatches too.
Multi-Vendor
Section titled “Multi-Vendor”Vendor store pages get a header with the logo, rating, product count and city. The homepage block Shops to discover lists vendors as cards.