Rail

Rail is a section. Garments hang side-on along a rod; the nearest piece turns to face the shopper as the pointer moves along it.

Before you start

• For each product, prepare a side view and a front view as transparent PNG or WebP (a back view is optional). Shoot on a plain background and remove it, or ask your photographer for cut-outs.
• Keep the hanger hook at the top centre of each image so the pieces line up on the rod.

Set it up

1. Upload sections/mb-rail.liquid and assets/mb-rail.js and assets/mb-rail.css (see Installing any piece).
2. Add Maisonblock Rail to a page.
3. Add a Product block for each garment (up to 18): pick the product, then the side, front and optional back images.
4. Choose the rod (straight or curved), its sag, the swing and the turn speed.

How it behaves

• Desktop: the nearest garment turns to the front; neighbours lean in. Click or press Enter to lift a piece off the rail into a focused view with Front / Back and sizes.
• Phones (under 600 px): a swipe slider with dots; pieces stay side-on until tapped.
• Keyboard: Tab moves along the rail, Enter opens, Escape closes and returns focus.
• Reduced motion: no swing or breeze, instant turns.

Adding to the cart

The focused view adds the chosen size with Shopify's cart API, then asks the theme to refresh its cart drawer (it fires the cart:refresh event that Horizon listens for). If your theme's drawer doesn't update, the item is still in the cart; reloading shows it.

All settings

Read directly from the file you download (version 1.0.0).