Skip to main content

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

Hero Product section — story, showcase, and buy box


The three columns

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

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


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:
  • 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.
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.
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.
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.
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.
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.

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

The scroll-scrubbed engineering teardown.

Cart & checkout

How the buy box connects to the drawer.