Homepage Sections

Peregrine ships eighteen homepage sections, all block-based and reusable on other page templates. Each loads its own CSS/JS only when present. Design controls follow the theme-wide rule: alignment, columns and padding come in desktop/mobile pairs — see Blocks & Card Styles.

Slideshow

The flagship hero. Each slide is a block (up to five) with:

• Desktop image + mobile image — set a portrait crop for phones; the browser downloads only the file it needs. A per-slide switch turns the mobile image off without deleting it. No mobile image? The desktop image shows everywhere.
• Heading, subheading, description — each with its own colour picker, plus per-slide text alignment.
• Heading size and subheading size — a pixel slider each, per slide, so a short punchy headline and a wordy one can be sized independently. The slider sets the desktop size; mobile scales down proportionally so a large desktop heading doesn't overflow a phone. Your Typography heading scale still applies on top, so a store-wide change still reaches your hero.
• Two buttons — primary and secondary, with per-slide button colours.
• Heading tag — Auto by default (see SEO Features for the H1 system).

Section-level: minimum height for desktop and mobile, image overlay opacity, auto-rotate with speed control, arrows, dots. Shoppers can swipe on touch devices; rotation pauses on hover and respects reduced-motion preferences.

Hero banner

A single full-width banner, where the slideshow is a rotating set. Use it when you have one message rather than five — a season launch, a sale, a campaign — or further down the page as a full-bleed break between product rows.

• Desktop image + mobile image — the same art-directed pair as a slide, with a switch to turn the mobile crop off without deleting it.
• Heading, subheading, body text — with text alignment, and colour pickers for text, background and both buttons.
• Two buttons — a solid primary and an outlined secondary. The secondary follows the section's text colour, so it stays readable on a dark photograph.
• Overlay opacity — darkens the image behind the text. On an already-dark photograph you will want this lower than the default.
• Minimum height — separate values for desktop and mobile.
• Heading tag — leave this at H2 when the section sits below a slideshow. Setting it to H1 makes it the page's H1 and demotes the slideshow's, which hands your most important heading to a section halfway down the page. See SEO Features.

FAQ

A list of questions with answers, as an accordion — and the one section that can describe itself to search engines as structured data. Each question is a block with the question, a rich-text answer, and a switch to open it by default.

• Describe these as FAQ structured data — on by default. Emits FAQPage markup built from the very same questions the page shows, so the two can never disagree; Google requires marked-up Q&A to match what a visitor sees. Turn it off on a second FAQ section, since only one per page should claim to be that page's FAQ.
• A half-filled question — a heading with no answer, or the other way round — renders nothing and is left out of the markup, so a section mid-edit never publishes an empty row or invalid data.

Put it on a help page, a product page or a blog article as easily as the homepage. SEO Features explains what FAQ structured data does and does not do today — worth two minutes before you assume it changes how you appear in Google.

Collapsible content

An accordion of expandable rows — an FAQ, delivery and returns detail, care instructions — with one row optionally open by default. Each row takes a heading, an icon from the built-in set, and its body from one of three places:

• Rich text written directly in the row.
• A page — pick any page and the row shows its content, so one page can feed rows on several templates.
• A store policy — pick Shipping, Refund, Privacy, Terms or Subscription and the row renders that policy from Settings → Policies. Write the policy once and every row showing it stays in step automatically; there is no copy to keep updated in two places.

Section-level: heading with per-device alignment, a narrow-width toggle for readability, padding pairs and colours. The same block is available inside the product page — see Product Page.

Custom section

An empty container you fill with any of the theme's blocks, for a layout none of the named sections gives you. Add headings, text, buttons, images, icons and groups, and nest a Group inside it to arrange them in a row or a column with their own spacing and alignment. An optional background image sits behind the lot.

Multicolumn

