Homepage Sections
Peregrine ships fifteen 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 its own title/text/background colours with an optional border for a card look. 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.
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, plus per-tile heading/text/background colours, border and drop shadow. Tile heading and tile text align independently, each with desktop/mobile values, and the section takes its own background colour.
Image with text
The story block: image left or right (with mobile image support), subheading, heading, rich text and button, with background and text colour controls.
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 from any blog: 2–6 posts, 2–4 columns, with toggles for date, author, excerpt and a View All link. 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: slideshow → trust strip → custom Liquid → rich text → collection list → featured collection → promo tiles → image with text → hero banner → custom section → testimonials → FAQ → blog posts → newsletter. It's a top-to-bottom conversion narrative: promise, reassurance, positioning, category routes, products, offers, story, a full-bleed break, proof, the questions that stop a sale, content, capture.
You are not meant to keep all fourteen. 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 Background color and Text color pickers that inherit your theme colours when left blank — 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.