> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/getting-started/video-tutorials.md). # Video tutorials Prefer to learn by watching? These step-by-step videos show you how to set up and customize Helix in the Shopify theme editor. {% hint style="info" %} Each video matches a page in this documentation. Use the video for a quick walkthrough, then open the linked page for the full list of settings. {% endhint %} *** ## Header ### Announcement bar Show short, high-priority messages at the very top of every page — promotions, free-shipping offers, discount codes, or a countdown to a sale. {% embed url="" %} {% content-ref url="/pages/DlefOOT2YcsWfO4KuT6p" %} [Announcement bar](/helix/header-group/announcement-bar.md) {% endcontent-ref %} ### Header layout Arrange the desktop header into **Top** and **Bottom** rows, and place each block in the left, center, or right column. {% embed url="" %} {% content-ref url="/pages/I7yFBKDGsgDwTemtNWmW" %} [Header Structure](/helix/header-group/header/header-structure.md) {% endcontent-ref %} ### Sticky header Keep the header in view as customers scroll, so they can navigate, search, or open the cart without scrolling back to the top. {% embed url="" %} {% content-ref url="/pages/DZFNcHJULwuwGuBLfWwa" %} [Sticky Header](/helix/header-group/header/sticky-header.md) {% endcontent-ref %} ### Transparent header Let the header sit directly on top of a full-width hero image or video, so the visual fills the screen while the navigation stays visible. {% embed url="" %} {% content-ref url="/pages/xA5Md81MaXg2cvOApcbe" %} [Transparent Header](/helix/header-group/header/transparent-header.md) {% endcontent-ref %} ### Mega menu Turn a menu item's dropdown into a wider panel with extra submenu columns, image banners, or a product list. {% embed url="" %} {% content-ref url="/pages/3jOIvXInvpTWa4XrP5Zb" %} [Mega menu](/helix/header-group/header/mega-menu.md) {% endcontent-ref %} ### Mega menu collection images and colors Show a thumbnail image or a color swatch next to collection links in the mega menu, set per collection with metafields. {% embed url="" %} {% content-ref url="/pages/fFkouZqSm3AMMrU4W3Ac" %} [How to override collection menu images](/helix/how-to-guides/how-to-override-collection-menu-images.md) {% endcontent-ref %} {% content-ref url="/pages/7TuvNMmwAz1w7HM4Y1Tr" %} [How to show colors for collection menu items](/helix/how-to-guides/how-to-show-colors-for-collection-menu-items.md) {% endcontent-ref %} ### Mobile header Set up the header shown on phones and small screens — its own blocks, layout, colors, and sticky behaviour, separate from the desktop header. {% embed url="" %} {% content-ref url="/pages/5lUKAjxojSbbePA3GaiD" %} [Header Structure](/helix/header-group/mobile-header/header-structure.md) {% endcontent-ref %} *** ## Products and bundles ### Build your own bundle Set up a "build your own bundle" experience with the **Bundle builder** section. {% embed url="" %} {% content-ref url="/pages/QyA4j1dm45F03InOEYGD" %} [How to set up the bundle builder](/helix/how-to-guides/how-to-set-up-the-bundle-builder.md) {% endcontent-ref %} ### Create a product bundle Sell a fixed set of products together with the **Product bundle** section. Customers add every item to the cart with one button and see the bundle total and savings. {% embed url="" %} {% content-ref url="/pages/K7kFk1fJpvlfATO8QKkb" %} [How to set up a product bundle](/helix/how-to-guides/how-to-set-up-a-product-bundle.md) {% endcontent-ref %} ### Bundle includes List the products inside a bundle on the bundle product's own page with the **Bundle Includes** block, so shoppers know exactly what's in the box. {% embed url="" %} {% content-ref url="/pages/MpFh2DWD9w2mPESXAaYt" %} [How to set up bundle includes](/helix/how-to-guides/how-to-set-up-bundle-includes.md) {% endcontent-ref %} *** ## Product page ### Variant images Show only the selected variant's images. Give each variant its own set of images and videos, and the gallery switches when a shopper picks a variant. {% embed url="" %} {% content-ref url="/pages/9LtkNK25pRauT0xWZJea" %} [How to set up variant media](/helix/how-to-guides/how-to-set-up-multiple-variant-images.md) {% endcontent-ref %} ### Back in stock alerts Replace the Add to Cart button with a notify-me form on sold-out variants, so shoppers can leave their email and hear when the product is back. {% embed url="" %} {% content-ref url="/pages/QJUpTsDnBerTLTMl7yyy" %} [Back in stock](/helix/features/back-in-stock.md) {% endcontent-ref %} ### Video reviews Show customer review videos on the product page. Each product reads its own videos from a metafield, and tapping one opens a full-screen shoppable reel. {% embed url="" %} {% content-ref url="/pages/BAEUxrNU9KSz9bXBcHbX" %} [How to set up video reviews](/helix/how-to-guides/how-to-set-up-video-reviews.md) {% endcontent-ref %} *** ## Cart ### Free shipping bar Show shoppers how close they are to free shipping. The bar fills and the message updates whenever the cart changes. {% embed url="" %} {% content-ref url="/pages/LZBBp6X8BO6NSNwQYILm" %} [Free shipping bar](/helix/features/free-shipping-bar.md) {% endcontent-ref %} ### Change variants in the cart Let shoppers change a cart item's variant or quantity with **Quick edit**, without leaving the cart. {% embed url="" %} {% content-ref url="/pages/VaLghNqK2WcckwLGf11q" %} [Quick edit](/helix/features/quick-edit.md) {% endcontent-ref %} ### Share a cart with a link Let customers send their cart to someone else with a single link. Every product, variant, and quantity is added to the recipient's cart. {% embed url="" %} {% content-ref url="/pages/hOVD808ahRSwbg5ko36k" %} [Share cart](/helix/features/share-cart.md) {% endcontent-ref %}