Icon-and-text columns (up to six) — the classic trust strip: free shipping, returns, secure checkout. Pick from 28 built-in line icons or upload your own image per column. Each column takes a heading, rich text, an optional link, and an optional border for a card look. Columns follow the section's colour scheme; tick Use a different color scheme on one to set it apart. Section-level padding comes in desktop/mobile pairs. The preset seeds a ready-made three-column trust strip.

Rich text

A centred (or left-aligned) statement block: heading, subheading, body text, optional button. A narrow-width toggle caps line length for readability, with vertical padding and separate desktop/mobile horizontal padding controls. Ideal directly under the hero for your brand statement.

Collection list

A grid of collection cards (up to 12) with hover zoom and optional product counts — your "shop by category" block. Columns are set separately for desktop (2–5) and mobile (1–3), the heading aligns per device, and an Image shape setting fits every card to Square, Landscape, Portrait — or Natural for no shape at all — with an Image fit control beside it: Contain (the default) shows the whole image, Cover fills the shape and crops the edges. Results alignment controls where a partial row sits, and the shared Card style group adds background, border and drop shadow — plus a Text colour for the card caption, so a dark card background doesn't leave you with dark text on it. Leave the text colour blank to keep following your theme colours.

The caption's size and alignment now live in Theme settings → Typography → Collection cards, not in this section, so this row and the /collections page always match. This replaces the section's old Result text alignment control — if you had it set to something other than centred, set it again in its new home.

Featured collection

Products from any collection in a configurable grid (desktop and mobile columns), with second-image hover, an optional View All link, and per-device controls for heading alignment, results alignment, image shape and card styles. The card text itself — title size and alignment — follows Theme settings → Typography → Product cards, so this row always matches your collection pages. Padding comes as vertical + horizontal desktop/mobile sliders.

Recently viewed

The products this shopper has looked at before, newest first. Add it to any template — it earns its place on the cart page and the product page, and works just as well low on the home page. The usual settings apply: heading and heading tag, how many products, desktop and mobile columns, image shape and second-image hover. The cards are the same ones your collection pages use, so it always matches.

It will look empty to you in the editor, and that is correct. The list is kept in each shopper's own browser, so there is nothing for the editor to show — you will see a note explaining it where the products will appear. Visit a few products on your live store and it fills in.

On a product page the item being viewed is left out, so the row is genuinely "what else you looked at" rather than leading with the page the shopper is already on. If a shopper has no history, the section hides itself completely rather than leaving a heading over an empty row.

With Add to cart on cards switched on, these cards carry the option rows and Add button like every other grid. On the cart page the Add behaves as a cart add: the cart's own contents, totals and rewards bar refresh in place, rather than a drawer sliding over a cart page still showing the old figures. Everywhere else it behaves as it does on a collection page.

Nothing is sent anywhere. The history lives in the shopper's browser, never reaches your store or ours, and clears when they clear their browsing data — so it needs no cookie banner. You can switch it off entirely at Theme settings → Layout → Recently viewed products, which also stops the store recording anything, not just showing it.

One placement to avoid: the search results template. The section talks to Shopify's search behind the scenes to fetch its products, and putting it on the search page itself would have the two competing.

Promo tiles

Up to four image tiles with heading, text and link — new arrivals, best sellers, sale. Each tile supports its own mobile image, a border and a drop shadow, and follows the section's colour scheme unless you tick Use a different color scheme on it. Tile heading and tile text align independently, each with desktop/mobile values, and the section takes its own colour scheme.

Image with text

The story block: an image left or right (with a separate mobile image if you want one) beside a text column built from the theme's own eyebrow, heading, text and button blocks, so you can reorder them, repeat them or leave any out. The section takes a colour scheme, an image height and width, and padding controls.

Full width runs the image to the edge of the screen and butts it against the text with no gap. In that mode the horizontal padding controls disappear, because a side inset would defeat the point; vertical padding still applies, as space above and below the band on the section's background, so set it to 0 for two full-width sections to meet on a hard seam.

Field notes

