Sections#
Add a section on any page with Add section in the left sidebar of the theme editor. Every section has a Color scheme, top and bottom padding, and a Mobile layout group last with its phone settings. Many sections also take a Custom Liquid block for your own code (Header, Footer, Collection page, Hero banner, Contact form, Customer photos and Product details among them).
Empty image spots show a clean frame until you add a picture. The recommended image size is written under each image setting and shows in the theme editor only, never in your store.
Banners#
| Section | Use it for |
|---|---|
| Product slideshow | Your hero products on a stage, each with its specs, options, price and Add to cart. Product photos with a transparent background (PNG cut-outs) float on the stage with a reflection; photos on a plain studio background stand as a light box in their own background color. It can run under a transparent header. Each slide has an Animation: Turn to face, Unzip, Swing in, Lower and settle, Lift from the floor, Slide in, Light up, Scan in, Twist on, Roll in, Sprint in, Drop and bounce or Flip around. With Enable drag to turn products on (the default), shoppers can move each product with its own hand movement; on phones a tap plays it. |
| Slideshow | Images with a heading and buttons, turning on a timer. Content style: Livery panel, Plain or On a card over the full image. Height includes Adapt to image, which follows the first slide's picture. See Livery panel below. |
| Hero banner | One big statement: heading, text, buttons, a few specifications and a featured product, with the content on or beside the picture. |
| Video | A video from Shopify, YouTube or Vimeo, as a player or a background with text over it. |
| Countdown | Time left to a sale's end, a launch or a race weekend, on rolling counters. It hides itself or shows a message when the time is up. |
Livery panel#
With Slideshow > Content style > Livery panel, the words sit on a panel in the color scheme's colors, with three racing stripes along its angled edge.
- Show slide number, and Stripe 1, Stripe 2 and Stripe 3 to recolor the stripes. Leave them empty to follow the color scheme.
- Logo 1 to Logo 4: a strip of sponsor logos along the foot of the picture on wide screens. Logo color: White (needs logos with a transparent background, PNG or SVG) or Original colors.
- In each Slide: Image position (Start or End) puts the picture on that side and the panel on the other. Product adds a tag on the picture with the product's name, price and a link.
- On phones the picture sits above the panel, and the slide grows with its words.
Products#
| Section | Use it for |
|---|---|
| Featured product | One product with its gallery and buy buttons anywhere on a page. |
| Featured collection | Products from one collection beside a panel. Panel style: Timing tower (the default: the products ranked like a race timing screen; pointing at a row lights its card, and a short list fills the panel evenly) or Photo (the collection image with its name and product count). Position puts the panel at the start or the end. Fade edges (off by default) softens the edges of the sliding row and the timing tower where more products wait. |
| Product list | Products from a collection or picked by hand, as a grid or a sliding rack. Add Collection tab blocks to switch between collections (New arrivals, Best sellers, Sale). |
| Product hotspots | A photo of a product with points that explain each feature, such as vents, seams or the fastening. |
| Shop the look | A photo of a person in a full outfit with a numbered point on each piece, beside a list of the same pieces. Shoppers choose colors and sizes, leave out what they own, and add the rest in one go. |
| Kit builder | A complete outfit, head to toe. Shoppers pick each piece's color and size and add the whole kit to the cart. |
| Product details | Specifications, ratings, materials, care and downloads as tabs (see Product page). |
| Product recommendations | Related products, for the product page. |
| Recently viewed | Products this shopper looked at, newest first. |
| Customer photos | Customers' photos and videos on a contact sheet with film edges, frame numbers, names and captions. Tag up to 3 products per photo; opening a photo shows it large with its products and Choose. Videos play muted in the section, with a pause button when they play on their own, and with sound in the viewer; YouTube and Vimeo links play in the viewer. Sliding row or grid, 3 to 6 per row, portrait, square or landscape, and its own phone layout. Instagram apps can be added as blocks. Each photo has a Network icon (from its link, a chosen network, or none), and the store's social icons can sit beside the heading. The viewer uses the Kit builder's form: shoppers pick options for each tagged product and add them all at once. |
Collections#
| Section | Use it for |
|---|---|
| Collection list | Collections as a List (on desktop each collection's image follows the pointer), a Grid of image tiles, or a Mosaic: tiles of mixed shapes with Height, Overlay opacity, Show numbers and Outline titles (titles fill in when pointed at). On phones the mosaic has its own Columns and Height under Mobile layout. |
| Collection panels | Riding styles (Road, Track, Adventure…) side by side. Layout: Expanding panels (tall panels that open when pointed at), Grid, Starting grid (the Esses home-page default, with numbered slots that move into place in grid order) or Live feed (one collection large beside the others; pointing at another switches to it). Show numbers displays outlined 01, 02, 03 labels in the color scheme accent. On phones the panels stack or scroll sideways. |
Story and trust#
| Section | Use it for |
|---|---|
| Image with text | A picture with a heading, text, details and a button: with a curved edge, beside, overlapping or on the image. |
| Image comparison | Drag between two pictures, for example a jacket outside and its armor inside. |
| Image gallery | Several images as a mosaic, grid or carousel. |
| Multicolumn | Columns with an icon or image, heading and text, such as delivery, returns and warranty. |
| Rich text | A heading, text and buttons. |
| Marquee | Short lines that run across the page. It pauses under the pointer and has a pause button. Icon sets the mark between lines (checkered flag, star, check mark, dot or none), or upload your own in Custom icon. Fade edges (off by default) softens both ends. |
| Testimonials | Quotes from customers, as a carousel or grid. Card style offers Timing card (default), Ticket, Number plate and Pit board. A new testimonial starts without stars; they show once you set its Rating. |
| Logo list | Brand or partner logos, as a grid or a scrolling row. Fade edges (off by default) softens the ends of the scrolling row. |
| FAQ | Questions that open to show their answers. |
| Blog posts | The latest posts from a blog. Layout: Grid, Carousel or Timeline (posts as stops along a brass line, above and below it in turn; a line down the side on tablets and phones). Image ratio (Adapt to image, Landscape, Wide, Square, Portrait) works for every layout, and Show date adds each post's date. For the timeline, Mobile layout > Show featured image keeps or hides pictures on phones. |
Contact and email#
| Section | Use it for |
|---|---|
| Contact form | A form that sends messages to your store email, with your contact details beside it. |
| Map | Your shop on a Google map with the address, opening hours and a Get directions button. No API key is needed. |
| Email signup | An email signup. Signups are saved in Customers. See Email signup below. |
| Email signup popup | An email signup that opens once per visitor after a delay. It's in the Overlays group in the sidebar. |
Email signup#
- Layout: Text beside the field, Text above the field, Text beside an image or Text over an image. The image layouts add Image and Image position (Start or End); Text over an image also has Overlay opacity.
- Field style: Number plate, Pit board or Line.
- Mobile layout: Text alignment, Button on phones (Below the field or Beside the field) and, for the image layouts, Show image.
Other#
| Section | Use it for |
|---|---|
| Apps | Blocks from your apps, such as a reviews widget. |
| Custom Liquid | Your own Liquid, HTML or app snippet. |
Storewide sections#
| Section | Use it for |
|---|---|
| Announcement bar | A short message above the header, with an optional link and rotation between messages. |
| Sticky add to cart | Keeps the selected product and Add to cart action within reach on a product page. |
Template sections#
These sections belong to a specific Shopify page template and are already present when you open that template.
| Section | Template |
|---|---|
| Blog | Blog |
| Blog post | Blog post |
| Cart | Cart |
| Collections list page | Collections list |
| Gift card | Gift card |
| Page | Page |
| Page not found | 404 page |
| Password page | Password |
| Search results | Search |
Overlays#
The Overlays group, at the bottom of the sidebar, holds the parts that open over the page: Cart drawer, Quick shop and Email signup popup. They only appear when they open.
- Cart drawer > Style: Floating (a margin around it, rounded corners) or Edge to edge (the full height of the screen against its side). On phones (Mobile layout > Style): full screen with margin, full screen edge to edge, slide in from the side, or a bottom sheet.
- Quick shop opens from the Choose button on product cards in the theme's livery: the buying column has an angled edge with three racing stripes between it and the pictures.
Cart page#
The Cart section on the cart page is built from blocks. Drag them into the order you want:
| Block | What it does |
|---|---|
| Shipping gauge | How far the shopper is from free shipping. The amount is set in Theme settings > Cart > Free shipping threshold. |
| Dispatch countdown | A countdown to your Same-day shipping cutoff (06:00 to 22:00) on your Shipping days, with your own Countdown text and Business days before shipping. |
| Order note | A note field. Show quick notes adds the one-tap notes from Theme settings > Cart > Quick notes. |
| Discount code | Shoppers add and remove discount codes. |
| Totals | Order discounts, the subtotal and the line about taxes and shipping. |
| Terms checkbox | A box shoppers tick before they can check out, with its own Text. Accelerated checkout buttons hide while it shows. |
| Checkout | The checkout button, and Show accelerated checkout buttons. |
| Payment icons | The payment methods you accept. Show label writes Pay with above them. |
| Text, Custom Liquid | Your own text or code. Apps can add blocks too. |
Totals and Checkout always show: if you remove their blocks, they appear at the end. The cart drawer is set in Theme settings > Cart.