Usage

Everything Reel shows comes from normal CS-Cart blocks, banners, categories and product features, so you edit it in the usual screens. The block names below are the ones the theme layout uses (Design → Layouts, Reel layout).

Header

• Main menu block (menu template “Mega menu”, user class re-pill-menu): the items of the pill. The first item is drawn dark on the homepage (“For you” in the demo, a link to the homepage). Items that do not fit move into “More”. A menu item that links to products.on_sale is drawn in the accent colour (the demo’s “Deals”).
• Search block: the right half of the pill (a full-width field on phones).
• Header icons (kit) shows the wish list button with its count; Account is the standard account dropdown; Cart content is the Bag pill. The count comes from the cart block of the visitor’s own session.

Story circles

The Stories block (categories, template “Story circles”) lists the top-level categories with their images. Give each category a square image (600 × 600 or larger); without one the circle shows the first letter. On category pages the Reel category header block shows the subcategories the same way (or the sister categories on a category without subcategories) with their product counts.

Reels

The Watch & shop block (banners, template “Shoppable reels”) shows your banners as 9:16 reels:

1. Marketing → Banners, add a Graphic banner. Upload a portrait image (1080 × 1920 works best; keep the lower third calm, the caption and the sticker sit there). The banner name is the caption: | breaks the line (3 drops.|Glass skin.). The URL is where the caption links to.
2. Save once, then fill the Theme fields on the banner page: Eyebrow = the channel label (“Skin school”), HUD = the chip in the top right (“NEW DROP”), Lead = a short line under the caption, Product = the product on the white sticker (its photo, name, rating or unit price and the price button; Save and Add act on this product), Promotion = the countdown (“Ends in 05:12:40”, only for promotions with an end date).
3. Add the banner to the Watch & shop block. A Text banner shows its own HTML on a gradient frame.

Share uses the phone’s share sheet where available and copies the link elsewhere. Reels never show likes or views.

Routine builder

The homepage has four products blocks with the template “Routine builder” and the user class kv-tabs (Oily skin, Dry skin, Sensitive skin, Dull skin). Consecutive blocks with that class become tabs; the block name is the tab label. Each block shows up to five products (fill them manually in the order of the steps). The step name above each product comes from the routine step feature (Settings → Reel). “Add all to bag” adds every product in stock with the first variant of its options; the total is the sum of the prices. To give a set discount, create a cart promotion (for example “15 % off when these four products are in the cart”). The Reel routine intro block holds the title and the line above the tabs; the words between * in a title are drawn as the highlighted word.

Tiles, product reels and the journal

• Trending *now* (template “Portrait tiles”, setting Columns 4/5/6) and Complete the *routine* on product pages show portrait tiles. Ends *soon* (template “Product reels”) shows products as 9:16 frames in a scrolling row; the demo uses products in promotions with an end date.
• The word between * in a block name is the highlighted word of the section title.
• The *journal* (blog, template “Journal covers”, filling “Recent posts”) shows four posts as 4:5 covers: give posts a portrait image (1080 × 1350).
• Real *comments* is the standard store reviews block (Comments and reviews add-on), drawn as comment bubbles with initials.

Product images

Reel draws a candy gradient behind every product image. Packshots on a transparent background (PNG or WebP) look best: the product sits on the colour. Photos on a white background show as a white card on the gradient; for a whole catalogue of white-background photos, set the gradient colours of your style closer to white in the Theme editor (variables @re_w1a … @re_w6b) or use the Ink style, whose frames are light grey.

Category pages

• The name, the product count and the first paragraph of the category description form the header.
• Product filters (horizontal template) are shown as pills; on phones a “Filters” button opens them in a sheet.
• Feed | Grid switches the product list view (Settings → Appearance: both views are turned on by the theme).

Product page

• The size feature gives the unit price next to the price; a promotion with an end date gives the countdown.
• Option selects named Size, Shade, Colour, Scent or Finish are shown as chips.
• The How to use block shows the how-to feature as step reels and the rating summary of approved product reviews.
• The facts under the buy button (free samples, delivery, returns) are language variables: Administration → Languages → Translations, search kv_theme_reel.fact.

Multi-Vendor

Vendor pages start with the Reel creator profile block: the shop logo in a story ring, name, a handle line with the city, the number of products, the shop rating with the number of shop reviews and the shop description. Tiles and reels show “by ”.