# Sections

Chapter 4 of the Hooray user guide.

In the theme editor, click **Add section** to add any of the sections below to a page. Most sections share two settings:

* **Background**: **Page**, **Surface** (the quiet band), **Bright block A**, **Bright block B** or **Deep band**. On a bright block or the band, the section's text and buttons switch to that block's own colours, so they always read. A section's own default is in its table.
* **Streamer at the bottom edge**: **None**, **Streamer A (block A colour)**, **Streamer B (accent)** or **Streamer C (block B colour)**: a curling paper streamer along the section's lower edge, which joins it to the next. One or two per page is plenty.

Several sections also have **Heading alignment**: **Left** or **Centre**. Text settings show their sample words in brackets. Change every one of them.

## Hero

The home page's opening, and only the home page can have one.

| Setting | Default | What it does |
| --- | --- | --- |
| Layout | Balloons | **Balloons**: the words on the left, your main image cut as a big balloon on the right, with up to two smaller balloons and the garland arc behind them. **Image with a card**: one full-width picture with the words on a card at its lower left. **Colour block**: like Balloons, without the garland, on whatever **Background** you choose. |
| Image | | Cut as a balloon in the Balloons and Colour block layouts: keep the subject in the middle and upper part. Shown full width behind the card in the Image with a card layout. |
| Mobile image | | With **Image with a card**: a picture for phones, such as a taller crop |
| Second image, Third image | | The two small balloons. With Balloons and Colour block. |
| Show the garland | On | The decorative garland arc in your palette's colours. With Balloons. |
| Show confetti | On | A light scatter of confetti behind the words |
| Eyebrow | "Balloons, tableware and garlands in Marrickville" | The small line above the heading |
| Heading | "Let's party." | The page's main heading. Make a word italic to set it in the accent colour, as Toast does. Left empty, it shows your shop name. |
| Body | "Everything for birthdays, showers and the big ones…" | |
| Primary button label, Primary button link | "Shop by occasion" | With no link, it goes to all products |
| Secondary button label, Secondary button link | "Build a garland" | With no link, it goes to all products |
| Fact 1, Fact 2, Fact 3 | "Same-day pickup", "Helium on the day", "Free shipping over $100" | Short facts under the buttons, each with a coloured dot. State only terms your store actually offers. |
| Background | Page | |
| Streamer at the bottom edge | None | |

**Without images, the balloons are plain colours** from your palette's garland set, so a fresh install never shows a broken picture. With **Image with a card** and no image, the card sits on a plain ground, scattered with confetti while **Show confetti** is on. On phones the balloons sit above the words.

## Slideshow

Rotating images, on the home page, pages and collections. Up to six **Slide** blocks, each with an **Image**, **Eyebrow**, **Heading** ("Gold and white, for the big ones"), **Text**, **Button label** and **Link**.

| Setting | Default | Notes |
| --- | --- | --- |
| Media position | Left | **Left** or **Right**: which side the picture sits |
| Image ratio | Wide 16:9 | **Adapt to first image**, **Wide 16:9**, **Standard 4:3** or **Square 1:1** |
| Rotate slides automatically | Off | Shoppers get a pause button. Slides never rotate for visitors who prefer reduced motion. |
| Change slides every | 7s | 5 to 10s. Shows when rotation is on. |

## Shop by occasion

Occasion balloons that link to your collections. See chapter 8.

## Turning picker

Number balloons for common ages, plus a field for any other age. See chapter 8.

## Featured collection

A row of products. **Eyebrow** ("Best sellers"), **Heading** ("What every party ends up needing"), **Text**, **Collection**, **Products to show** (4, from 2 to 12), **Link label** ("Shop all"), **Link** (blank links to the collection), **Heading alignment** (Left), **Background** (Page) and **Streamer at the bottom edge** (None).

With no collection chosen, shoppers see a row of sample cards ("Example product"), so choose one. A chosen collection with no products shows nothing.

## Featured product

One product with its buy box, on any page. In every preset it's the home page's **garland builder**: the product is your garland kit, and its blocks are an eyebrow, a heading, a line of text, the price, the variant picker, the **Garland builder** (chapter 9), the buy buttons and a **See the full kit** button.

| Setting | Default | Notes |
| --- | --- | --- |
| Product | | **Until you choose one, the section shows nothing to shoppers.** In the theme editor it says "No product selected" over a placeholder picture and "Example product". |
| Layout | Product gallery | **Product gallery** or **Garland preview in place of the gallery**: the builder's live preview takes the gallery's column. The preview option needs a Garland builder block in this section; without one it shows the gallery. Every preset uses the preview. |
| Background, Streamer at the bottom edge | Page, None | |
| Enable image zoom | On | Adds a zoom button to each image and opens images full screen |
| Pre-orders | Off | The same three settings as the product page (chapter 6) |

Its blocks are **Title**, **Product vendor**, **Price**, **Inventory**, **Variant picker**, **Description**, **Garland builder**, **Occasion chips**, **Buy buttons** and **Product link**, plus the general blocks in chapter 5.

