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:
- Create a page in Online Store › Pages and set its Theme template to
page.compare. - 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.