Commerce components

The product tile of every grid: image, badge, name, price, rating, wishlist heart and a real Add to cart button, in five layouts.

A carousel block that loads products from a source you name (latest, offers, a category…) and draws a ProductCard for each.

A home block that fetches products from a source and shows up to four ProductCards in a fixed grid, with an optional title.

The product page buy box: options, notes and files, live price, quantity and the Add to cart button, submitted through Salla's SDK.

A product page's image slider with thumbnails, an in-page zoom popup, video and 3D slides, replaceable through the registry.

The information half of a product page: brand, name, rating, price, description, tags, share and wishlist, SKU and stock counters.

One line of the cart page: picture, name, prices, offers, a quantity input and a delete button that change the shopper's real cart.

The cart page sidebar: free-shipping bar, loyalty and gift widgets, totals, a coupon box and the Complete Order button.

Draws nothing: on the cart page it pushes Google Tag Manager checkout events for each step and sets the browser tab title.

Tells the engine which component draws each home page block, by the block path the Salla API sends. Call it once at startup.

The engine's 13 built-in home blocks, keyed by block path, ready to spread into registerHomeComponents.

Draws one home page block from its API data: finds its registered component, wraps it in an error boundary, and defers it until visible.

Sets the placeholder, reserved height, class and id HomeComponentRenderer uses around your own home blocks before they load.

Catches an error thrown while a home block renders, logs it, and shows nothing in production so the rest of the page survives.

A single linked banner image, with a smaller image for phones and an eager-loading option for a banner at the top.

Three featured-products home blocks: tabs with a main product, tabs that load their own products, and a large card beside small ones.

A grid of the store's selling points, each an icon, a title and a line of text, such as fast shipping or secure payment.

Shows the store's customer reviews, fetched by Salla's reviews web component, with type, sort, limit and privacy options.

An autoplaying, centered carousel of linked images in wide 1200×300 frames, with pagination dots.

Square picture tiles that link somewhere, with optional text over each: one row up to three tiles, a three-column grid beyond.

A full-width picture behind a centered title and an optional call-to-action link, with an optional dark overlay.

Embeds a YouTube video with a lightweight player that loads YouTube's own player only when the shopper presses play.

Hosts a home block that comes from an installed Twilight bundle (a component built outside the theme), rendered in the browser only.

A red, dismissible bar on product pages saying the store is closed for orders and when it opens; the engine shows it automatically.

Loads a Google Tag Manager container on the page and filters sensitive fields out of dataLayer pushes; the engine mounts the store's automatically.

Loads Sift's fraud-detection script with the store's beacon key and the customer id; the engine mounts it when the store has a key.

Watches the page for Twilight bundle elements and loads Salla's bundles runtime the first time one appears; mounted on every page.