## Collections grid

Your collections as balloons on strings or as cards, on the home page, the collections list page and other pages. The Garland preset uses it for "Recent setups".

| Setting | Default | Notes |
| --- | --- | --- |
| Eyebrow, Heading, Body | "Collections" | |
| Link label, Link | | A link beside the heading |
| Layout | Balloons | **Balloons**: each collection's image cut as a balloon over its colour, hanging from a string, in a sideways row on phones. **Cards**: rounded image cards. |
| Show product counts | On | |
| Collections | | Used when the section has no **Collection tile** blocks. Leave empty to list every collection. |
| Collections per page | 12 | 4 to 24, in steps of 2. On the home page, the most tiles shown. |
| Heading alignment, Background, Streamer at the bottom edge | Left, Page, None | |

For hand-picked tiles, add **Collection tile** blocks: **Collection**, **Title** ("Arches"; leave empty to use the collection's title), **Image** (leave empty to use the collection's image; keep the subject in the middle and upper part), **Colour** (shows behind a transparent image and when there's no image) and **Link** (leave empty to link to the collection). A tile with no collection and no link opens your list of all collections. The Garland preset's five tiles have no collection chosen, so choose one for each.

## Party in a box

Plates, cups, napkins and favours for the guest count, added in one tap. See chapter 11.

## Installation enquiry

A form for installation and event enquiries. See chapter 12.

## Bundles

Ready-made kits you sell as one product, such as "Dinosaur party for 12". Add a **Bundle** block for each: **Product**, **Tagline**, **Kit contents** (list what the kit includes, one item per line, or connect a metafield) and **Button label** ("Add kit to cart"). The button adds that product to the cart, so create the kit as a product of its own first. Give it a compare-at price and the block shows the saving. With no blocks, shoppers see nothing.

The section's own settings are **Eyebrow** ("Bundles"), **Heading** ("Ready-made parties"), **Body**, **Background** (Surface) and **Streamer at the bottom edge**. To let shoppers build a box for their own guest count, use **Party in a box** instead.

## Shop the table

A photo of a party table with numbered hotspots that open a small panel. The same details are listed under the image, so phone shoppers and keyboard users get them too. The image is shown uncropped, at its own shape, so hotspots stay on the things they mark at every screen size.

The section has an **Image**, **Eyebrow** ("Shop the table"), **Heading** ("Everything on this table"), **Background** and **Streamer at the bottom edge**. Add up to 20 **Hotspot** blocks:

| Setting | Default | Notes |
| --- | --- | --- |
| Label | "Item name" | Change it to what's pictured, or clear it to use the chosen product's title |
| Horizontal position | 50% | 0 to 100%, from the image's left edge |
| Vertical position | 50% | 0 to 100%, from the image's top edge |
| Product | | Optional. Shows the product's price and stock, and links to it. |
| Detail | | A short note, such as "12 per pack". You can connect a metafield of the chosen product. |

## Image with text

| Setting | Default | Notes |
| --- | --- | --- |
| Image | | |
| Image style | Plain | **Plain** or **Balloon** (cut as a balloon) |
| Media position | Left | **Left** or **Right** |
| Eyebrow, Heading, Body | "Balloons filled on the day" | |
| Button label, Link | | |
| Background, Streamer at the bottom edge | Page, None | |

## Icon row

Short facts, up to six items, with icons in round tiles. **Eyebrow**, **Heading**, **Columns on mobile** (**2 columns** by default, or **1 column**), **Background** and **Streamer at the bottom edge**.

Each **Item** has an **Icon** (**None**, **Van**, **Balloon**, **Gift**, **Party box**, **Calendar**, **Pin**, **Clock**, **Shop**, **Return**, **Shield**, **Check mark** (the default), **Star**, **Heart**, **Chat**, **Headset**, **Lock**, **Card** or **Globe**), a **Heading** ("Same-day pickup"), **Text** and a **Link**. State only terms your store actually offers.

## Rich text and Testimonials

Your words, in a column. **Eyebrow**, **Heading**, **Text**, **Layout** (**Single column** or **Three up**, which sets blocks side by side), **Heading alignment**, **Background** and **Streamer at the bottom edge**. It takes the general blocks in chapter 5, and the **Delivery zones** block (chapter 10).

In **Add section** it's listed twice: as **Rich text**, and as **Testimonials**, which starts in the Three up layout with three **Testimonial** blocks. Each testimonial is a card with a **Quote**, **Name** ("Hannah"), **Detail** ("Rainbow party, 30 guests"), **Avatar image** (cut as a balloon) and **Colour** (the avatar balloon's colour when there's no image; blank uses a garland colour).

Use real words from real customers. The presets' testimonials are samples.

## As seen in

Press mentions and partner logos, up to 12. **Heading** ("As seen in"), **Logo colors** (**Monochrome** by default, or **Original**), **Logo height** (40px, from 24 to 96px), **Layout on mobile** (**Wrap** or **Scroll**), **Background** and **Streamer at the bottom edge**.

Each **Logo** has an **Image**, a **Company name**, a **Link** and a **Quote**. Monochrome turns each logo into one flat colour, so use logos with transparent backgrounds. A logo shows only with an image and a name (the name falls back to the image's alt text). Screen readers read the name as the logo.

## Blog posts

Your newest articles. **Eyebrow** ("Journal"), **Heading** ("Party notes"), **Blog**, **Articles to show** (3, from 2 to 12; shows while **Articles** is empty), **Articles** (overrides the blog: they appear in the order you pick them), **Background** and **Streamer at the bottom edge**. With no blog and no articles chosen, shoppers see nothing.

## Newsletter

An email sign-up: **Heading** ("Party ideas, restocks and the odd discount"), **Body** ("One email a fortnight. Leave whenever you like."), **Show confetti** (on), **Background** (Surface) and **Streamer at the bottom edge**. Addresses go to **Customers** in Shopify admin, tagged `newsletter`. The theme doesn't send anything itself, so promise only what you'll send from Shopify Email or your own email tool.

## FAQ

Questions and answers, with one **Collapsible row** block each. **Eyebrow**, **Heading** ("Good to know"), **Body**, **Background** and **Streamer at the bottom edge**.

## Product details

Product pages only. Two columns under the buy box: **What's in the kit** on the left and **Good to know** accordions on the right.

| Setting | Default | What it does |
| --- | --- | --- |
| Eyebrow, Heading (first pair) | "What's in the kit", "Everything in the box" | Above the kit table |
| Eyebrow, Heading (second pair) | "Good to know", "Before the big day" | Above the accordions |
| Background, Streamer at the bottom edge | Surface, None | |

The kit table is a **Kit contents** block that lists facts you already keep in Shopify: the product type, vendor and weight (the presets turn SKU, variant options and barcode off). Click it to change what it shows, and add **Kit contents row** blocks to show product metafields (chapter 6). The accordions are **Collapsible row** blocks. The presets' accordions make claims about build times, helium and returns: rewrite them.

## Product recommendations

Product pages only. **Eyebrow** ("Goes with it"), **Heading** ("Finish the table"), **Link label**, **Link**, **Recommendation type** (**Related products**, which are similar, or **Complementary products**, which pair with this one) and **Products to show** (4, from 2 to 10).

Shopify works out related products by itself once it has order history. Complementary products are ones you choose in the Search & Discovery app: plates that go with the cups, a pump that goes with the garland kit.

## Quick order list

Product pages only: see **B2B** in chapter 6.

## Section and Custom Liquid

**Section** is an empty container: fill it with any blocks in chapter 5. **Custom Liquid** takes Liquid code, such as an app snippet.

## Sections that belong to a template

These can't be added, but you'll see them when you open their template in the editor.

| Section | Settings |
| --- | --- |
| Collection | **Show breadcrumbs**, **Show collection image**, **Show description**, **Enable filtering**, **Enable sorting** (all on), **Show vendor** (off), **Products per page** (12, from 8 to 36 in steps of 4) |
| Search | **Show breadcrumbs**, **Enable filtering**, **Enable sorting** (all on), **Results per page** (12, from 8 to 36 in steps of 4) |
| Contact form | **Show breadcrumbs**, **Eyebrow** ("Say hello"), **Show order number field** (on). Blocks: **Menu column** (**Heading** "Quick links", **Menu**) and **Text** (**Heading** "Before you write", **Text**), in a column beside the form. Messages go to your sender email, like enquiries (chapter 12). |
| Page | **Show breadcrumbs**, **Eyebrow**, **Label** ("At a glance"). **Fact** blocks (**Label**, **Value**) list key facts under your page text. |
| Compare | See below |
| Blog | **Show breadcrumbs**, **Body**, **Show featured entry** (on), **Show tags** (on), **Articles per page** (10, from 6 to 30 in steps of 2) |
| Article | Blocks: **Breadcrumb**, **Title**, **Byline** (**Show author**), **Featured image**, **Content**, **Tags** and **Share** |
| 404 page | **Heading** ("This page has floated off"), **Body**, **Show the garland** (on), **Show the requested address** (on), **Background** (**Page** or **Surface**) |
| Password | **Heading** ("We're getting the party ready"), **Body**, **Show newsletter form** (on) |
| Cart, Cart drawer | See chapter 13 |

## Compare

Shoppers tick **Compare** on up to three cards and see them side by side. To turn it on:

1. Create a page in **Online Store › Pages** and set its **Theme template** to `page.compare`.
2. In **Theme settings › Product cards**, turn on **Show compare checkbox** and choose the page as **Comparison page**.

The table shows each product's price and availability, then the rows of its **Kit contents** block, headed "Specifications": the product type, vendor and weight, plus any **Kit contents row** blocks you add to compare metafields such as `custom.pack_size`. In the theme editor, the first product in your catalog previews the rows.