> ## Documentation Index > Fetch the complete documentation index at: https://varaahi.vritservicespro.com/llms.txt > Use this file to discover all available pages before exploring further. # Hero Product > The flagship buy-box hero — variant selection, bulk-pack pricing, scarcity meter, trust row and feature highlights. # Hero Product The Hero Product section is the reason most VARAHI stores exist. It is a three-column buy box: **story** on the left, **the product** in the middle, **the buy box** on the right. It is the only section in the theme that pulls live product data, and it is designed to make a decision rather than describe a product. ![Hero Product section](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro-c6bfa2fc/images/placeholder/section-hero-product.png) Hero Product section — story, showcase, and buy box *** ## The three columns | Column | Contents | | - | - | | **Story** | Title, rating, description, feature highlight cards | | **Showcase** | The product image on a glowing podium, with gallery thumbnails | | **Buy box** | Stock pill, price, variant swatches, quantity, bulk pack, add to cart, scarcity meter, trust row | On mobile the order flips to **showcase — story — buy box**: the image first, then the persuasion, then the action. A visitor who bounces never sees the buy box, which is the point. *** ## Settings ### Product | Setting | Type | Notes | | - | - | - | | **Product** | Product picker | Your flagship product. Leave blank and VARAHI uses the first product in the store | | **Title line 1** | Text | First line of the hero title | | **Title accent** | Text | The gradient line — usually the product name | | **Title line 3** | Text | Optional third line | | **Description override** | Textarea | Overrides the product description. Leave blank to use the product's own | | **Show rating** | Checkbox | Pulls the rating metafield | | **Show stock pill** | Checkbox | The "In stock" / "Sold out" pill at the top of the story column | | **Stock label** | Text | The label used when in stock | | **Fulfilment location** | Text | Appended to the stock label, e.g. "— Berlin" | | **Show SKU** | Checkbox | Renders the SKU under the title | | **SKU label** | Text | Prefix for the SKU | > [!NOTE] > > The **title settings override the product's own title** for the hero, but the price, > stock, images, variants and reviews always come from the live product. That means > you can art-direct the headline without duplicating product data. ### Buy box | Setting | Type | Notes | | - | - | - | | **CTA text** | Text | Add-to-cart button label | | **Show pack size toggle** | Checkbox | Enables the single / bulk pack switcher | | **Bulk pack quantity** | Number | Units in a bulk pack, e.g. 2 | | **Bulk discount (%)** | Number | Percentage saved, e.g. 20 | | **Show stock meter** | Checkbox | The scarcity bar | | **Stock meter label** | Text | Label above the bar | | **Units remaining** | Number | How many are left | | **Units label** | Text | Noun for the remaining units | | **Units in batch** | Number | Total units, used to compute the fill percentage | | **Show trust row** | Checkbox | Shipping / warranty / returns strip | | **Shipping note** | Text | First trust item | | **Warranty note** | Text | Second trust item | | **Returns note** | Text | Third trust item | *** ## The bulk pack tier This is VARAHI's most conversion-focused feature and it is unique to the theme. When **Show pack size toggle** is on, the buy box shows two options: ```text theme={"system"} +---------------------------------------------+ | Single Pack | Bulk (2+) SAVE 20% | | | | +---------------------------------------------+ ``` * The **price updates live** when the shopper switches tiers. * The **savings chip** shows the exact percentage off. * The **total** is recalculated for the bulk quantity. * A **"SAVE 20%"** pill in violet marks the bulk tier. > [!TIP] > > A bulk tier works best when the discount is genuinely framed as the per-unit saving > — buyers of premium hardware routinely buy two (one for each ear, one for each person). A 15–25% bulk discount is a strong, believable range. > [!WARNING] > > Bulk pack pricing is a **presentation layer**. VARAHI sets the quantity and the > variant; it does not create a separate discounted product. If your bulk price must > be a different SKU, use Shopify's **Bundles** app and let it own the pricing. *** ## The scarcity meter A thin bar that fills proportionally to the stock level, with the remaining units labelled. | Setting | Effect | | - | - | | Units remaining | Numerator | | Units in batch | Denominator | | The percentage | Computed automatically | > [!WARNING] > > Only show scarcity when it is **true**. If you always show "3 left", shoppers learn > that the meter is decorative, and it stops working — while also becoming a > deceptive-practice flag. The meter is strongest when it occasionally shows a > genuinely low number. *** ## Variant and colour selection Variants are rendered as **round colour swatches** when the variant has a colour or image, and as a **text pill** when it does not. Selecting a swatch updates the price, the compare-at price, the image, the URL, and the add-to-cart payload in place. > [!NOTE] > > The swatch uses the variant's **swatch colour** metafield if you have one, then its > image, then a neutral fallback. Add a swatch colour metafield named > `swatch.color` with a hex value for a clean, on-brand result. *** ## The Highlight block Add one **Highlight** block per feature card in the story column. Each has a heading, a subtext, and an icon. ```text theme={"system"} ⚡ 40-Hour Rapid-Charge Battery USB-C fast charge — 10 mins adds three hours of playback ``` > [!NOTE] > > The icon is a Material Symbols ligature name. VARAHI ships a subset of 44 glyphs. > If a name is not in the subset it will render as the raw word. Use one of the > [supported icon names](https://varaahi.vritservicespro.com/going-further/code-reference.md#icon-font). *** ## The product fallback If **Product** is left blank — or the selected product is deleted — VARAHI automatically falls back to **the first product in your store**. The homepage never shows a broken hero or an empty buy box. *** > **[Acoustic architecture](https://varaahi.vritservicespro.com/sections/acoustic-architecture.md)** > > The scroll-scrubbed engineering teardown. > **[Cart & checkout](https://varaahi.vritservicespro.com/features/cart-and-checkout.md)** > > How the buy box connects to the drawer. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.