Blocks & Card Styles

Peregrine is built on Shopify's theme-block architecture — the same modern foundation as Shopify's newest themes. Content is composed from a small library of reusable blocks, so the same controls work the same way everywhere.

The block library

Seven core blocks power the theme. Wherever you can add blocks, these behave identically:

• Heading — text, visual size (XL–small), alignment, and the SEO heading tag (H1–H6). The tag is semantic only: it never changes the visual size, so you can keep a clean heading hierarchy without redesigning anything.
• Text — rich text with alignment.
• Button — primary or secondary style, drawn from your global button settings.
• Image — with a separate mobile image picker and toggle. Set a portrait crop for phones; browsers download only the file they need.
• Icon — 28 built-in line icons or your own uploaded image, with a size control.
• Group — a layout container that nests other blocks with direction, alignment and spacing controls.
• Custom Liquid — paste your own Liquid, HTML or an app snippet between any two blocks. The same escape hatch as the Custom Liquid section, at block scale.

Sections like testimonials, multicolumn, promo tiles and the slideshow use purpose-built blocks (testimonial card, column, tile, slide) so repeated items stay consistent with minimal per-item setup. The Custom section is an open canvas: add any library blocks and compose freely.

Desktop and mobile controls

Peregrine's design controls come in pairs: a desktop value and a mobile value. Alignment, column counts, padding and spacing can all differ per device — centre a heading on mobile while keeping it left on desktop, or show two columns on phones and five on desktop. Look for the (desktop) / (mobile) suffix on settings.

The same philosophy applies to imagery: every image picker in the theme's sections offers a paired mobile image, so you can art-direct phones separately instead of serving a cropped desktop shot.

Card styles

Every grid of results in the theme shares one Card style control group — the collection page, the collections list page, collection list, featured collection, product recommendations, the blog index and blog posts, plus promo tiles. Learn it once and it works the same everywhere:

• Card background — the card's own colour, independent of the section background.
• Card border width — 0 for none; any value reveals a Card border color picker alongside it.
• Drop shadow — None, Soft, Medium or Strong.

Adding a border or shadow automatically turns each result into a padded, rounded card that lifts off the page. With both off, the layout stays completely flat. On every grid section the card style applies to the whole grid; on promo tiles it is set per tile, so one tile can be lifted out of a flat row to draw the eye.

Image shape

Collection list and featured collection include an Image shape setting — Square, Landscape (4:3), Portrait (4:5) or Natural. The first three give every card a uniform shape for a tidy grid; Natural shows each image at its own proportions, so card heights follow the source images.

Where a shape is set, Image fit decides what happens to an image whose proportions don't match it:

Contain is the default, because it never hides part of a product. Choose Cover when a perfectly even grid matters more than seeing every image whole — and check your tallest and widest images afterwards, since those are the ones that lose the most.

Result alignment

Grid sections have Results alignment, a desktop/mobile pair deciding where a partial row of cards sits — three items under five columns can sit Left, Center or Right.

Aligning the text inside a product card is a different thing and is set once for the whole store, in Theme settings → Typography → Product cards, along with the title size. The Collection list section keeps its own Result text alignment, because it shows collection tiles rather than product cards.