A dated log, set as an editorial timeline: a date in the margin, a rule running the length of the list, and an entry hanging off it. It is for the maker's own record — what we tested, what failed, what we changed — and that is what separates it from a testimonial. A testimonial is a customer's words about a finished product; a field note is your own working record of making it, and it reads as evidence rather than endorsement.

Each entry is a block with a date label (free text, so "Batch 4" or "Mile 120" are as valid as a month), an optional place, a heading, the note itself and an optional attribution. The section takes an eyebrow, a heading and an introduction above the list. It is deliberately text-only: it needs no photography at all, which makes it the section that still looks designed on the day a store has no images yet.

It suits anything that is made, tested, aged or batched — clothing, coffee, furniture, cosmetics — and it does equally well on an About page as on the homepage.

Find your fit

The measurements form beside a paragraph of your own. A shopper saves their chest, waist and hips once; every Fit finder in the store then fills itself in and works out the size, and every product card marks their size in its size run. It is the same form the header's My size button opens, placed where you can say why you ask — and where a search engine can read it, which a drawer never gives you.

Eyebrow, heading (with its heading tag), rich text, and a link — a guide to measuring is the natural one. The boxes are the store's measurements from Theme settings → Fit finder — the same list the header's button uses — each with its hint under the box and a Used for tooltip behind an info icon beside the label. The privacy note under the Save button is yours to word; the default says the numbers stay in the browser and delete themselves an hour after the shopper last used the store. The form is hidden until at least one measurement is switched on.

Testimonials

Up to nine quote cards with star ratings (0–5, zero hides the stars), rich-text quotes and author names, on a configurable background.

Blog posts

An article grid, 2–5 columns on desktop, with toggles for date, author, excerpt and a View all link. Posts chooses where the articles come from: Latest posts from a blog (the default) shows the newest 2–6 from the blog you pick and updates itself every time you publish; Chosen posts shows exactly the articles you add as Post blocks, in the order you put them, for guides you want to keep on the page — a sizing guide, a care guide, the story behind the brand. In that mode the View all link goes to the first chosen post's blog. Before you have articles, the section shows tidy placeholders rather than an empty gap.

Newsletter

An email signup wired to Shopify customer records — subscribers appear in your admin with the "newsletter" tag.

The demo homepage recipe

Peregrine's demo store arranges these as: hero banner → featured collection → rich text → image with text → promo tiles → multicolumn → field notes → featured collection → image with text → testimonials → collapsible content → FAQ → blog posts → recently viewed → newsletter. It's a top-to-bottom narrative: promise, products, positioning, story, offers, reassurance, evidence, more products, more story, proof, the questions that stop a sale, content, a way back, capture. Every section is one you can drop; the shape is the point, not the count.

You are not meant to keep all eighteen. The demo runs the full set so you can see each one working before you decide; a real store usually keeps six to nine. Deleting a section removes its CSS and JavaScript from the page entirely, so a shorter homepage is a faster one.

Custom Liquid

An escape hatch for anything the built-in sections don't cover: paste your own Liquid, HTML or an app's embed code straight into a section. It takes the same appearance controls as the rest of the theme — Use narrow width, vertical padding, and a Color scheme picker — so custom content sits in the page rather than on top of it.

Typical uses: a third-party review or booking widget, a table of sizes, a countdown from an app that gives you a snippet, or a bit of Liquid reading a metafield you've set up.

Custom Liquid also exists as a block — the same paste-your-own-code idea, but placed inside a section rather than as its own full-width band. Anywhere the Add block picker appears (the product page's info column included), you can add a Custom Liquid block and drop a snippet exactly between two existing elements.

Two things worth knowing. Content you paste here is yours to maintain — it isn't covered by theme updates or theme support, and a broken tag can stop the section rendering. And Liquid runs on Shopify's servers, so it can read your store's data (products, collections, metafields) but can't reach anything outside it.

Next: set up your collection pages →