Sections

Documentation scope: Guild 0.1.x pre-release builds. The exact public release version will be confirmed in the changelog before Theme Store publication.

Sections are the main content areas merchants add and edit in the Shopify theme editor. This guide covers the merchant-facing sections currently available in Guild and explains where each one is usually strongest. Use Theme editor workflow when you need to decide whether a change belongs in Shopify Admin, Theme settings, templates, sections, blocks, apps, Custom HTML, Custom Liquid, or code. For Shopify's general section/block model, see Shopify's sections and blocks documentation.

Choose a task guide

Use the shorter task guides before the full catalog when you already know the storefront job:

The detailed catalog below remains the reference for individual section controls and block behavior.

Many content sections share layout controls such as section width, background width, container max width, content max width, content position, height type, boxed mode, color scheme, padding, bottom spacing, and edge-alignment controls. Height type can be None, Minimum height, Viewport height, or Aspect ratio, and only the selected height model is active. Under Advanced options, Align with header and Align with footer remain available with both Default and Full width backgrounds. Sections that expose Reveal content on scroll also expose Reveal style (Slide from start/end/top/bottom or Zoom in/out) and a Delay of up to 2000ms. Use Align with header only when the section is the first section in the main content, and use Align with footer only when the section is the last section before the footer. Set those controls with the content in mind: a product grid, a press-logo strip, and a full-bleed room scene usually need different amounts of breathing room.

Theme Editor picker categories

Guild uses ordered preset categories in Shopify's Add section and Add block pickers. Context-specific categories appear first where they apply, followed by reusable families. Not every category appears in every picker because template restrictions and explicit block allowlists keep unrelated options out of context.

The active category model is:

a. <context> for context-specific Article, Cart, Collection, Navigation, Password, Product, Search, Hero, and similar surfaces;
b. Layout for reusable layout shells and contextual Row, Column, and Box variants;
c. Content for reusable editorial, promotional, informational, trust, and utility content;
d. Collections and other resource-specific d. ... groups for discovery cards and lists;
e. Modules for reusable higher-level modules;
f. Galleries for visual galleries and card systems;
g. Forms for forms and fields;
h. Misc / h. Utilities for support utilities;
i. Custom for Custom HTML, Custom Liquid, and page-content integrations.

Choose sections by storefront job

Use this task map when deciding which section to add first. It is a usage guide rather than a second set of Theme Editor picker categories. The section names stay category-neutral so the same theme codebase can support the first Home/decor preset and future presets in other visual commerce categories.

Category	Sections	Best use
Store shell	Header, Footer	Site-wide navigation, utility links, localization, account, search, cart, support links, and policy paths.
Visual storytelling	Hero slideshow, Image divider, Media with content, Google map, Layered content, Before and after, Image hotspots, Shop the look	High-impact imagery, campaign storytelling, lookbooks, room scenes, store locations, product hotspots, and editorial selling.
Flexible content	Rich content, Boxed content, Columns, FAQ accordion, Tabbed content, Breadcrumbs, Spacer	Reusable page content, trust bars, specifications, tabs, accordions, grouped cards, utility layouts, and page structure.
Commerce and catalog	Featured collection, Featured catalog, Related products, Complementary products, Recently viewed	Product and collection discovery, product-page recommendations, curated category paths, and browsing recovery.
Forms and capture	Contact form, Newsletter form, Popup, Newsletter popup	Customer contact, email capture, focused announcements, age verification, and popup campaigns.
Editorial and support	Blog posts, Related links and text	Blog discovery, supporting collection copy, buying guides, internal links, and SEO-oriented supporting content.
Utility and custom	Back-to-top button, Custom HTML, Custom Liquid	Utility interactions and controlled custom insertion points. Use custom code only when regular sections cannot handle the content.
Special templates	Gift card	Issued gift card display, redemption code copy, QR code, Apple Wallet, recipient/message details, and focused gift card utility content.

Start simple, then add structure

For normal setup, choose the section or section preset that already matches the merchant job, replace its content, and adjust its section-level layout. Use Rich content presets for prepared compositions such as Store highlights, Testimonials, Gallery, Team, or Trust and reassurance.

Use structural blocks such as Row, Column, Box, or generic Item blocks only when a ready-made preset cannot express the intended composition. They are advanced composition tools, not required steps for building every page.

Use Header for the logo, Main menu, search, account access, cart access, and optional utility content above the main header. Create menu content in Shopify Admin first; Guild controls how the selected menu is presented. Shopify controls customer-account authentication and account pages.

Recommended use:

Configure Logo, Main menu, Header controls, and Main search before publishing. This matches their Theme Editor order.
Add Top bar for shipping messages, country selector, language selector, or short service links.
Keep top-level menu labels short, especially when the menu is inline with the logo.
Use Dropdown style for regular dropdowns, automatic mega menus from suitable three-level menus, or forced mega-menu presentation. Auto creates a mega menu when the selected Shopify menu has a deeper nested level or when a matching Mega menu panel is present.
For generated mega menus, use Maximum mega menu columns and Column gap to control the navigation grid. The maximum applies to columns generated from menu links; an optional Mega menu panel does not reduce that navigation-column limit.
Use Mega menu headings to control Typography, Text style, Font weight, Font size, Uppercase, Text alignment, and Margin for generated category headings and the optional Single links heading. Text style is available only with Body typography; Font weight and Uppercase remain available with both Heading and Body. Use Mega menu links to control Alignment, Item spacing, Typography, and Font size for the generated nested navigation lists.
Use View all links to show or hide generated category actions and control their Color scheme, Font size, Font weight, Text style, Color, icon, icon-only mode, icon position, scale, and stroke. The icon list is intentionally limited to directional icons that fit this navigation action.
Use Mega menu panel for controlled desktop promotional content attached to a matching top-level menu item. Use Card list inside the panel for promotional cards. Generated mega-menu heading, link, and View-all appearance settings do not restyle the content inside this panel.
Use Custom mega menu only when a top-level menu item needs a more flexible desktop composition. Hero slideshow is intentionally unavailable inside this compact navigation surface, and generated mega-menu appearance controls do not restyle Custom mega-menu content.
Use Main search settings to choose expanded or compact search where the selected Header layout supports it.
Configure Predictive search at the end of Main search. Use Maximum width to cap the predictive panel without letting it exceed the available search width. Add one or more Search suggestions child blocks to request and independently style suggested searches, Collections, Brands, or Content; Brands are derived from matching Shopify Product vendors and do not add another predictive-search request; use Row - search and Column - search when those groups need a custom layout. Predictive-search headings and actions use normal child blocks such as Heading and Buttons; Guild does not add a fixed Products heading. Add Predictive results list when Product results should be shown; it can be moved or removed and exposes Product-only layout controls plus a restricted Product item composition suited to Predictive Search. Columns supports 1-4 columns, matching the fixed maximum of four predictive Product results, and Theme Editor shows four placeholder Product cards so the final grid is easier to style. On desktop, an open predictive panel measures its remaining viewport space only after interaction and scrolls the inner result content when needed; mobile keeps the existing full-screen Search scroll. The normal Search page continues to use Search results list separately. Use Search visibility group with Context: Predictive search when nested content should appear only when any results, Product results, or configured Search suggestions are available. Result-aware Search columns collapse when their dynamic result sources are empty, and a zero-result query closes the visual result panel while retaining the accessibility announcement.
Use Sticky behavior to keep the full Header or the below-header navigation visible while scrolling.
When Use background is enabled, reduce Background opacity below 100% to reveal Blur background. Enable it when the translucent Header needs stronger separation from page content behind it.
Test desktop and mobile navigation, nested menu items, the More overflow, compact search, account access, cart access, and localization controls. The Account block uses Shopify's account component; when customer accounts are enabled, Header controls retain a default Account item even if that block is removed.

Important behavior:

Mega-menu promotional content is desktop-only. Add any required mobile promotional routes to the Shopify menu itself. When desktop navigation overflows into More, Guild shows the underlying Shopify navigation tree only; Mega menu panel and Custom mega menu promotional content are not duplicated into the overflow menu.
Country selector appears only when Shopify Markets provides more than one country or region. Desktop/content placements can combine country name/code, currency code/symbol, optional slash formatting, and an optional flag. In Header mobile navigation the trigger is intentionally simplified to the full country name with a chevron, independent of desktop flag/currency presentation. When a country flag is enabled, the rendered flag also receives the stable is-flag class for theme styling.
Language selector appears on the storefront only when more than one storefront language is published. When only one language is available, the Theme Editor shows an interactive three-language preview so the selector and dropdown can still be styled before additional languages are published.
Language selector appears only when more than one storefront language is published.
Predictive search and the Search results template are separate flows; test both before publishing. Disabling Predictive search does not remove the normal Search form or Search results page.

For a shorter setup route, see Navigation and page structure.

Use Footer for secondary navigation, newsletter signup, store utility links, payment methods, and store information.

Recommended use:

Add links for contact, shipping, returns, privacy policy, terms, and social pages where appropriate.
Keep footer menus organized and easy to scan.
Use the footer for support and policy paths customers expect to find on every page.
Use Content list for compact footer utilities such as copyright text, country selector, language selector, Shop link, policy links, media, and utility buttons.
Use Payment methods when you want to show the payment types enabled in Shopify payment settings.

Important behavior:

Footer content is managed through reusable Rows and Columns, flexible footer content, and utility blocks. When Enable boxed mode is on, Footer also exposes the shared border controls; Extend border full width is available only when the selected background does not already span the full width.
Navigation can show footer menus as normal lists or as dropdown-column groups. Show dropdown columns only is off by default.
Content list can include utility blocks such as Copyright, Country selector, Language selector, Shop link, Social media links, Accessibility controls, utility links, media, and buttons.
Country selector and Language selector use Shopify localization data. Country selector renders only when Shopify Markets provides more than one country or region to the Online Store. Language selector renders only when more than one storefront language is published. Country selector can show a native Shopify country flag in normal placements, including flag-only mode, and can format country/currency text with parentheses or a spaced slash. Header mobile navigation intentionally simplifies Country to the full country name and uses a chevron disclosure; Language mobile disclosures also always use chevrons. Language selector can show the default language name or the language code in its normal placements.
Shop link uses one Action setting to switch between Shopify's native Sign in with Shop and Follow on Shop output. The block itself owns whether that action is present: add a Shop link block to show it and remove the block to omit it. Follow on Shop uses Shopify's native follow action; the Theme Editor can show a non-clickable preview label when Shopify does not return storefront markup.
Payment methods is a reusable block, not a standalone section.
Footer keeps its Advanced controls intentionally narrow: Section ID and reveal-on-scroll options remain available, while generic responsive Display mode, header/footer gap alignment, and content transforms are not exposed for the global footer.

Use Navigation to show a selected menu in footer-style layouts, flexible content areas, or navigation-style link sections.

Recommended use:

Use short menu labels for compact columns.
Turn on Show dropdown columns only only when the menu is structured with nested links that should become column headings.
Keep Item spacing at the default unless the footer needs a denser or more open layout.

Important behavior:

Navigation uses the same grouped column scaffold whenever Columns is greater than 1. Show headings controls only whether the column heading rows are rendered; with one column and headings off, Navigation keeps the compact flat utility-list layout.
Columns, Column spacing, Item spacing, Column alignment, Text alignment, and Equal column widths control Navigation independently from whether headings are shown. Column alignment positions the column group when content-driven widths are used; Text alignment controls the link and heading text inside those columns. Equal column widths is on by default to preserve the standard column layout; turn it off for content-driven column widths.
Navigation link Font size stays available whether headings are shown or hidden.
The Headings group contains Show headings, Link column headings, Typography (Heading or Body), Text style, Font weight, heading Font size, Uppercase, Heading margin, and optional heading-divider controls. Text style is Body-only; Font weight and Uppercase remain available for both Heading and Body.
Margin controls spacing below the complete Navigation block in both grouped-column and flat-list modes.
Avoid using footer-only utility blocks such as Copyright, Country selector, and Language selector outside Footer or footer-style Content list contexts.

Hero slideshow

Use Hero slideshow for first-screen campaigns, featured collections, product launches, or other high-priority page introductions. Generic Slides have a fixed Leading media slot, direct content blocks, and a fixed Background slot. In Slide - collection and Slide - article, the current resource image is managed directly by the parent slide, including overlay opacity and an overlay color scheme, so no empty media-holder block appears in the editor. Resource-specific slides also include Advanced > Show slide so storefront output can depend on whether the current collection or article has the optional content the slide needs. The direct content blocks still render inside the slide's content wrapper on the storefront. Aside content width supports 20% to 90%.

Recommended use:

Use one strong image or video per slide.
Add alt text when the leading image communicates useful information.
Keep slide headings and button labels short enough for mobile.
Use Advanced > Enable transparent header overlap only when the hero is the first section on the page and Background width is Full width.
Use Inline labels pagination when slide labels need to be visible as navigation.
Use Show pagination background for compact bullet pagination that needs its own surface. The option appears only for Bullets when Shadow is None.
Use Enable fixed media effect on Leading media when an image or supported video should stay visually anchored to the viewport while the banner acts as the clipping window. The setting remains available in slideshow slides, but the fixed effect is suppressed when the banner is rendered as a multi-slide Swiper slideshow.
Review autoplay with the visible autoplay control enabled when automatic motion is used. The Autoplay group controls delay, control visibility, control size, icon scale, icon stroke, and border radius.
Use slide Background only when the slide needs decorative layers, ticker text, or a clickable background area.
In Slide - collection, use Advanced > Show slide to choose Always, require a collection image, require a collection description, require either one, or require both. Slide - article provides the same choices for the article image and excerpt.

Important behavior:

A single slide renders without slideshow controls.
Multiple slides use Swiper controls, optional arrows, pagination, autoplay, and an autoplay control button. Arrow controls are grouped under Arrows, while pagination controls are grouped under Pagination. When Show arrows is enabled, arrow controls support Medium (default), Large, or Custom button size, Chevron (default) or Arrow icons, adjustable icon scale and stroke, and Default, Oval, Full, or None border radius.
Slide labels come from Pagination heading. If that is blank, the first direct Heading block in the Slide is used. If no label is found, the fallback is "Slide 1", "Slide 2", and so on.
The first slide image is eager-loaded and receives high fetch priority when rendered as an image candidate. Later slide images remain lazy-loaded.
A second image on Leading media is treated as a hover layer and stays lazy-loaded. The Second image control appears only after a primary Image is selected and Use separate mobile image is off.
After a primary Image is selected, turn on Use separate mobile image to reveal Mobile image. At 760px and below, that image replaces the primary Image. The optional Second image and its alt-text control are hidden and inactive while the separate mobile image flow is enabled; turn the option off to use a desktop primary/second-image composition again.
Enable fixed media effect supports the primary image, placeholder SVG, optional second image, hosted video except Show controls, and external YouTube/Vimeo playback when the banner is not rendered as a multi-slide Swiper slideshow. Google Map and 3D model media keep their normal scrolling behavior.
Show pagination background is banner-only. It applies to bullet pagination with Shadow: None, uses the surrounding section surface when available, and is intentionally not used by Product gallery pagination.
Hosted video autoplay is lazy-loaded and plays only when visible. In slideshow slides, autoplay video plays only on the active slide.
Slide Background can contain Background layer, Ticker list, and Clickable area utility blocks. It does not render empty output when no background content is configured.
The fixed Leading media and Background slots cannot be moved or removed. Add, reorder, or remove the direct content blocks between them.
Body boxed mode adds a simplified fill layer inside the slide content so the selected color scheme can sit behind the content. The Theme Editor also paints the same boxed surface directly on the content wrapper so the selected background remains visible while editing nested Article and Collection Hero content.
Section width controls the banner container. Background width controls the banner background and optional border behavior. Advanced > Enable transparent header overlap is available only when Background width is Full width.
Leading media layout can be Background or Aside. Aside supports reverse layout, Hide media on mobile, mobile reverse layout when media remains visible, aside content width, and aside glow. The mobile-hiding control appears only for Aside; when enabled, the mobile reverse control is hidden because the media is no longer rendered at that breakpoint.
If Aside glow is wider than the aside content area, the slide receives capped glow behavior.
If boxed mode is disabled on an Aside slide, the slide uses plain mode.
Show slide conditions are storefront-only. The Theme Editor keeps Collection and Article slides visible so merchants can preview and edit them even when the current resource would hide the slide on the live storefront.
A resource-specific slide hidden by Show slide is excluded from the storefront slideshow, so it does not create an empty slide or unnecessary pagination, arrow, or autoplay controls.
When a resource-specific slide is set to Always but has no resource image or configured slide background content, Guild falls back to a compact content-only hero instead of preserving an empty media-height banner.

Image divider

Use Image divider for visual breaks between page areas. It uses the same slide and leading media structure as Hero slideshow, but the default preset is intended as a separator rather than a primary campaign hero.

Recommended use:

Use one slide for a simple separator.
Use multiple slides only when the separator needs light rotation or visual variety.
Use transparent header overlap only when the image separator is first on the page.
Keep the direct Slide content minimal so the section remains a separator.

Important behavior:

Image divider shares the current banner rendering path with Hero slideshow.
The first slide image is eager-loaded and receives high fetch priority when it is the initial image candidate. Later slide images remain lazy-loaded.
Inline labels, arrows, pagination, autoplay, aside media, aside glow, boxed mode, and full-width background behavior match Hero slideshow.

Gift card

Use Gift card only on Shopify-issued gift card pages. It is a focused system-page section rather than a general page-builder section.

Recommended use:

Keep the redemption code and remaining balance easy to find.
Add Copy code and Print gift card actions through generic Button blocks.
Add Apple Wallet only when Shopify provides a pass URL for the issued card.
Add recipient, message, status, and QR output only when those details are useful to the customer.
Review the page in print preview when the Print action is enabled.

Important behavior:

Gift card-specific blocks are available only inside the Gift card section and its Gift card row/column layout blocks. Box - gift card can also contain Row - gift card when a boxed area needs an additional horizontal layout layer.
App blocks are not supported in the Gift card section.
Optional issued-card data stays hidden when Shopify does not provide the matching value. Gift card balance owns its optional Heading settings directly, so no separate Heading child block is required; the heading margin defaults to None.
The Gift card page can hide the normal Header, popup group, and Footer to keep redemption content focused.

For setup and support boundaries, see Forms, popups, and advanced content.

Rich content

Use Rich content for flexible page sections. It supports common content blocks such as Heading, Text, Icon, Buttons, Media, Card list, Product list, Collection cards, Blog post list, Logo, Logo list, Tabs, Accordion, Form, Quote, Countdown, Countup, Tags, Content list, Divider, Breadcrumbs, Custom HTML, and Custom Liquid.

Common presets include Rich content, Gallery, Store highlights, Promo gallery, Editorial cards, Media with cards, Gallery slideshow, Logo slideshow, Collage, Testimonials, Masonry gallery, Team, Social media links, Benefits bar, Trust and reassurance, Press coverage, Product specifications, Promo ticker, Announcement bar, and Popular links. Product, collection, and blog list blocks can also be added to flexible sections when the page needs store data inside a custom layout.

The Icon block is treated as a generic flexible-content block. It is available wherever the broad Heading/Text content set is available, including content placed directly under Card, Box, Accordion item, Tab item, Rich content, footer, password, cart, product, and other flexible content areas. Button-style icons keep compact button spacing even when used outside a Button group.

Supported Heading, Row, Column, Box, Media, Divider, Icon, Quote, Star rating, and Breadcrumbs blocks expose Advanced > Show advanced options > Display mode. Use Default for normal responsive behavior, Mobile only through 760px, Desktop only above 1000px, Hide on desktop to hide above 1000px, or Hide on mobile to hide through 760px. Both exclusive modes are hidden from 761px to 1000px, while both Hide modes remain visible in that tablet range. Context-specific Row, Column, Box, and supported Media variants use the same contract.

Recommended use:

Start with a preset when it matches the content goal.
Use card grids for benefits, features, reviews, team members, or links.
Use Press coverage for a focused as-seen-in composition with an uppercase press label, a centered constrained heading, and a 10-item marquee image list ready for publication logos.
Card media owns its media source directly. Choose the image, video, external media, map, or model from the Card media block instead of adding a separate Leading media child.
Generic cards use three clear content areas. Add Card media when the card needs media or bounded overlay content. Add headings, text, buttons, and other main content blocks directly under Card. Use Card footer when content should remain after the main card content; it accepts the same content block choices as Card and Custom card. The default footer action uses Buttons > Button. Media-only, content-only, footer-only, and combined cards are supported.
Use the Logo block for a single linked brand mark, and use logo lists for press logos, partner logos, payment marks, or brand groups.
Generic Tags blocks contain the tag content only. Add a normal Heading block when the composition needs a heading.
Quote supports Margin above source so the source/citation can use the shared spacing scale without changing quote typography.
Logo list uses its normal grid/slideshow columns, logo maximum height, and alignment controls; the previous Match logo heights mode is not used.
Use content lists for service highlights, specifications, popular links, and navigation-style content.
Use Logo as a block when a single linked store logo should appear inside another section or layout.
Use Payment methods as a block when payment icons should appear inside another section or layout.
Use Divider as a horizontal line, an empty spacing block, or a text divider such as "or" between content groups.
Test all links before publishing.
Use Advanced > Enable content transform only for subtle editorial perspective or skew effects. Keep values low because the transform is applied to the readable section content area.
Heading blocks can show an optional leading icon. Use Leading icon position to place it beside the heading copy or above the copy. Above-content icons expose Leading icon margin using the same margin pattern as Text. Beside-content icons expose a Column gap control. Headings can keep heading typography or use Typography: Body, which preserves the semantic heading tag while applying body typography. Body-style headings expose Font size and Uppercase controls; when Uppercase is enabled, Letter spacing is also available. Title blocks with plain-text content expose Text style and Font weight in Body mode. These appearance controls, Uppercase, and the conditional Letter spacing control are hidden and ignored when Typography: Heading is selected. Subheadings can use Default, Main, Caption, Small, or Custom font sizing, and Margin above subheading controls the spacing between the heading and subheading. Under Advanced, Heading also supports the shared responsive Display mode contract.
Text blocks expose Content maximum width. Leave it at 0 to use the full available width, or set a pixel maximum when body copy should remain narrower inside its parent composition. When Font size is Custom, the authored size is preserved on larger screens and capped to Guild's Heading 2 scale on mobile so a desktop-sized custom value does not overwhelm narrow layouts.
Countup supports the same Heading-or-Body typography direction for animated numbers, including the shared Font size scale, Custom font size, Uppercase, and Custom underline/highlight styling. Values 0 and 1 display immediately instead of running a one-step animation.

Important behavior:

Divider renders as <hr> when Style is Horizontal line and no text is set. When text is added, it renders as a text divider using the .c-hr pattern, with optional text alignment, font size, and Custom underline style controls.
Divider width > Full width uses a text-divider specific full-width class when the divider has text.
Button groups that enable Show in header keep Button alignment available. Header placement controls the desktop presentation, while the mobile copy still uses the selected Start, Center, End, or Space between alignment.
Card list overlay links cover the card and are rendered separately from the main card content.
Card and blog overlay links can be removed from the keyboard focus order when a heading, button, or other visible card link already points to the same destination.
Preset card links use valid internal destinations when a working sample link is needed. Replace sample destinations before publishing.
Logo list and logo slideshow presets use default logo widths around 100px so sample logos read closer to normal brand marks.
Product list, Collection cards, Blog post list, Card list, Collage, and Logo list use the same card-layout family where practical, with shared controls for grid spacing, content spacing, mobile layout, subtle item rotation, card interaction, and slideshow behavior when the block supports slideshows. Slider controls use separate Arrows and Pagination groups. Slideshow arrows use Medium button size by default, with Large and Custom alternatives. They use Chevron by default and can switch to Arrow, with icon scale, icon stroke, Default, Oval, Full, or None border-radius controls, and Background opacity. Card lists no longer expose a separate Compact mode; use the existing spacing and typography controls instead. Wide is selected on an individual card item rather than on the list. For a conventional Wide list, set the list to one column, then set the relevant item block to Card layout: Wide. Mobile card layout can keep the card stacked or extend Wide layout to mobile. Wide card items also expose Media width type. Keep Percentage for the existing 0-75% control, where 0 uses the theme's default CSS width, or choose Fixed for a 96-480px width in 4px steps; fixed values retain a 75% responsive safety cap. Stacked cards with boxed mode disabled expose Media margin below Content vertical alignment so the gap between media and the main card content can follow the shared Margin scale. Non-boxed Wide cards expose Media alignment to position the media wrapper at the top, center, bottom, or stretch. Boxed cards additionally expose Media position under Boxed mode, below the Padding controls; Media alignment is shown only when Media position is Inside card. Boxed Product, Collection, Blog/Search result, generic/custom, pickup-location, and Logo card items expose Border radius with Default, Media, and None values. Default preserves the theme card radius, while Media matches the shared media radius; on Logo items this card setting is separate from the logo image's own Border radius. Controls inside the Media block continue to align content within the wrapper, while non-boxed Wide items also use Media and text gap.
Cloned flexible sections share section-level close button settings in Advanced. Use Show close button when a full section should be dismissible, and use Remember dismissal when the closed state should persist on the customer's device for the selected duration.
Advanced > Section ID creates an anchor target for same-page links. Guild renders the anchor inside the section instead of placing the custom ID on the outer section wrapper, so anchor jumps can account for sticky headers and land on the intended content position. Use unique IDs without spaces, such as faq or materials.
Advanced > Enable content transform affects the readable section content rather than the section background or outer spacing. These controls are intentionally subtle and should be used sparingly.
Use Divider inside flexible sections when a block-level line or empty space is needed.
Tags and tag-style labels share the .c-tags pattern. Plain tag layouts can use the shared Style set where exposed: muted, bold, bold + muted, italic, and italic + muted.

Use Social media links to show links to the store's social profiles in a flexible content area or from the Social media links preset.

Recommended use:

Add only the social profiles the store actively uses.
Use recognizable labels and real destinations.
Keep social link groups compact in footers, utility rows, and sidebar-style layouts.

Important behavior:

The block uses the social profile URLs configured in Theme settings. Links to show can use all available profiles or a selected subset without changing the global social settings.
Icons are shown by default. Enable Show label to add profile names; when labels are enabled, Show icon can be disabled for a label-only presentation.
Button style switches between Button and Text link presentation. Button mode exposes button size, color style, and border radius; Text link mode exposes font size, Text style, Font weight, and link/content color controls. Icon-only Text link mode renders the social icons without button chrome. Text-link icons can either follow the link color or use the platform brand accent color.
Margin controls spacing below the complete social-links block.
Social media links should use real storefront or social profile URLs before publishing.

Button behavior

Button min width sets a minimum width for button-style output. The button can still grow for its label and is capped by the available container width. Link-style output does not use this setting.

Use button blocks for links, form actions, popup controls, and utility actions.

Important behavior:

Action behavior can create link, submit/reset, popup, print, copy-to-clipboard, or Apple Wallet actions depending on the button context.
Button blocks that use Style > Text link can expose Font size, Font weight, and Text style controls for the link text. Text style: Muted fades only that text-link action; sibling buttons in the same group are unchanged. Button-style rendering keeps using the button size controls instead.
Use Print when the button should open the browser print dialog. Print buttons render with the link-print behavior hook and do not control popups. Use Copy with Copied state label and Text to copy; leaving the copy text blank on the issued gift card page copies the live redemption code. Use Apple Wallet only where Shopify supplies gift_card.pass_url.
Use popup control only when the button should open or close a Popup in the popup group.

Logo block

Use Logo to add a single linked store logo inside flexible content areas, columns, cards, forms, overlays, and footer-style layouts.

Recommended use:

Select Logo image for image-based marks.
Use Text-based logo when the logo should be rendered as styled text instead of an image.
For image logos, set Max height and Mobile max height to control the rendered logo size without forcing a fixed width.
For text logos, choose Color as Link, Content, or Custom, set Text size to Heading 1, Heading 2, Heading 3, or Custom, and adjust Text max width when the wordmark should wrap or stay compact.
Use Text alignment and Margin to align and space the logo like the Heading block.

Important behavior:

The logo always links to the home page.
Image logo alt text uses the uploaded image alt text when available, with the store name as fallback.
Color, text size, and text max width apply only to text-based logos.
Image height controls apply only when a logo image is selected.

Payment methods block

Use Payment methods to show the payment types enabled in Shopify payment settings. The block can be added inside flexible content areas, columns, cards, forms, overlays, and footer layouts.

Recommended use:

Use it near checkout reassurance content, footer utility rows, or payment information areas.
Keep payment icons full color.
Configure payment methods in Shopify admin rather than uploading custom payment logos for dynamic payment output.

Important behavior:

The block uses Shopify's enabled payment types.
Payment icons are rendered with Shopify's payment icon output.
Placeholder payment icons can appear in the theme editor when payment methods are not available yet.

Content list blocks

Content lists support Default, Boxes, Dividers, and Table item appearances. In stacked/default layout, Item spacing continues to control the vertical distance between items. In Inline layout, Item spacing controls horizontal spacing and supported utility-list blocks expose a separate Row spacing control for the vertical distance between wrapped rows. Row spacing: Default preserves the theme's normal wrapped-row rhythm, while None, Small, Medium, and Large override only the vertical row gap. Item spacing: None retains its existing vertical-only behavior for Default appearance and does not collapse horizontal inline spacing. When Boxes, Dividers, or Table is selected, a saved None value behaves like the normal/default spacing for that appearance.

Content list uses definition markup only for items with a real prefix. After a Content item's Prefix label is filled, that same item reveals Prefix position, Text style, Font weight, and Show colon after prefix. Prefix position: Inline keeps the prefix and value inline on desktop and automatically stacks them on mobile. A leading icon, image, or color swatch stays aligned with the row in both layouts. Prefix position: Stacked uses the same stacked arrangement on desktop and mobile. Prefixed rows use one utility-item wrapper with an inner semantic definition group; unprefixed rows remain regular Content items and receive no synthetic hidden label. Text style defaults to Default and controls muted/italic presentation independently. Font weight defaults to Semi bold and can use Default, Light, Regular, Medium, Semi bold, Bold, or Extra bold. Show colon after prefix optionally appends a colon.

Recommended use:

Use Default for simple text lists.
Use Boxes for badge-like or button-like items.
Use Dividers for rows with borders.
Use Table for specification-style content.
Enable Enable color scheme in Boxes mode when the list needs its own visual background.
Use item visuals for icon, image, or color-swatch lists. Color visuals can use a solid color or gradient and can be enlarged with Use large color swatch.
Use Social media links when the list should output social profiles from theme settings. It shows icons by default. Enable Show label to add profile names; when labels are enabled, Show icon can be disabled for a label-only list.
Use Accessibility controls when the list should expose motion, contrast, and font-size controls.
Use Control tabs with this list only when the list is meant to act as external tab navigation for a Tabs block with a matching Tabs ID.
Use Article buttons on an Article page when customers should return to the current blog or continue to the next article. The preset adds All articles and Next article: [title] as Text link buttons.
Each Article button owns its own appearance. Link source can use Previous article, Current blog, Next article, Article details, or Author homepage. Use [title] in a Previous article or Next article label to insert the target article title.

Collection list block

Use Collection list when a flexible content area should show collection titles through the same presentation system as Content list instead of collection cards. Choose all collections or select a curated set, then control the list layout, item appearance, alignment, columns, separators, typography, slideshow/marquee/typewriter behavior, and spacing.

Recommended use:

Use it for compact collection indexes, category navigation, footer-style discovery, or editorial navigation inside Columns and other flexible content areas.
Use Text style, Font weight, and Font size to control title emphasis without switching to card-based collection presentation.
Set Color to Link for the theme link color or Content when collection titles should inherit surrounding content color.
Use Collection links instead when the collections should render as a Button/Text link group rather than as a Content-list-style utility list.

Important behavior:

Show all collections uses Shopify's global collection source. Otherwise, Collections preserves the merchant-selected collection order.
Collections to show caps the rendered list at 50 items.
Collection titles are real links to their Shopify collection URLs.
The block does not use List item children; collection titles are generated directly from the selected/all collection source.
Under Advanced > Show advanced options, Hover media handle can connect the list to a Media block that uses the same handle. Hovering or keyboard-focusing a collection with a collection image reveals that image over the existing Media only after the new image has loaded, using the same interaction as Content list items. Collections without an assigned collection image leave the Media block unchanged.
It is available in generic Column and the other flexible surfaces that expose Collection links.

Additional behavior:

Separator choices are standardized across the main l-util-based blocks: None, Dash, Slash, Double slash, Pipe, Dot, Spark, Arrow, Chevron, and Double chevron where the block supports inline separator output. Icon separators expose icon scale and stroke controls.
When Layout is Inline and Item appearance is Default, supported utility-list blocks expose Keep items on one line. The setting applies on desktop only; mobile always allows the row to wrap normally so long utility content can reflow within the available width.
For supported utility-list blocks, Row spacing is available only when the effective layout is Inline; always-inline utility blocks can expose it without a separate Layout selector. Use equal row and column spacing, where available, takes precedence over the independent Row spacing value. Vertical alignment is an inline-layout control rather than a Space-between control. When Layout is Inline, use Top, Center, or Bottom to align different-height items vertically; Center is the default and preserves the existing inline appearance. Equal column widths appears only when Layout is Inline and Alignment is Space between, because equal flex columns are not meaningful for stacked/non-inline rows. Always-inline utility blocks can expose Vertical alignment without a separate Layout selector.
Section close behavior is controlled by the parent section, not by the Content list block.
When an Item has no text but has a visual and a link, the visual receives a single overlay link so icon-only or color-only items remain clickable.
Previous and next Article button sources resolve only on the current Article page. A missing boundary article produces no storefront button. Theme Editor retains an editable placeholder link for configuration.
Utility blocks include Copyright, Country selector, Language selector, Shop link, Social media links, and Accessibility controls. Shop link can output Sign in with Shop or Follow on Shop. Social media links can show icons only, icons with labels, or labels only. Country selector supports an optional trigger flag with configurable width, border radius, and flag-only mode. Language selector can use language names or language codes.

Content source blocks

Use Content source to render the current Shopify page or a manually selected Shopify page inside Rich content, a tab item, accordion item, column, content placed directly under Card, popup, or another flexible content area.

Recommended use:

Use for policy text, size guides, care instructions, or reusable help content.
Keep source pages published and maintained in Shopify admin.
Avoid using it for content that should have separate SEO value as its own page.

Important behavior:

Source: Current page is intended for the main Page template and uses the current page title and body from Shopify Admin.
Source: Selected page reuses a chosen page as supporting content inside another composition.
The current page title is treated as the main page heading. A selected reusable page title remains a supporting heading.
When Show page title is enabled, the Title controls include Typography, Body-only Text style, Font weight, Font size (including Custom), and Uppercase. Font weight and Uppercase work with both Heading and Body typography; the block Alignment setting also aligns the imported title.
The block renders nothing when the resolved page has no renderable content.
Use Content max width, Alignment, and Margin to control the long-form content measure without creating another Page content block.
The page picker remains available for the selected-page workflow.

Collection and Search filter blocks can render as an in-page panel or as a sticky filter drawer. The two blocks share the same filter-surface settings so catalog and search experiences can be styled consistently.

Recommended use:

Use Display: Sticky when filters should open as an overlay instead of occupying a permanent content column.
For Sticky filters, use Maximum width, Padding, and Color scheme to match the drawer surface to other popup-style interfaces. Padding: Custom reveals the exact custom padding control.
Keep the surrounding Column boxed only when it also contains normal page-flow content. If a sticky filter is the Column's only rendered content, Guild removes the otherwise-empty boxed shell from the page layout automatically.

Important behavior:

Popup shadow and corner radius remain controlled by Guild's shared popup styling rather than separate filter settings.
Sticky filter alignment controls which side of the viewport owns the drawer on larger screens.
If a Column contains a sticky filter plus other rendered content, its normal Boxed mode and layout remain intact. Only a Column whose rendered content is entirely detached into the sticky overlay is collapsed from page flow.
Collection and Search filters intentionally keep the same shared Style contract; Search can still expose Search-specific visibility controls where applicable.

Featured collection

Use Featured collection to show products from a selected collection with an editable product list. Product lists can use Custom blocks for full drag-and-drop card composition, or the built-in Default product card for a fast fallback renderer.

New Product list blocks start from the current Collection-page card composition: a four-column desktop grid, stacked mobile cards, Collection-style regular Product items, and a Wide Featured Product card spanning two columns with 50% media width.

Featured collection cards use Media alignment: Stretch by default so boxed card media fills the available card height unless the merchant selects a different alignment.

Recommended use:

Choose a collection in the Product list block, or switch Product source to Selected products for a hand-picked sequence.
Use Product list in other flexible sections when you need products inside a custom page composition rather than the default Featured collection section.
Use Product source to choose Selected products, Collection, Related products, Complementary products, or Recently viewed products when the page context supports it. Both resource pickers remain visible because Shopify does not support visible_if on these specialized setting types. Their info text identifies the matching source, and runtime reads only the picker selected by Product source. Selected products keeps the picker order unless unavailable-product settings move unavailable items to the end, and an empty selection stays empty instead of falling back to Collection.
Use Card layout > Custom blocks when this specific product list needs full drag-and-drop card composition. Custom blocks can use Featured product item for the first product and Product item for the remaining products.
Use Card layout > Default product card when the products should use Guild's built-in fallback card renderer with media, badges, title, price, and optional swatch links. The fallback renderer does not synthesize a Purchase controls footer; customer purchase actions belong to the configurable Product item composition.
A visible Featured product item is always local to the current Product list and can customize only the first product.
Add Limited-time product when one manually selected promotional product should appear at a chosen position among the regular source products. Product list renders only the first Limited-time product added to that list. It uses the same editable product-card composition model as Product item, can include Countdown and a product metafield such as a merchant-maintained lowest recent price, and suppresses the matching regular source card where the source can be checked safely. On paginated collection lists, the promotional card appears only on the first page and is not duplicated by Load more or Infinite scroll. When the promoted product replaces a product from the loaded collection result, pagination status counts it once; unrelated manual cards are excluded. The promotional card remains visible when collection filters change, even when the selected product is outside the filtered result set. It does not infer promotion allocation, sold quantity, remaining quantity, or progress from Shopify inventory.
Add optional product blocks only in Custom blocks mode and only when the product data supports them, such as inventory, rating, status, brand, metric, variants, metafields, or countdown.
Use product metafields for product-specific specifications such as material, height, finish, care notes, or brand labels. Shopify owns the underlying product, variant, and metafield data; Guild displays the data where the selected product block supports it. For platform setup, see Shopify's variants and metafields documentation.

Important behavior:

Products are pulled automatically from the selected collection; merchants do not add each product manually. Setup placeholder product cards are shown in the Theme Editor when a source is missing or empty, while the live storefront avoids showing setup instructions to customers.
Product source set to Related products uses Shopify's related product recommendation data and needs product page context.
Product source set to Complementary products uses Shopify's complementary recommendation data and needs product page context. Use it for products that pair with the item being viewed, such as matching accessories, add-ons, or supporting products.
Product source set to Recently viewed products uses product handles stored in the visitor's browser on the current device. The current product is excluded when the section appears on a product page. Dynamically loaded recently viewed cards use the regular product-card rendering path. Review Privacy and external services before using this section on stores where viewed products can reveal sensitive interests.
Collection is used only when Product source is set to Collection. Start with product also applies only to Collection source; values above 1 skip earlier collection products and intentionally disable Product list pagination, matching the offset behavior of Blog post list.
Selected products uses the dedicated product picker and supports the normal Product list page-size/pagination behavior in Grid and Masonry. Slideshow uses the selected order up to the configured Products limit.
List layout controls the product-list structure: Grid, Masonry, or Slideshow. Slideshow layout supports arrows, pagination, and optional header arrows. To create a Wide product list with Custom blocks, set Columns to 1, then set Card layout to Wide on Product item or Featured product item. Use Mobile card layout on that item when the side-by-side layout should also apply on mobile.
Card layout controls the product-card rendering path. Custom blocks use the product item blocks inside this list and are the full drag-and-drop path. Default product card uses the built-in fallback product card renderer.
In non-slideshow layouts, the first product can use Featured product item for a larger lead card. Featured product item is always local to the current Product list. In Custom blocks mode, remaining products use Product item, while an optional Limited-time product can insert its selected product at a merchant-defined position. In Default product card mode, the remaining products use the built-in product card renderer. If the featured item is hidden, missing, or empty, the first product follows the same path as the rest of the list. When List layout is Slideshow, products use the regular card flow so slides stay consistent.
Product cards keep Product media as the fixed first slot, expose title, price, description, Purchase controls, and other supported Product content directly in the item, and keep Product footer as the fixed last slot. New Product-list and Search-results presets place Purchase controls directly in the Product item and retain an empty Product footer for the fixed-slot architecture. In Product media, Blend image with background is an opt-in treatment for packshots with white image backgrounds; it visually blends product images into the surrounding card color while leaving video and other media types unchanged. Use second image as primary swaps the first displayed product image with the alternate image. If Show second image on hover is also enabled, hover reveals the original primary image instead. Second image effect: Default uses a plain fade, Hover zoom second image zooms only the hover image, and Hover flip keeps the flip transition. These second-image controls do nothing when the product has fewer than two actual product images.
On full product surfaces, use the Variants block inside Product form to choose how customers select options. Buttons and swatches creates one group for each product option. In Swatches mode, each value prefers Shopify swatch color, then Shopify swatch image, then the matching variant image, and finally a text control when no visual source exists; this avoids empty white swatches for values that have variant imagery but no configured Shopify swatch. Swatch size provides Small, Medium, Large, and Custom sizing for visual swatches. When Swatch style is Variant images, a visual option group switches to variant-image tiles only when Shopify provides actual variant featured media or a featured image for that group. Boxes uses plain text radio boxes such as Small/Large without duplicating the selected value above the group. Image padding controls spacing around active image tiles, and Aspect ratio can use Auto, a preset ratio, or Custom. If a particular value has no usable image, the control falls back safely rather than rendering a blank visual tile. Variant-image tiles keep the option name available to assistive technology without repeating it visually beside the image. Dropdowns creates one menu per option, such as Size, Battery type, and Color. When Show option labels is enabled for a Swatches or Variant images group with at least one real Shopify swatch or matching variant-image source, Show selected option value can append the current selection to the label, for example Color: Red; an all-text option named Color, Dropdowns, Boxes, hidden option labels, and text-box fallback groups suppress the duplicate value. Preview option value on hover can temporarily show a fine-pointer-hovered or keyboard-focused visual value and restores the selected value on leave/blur without changing Product selection. Coarse-pointer/touch contexts keep the canonical selected value without mouse-hover preview. Use muted selected value applies muted styling only to the selected value, not to the option label. Product-card purchase actions are owned by the configured Purchase controls block in Custom blocks mode; the built-in Default product card does not add a legacy Quick view/View options footer on its own.
Purchase controls owns Quantity, Add to cart, and optional Shopify accelerated checkout settings in one block. Product and Cart accelerated checkout use one shared theme renderer and one consistent Theme Editor placeholder. Merchants can reorder Variants, Line item property, Selling plans, and Send as gift above the purchase row. Line item properties support text, textarea, checkbox, select, and radio inputs and submit with the selected cart line; prefix the property name with _ through Private property when it should not be shown in Guild's cart line details. Show quantity input is enabled by default; disable it for a button-only purchase layout. The form still submits the selected variant's minimum valid quantity and increment when the visible quantity control is hidden. Quantity remains beside Add to cart when shown, accelerated checkout renders below that shared row, and wallet buttons can use Inline or Stacked desktop layout while always stacking on mobile. Border radius controls the supported accelerated-checkout shape. The unbranded Shopify Buy it now fallback follows the theme's default button colors, while branded wallet buttons such as Apple Pay or PayPal retain provider-owned branding. Product-specific controls render only when the product supports them. Form errors render once as the final element inside the product form. Payment terms displays Shopify-generated Shop Pay Installments content when available; merchants control its presentation, not its wording. Hiding Variants keeps the existing multi-variant fallback behavior. Add to cart, Pre-order, and View options icon pickers include Plus as an optional icon; Sold out intentionally does not. Under Behavior, Show confetti after adding to cart and Animate product image to cart can add optional success feedback after a successful AJAX add. Both settings are off by default and respect reduced-motion preferences. Fly-to-cart runs only when a Cart icon is actually visible in the viewport, including a visible sticky Header Cart icon; if no Cart icon is visible, the add completes normally without the animation. The confetti library is loaded only when the enabled effect is needed. Guild's supplied templates enable confetti and keep fly-to-cart disabled.
Product spotlight can be used on a product template or added to another page such as the home page. On product templates it uses the current product; elsewhere choose the product in the section settings. Product gallery, Row - product, Column - product, and Box - product are Product-specific composition blocks. Product columns and boxes can contain Product-specific Accordion/Tabs, Media, title, price, description, inventory, metafields, pickup availability, Purchase controls, Product list, and other supported Product blocks. Product list is also available directly in Product spotlight and inside Accordion item - product; choose Complementary products as its source for a compact "Pairs well with" composition close to the purchase content. Product visibility group, Accordion item - product, and Tab item - product share the same Show content when contract: Volume pricing, Product disclosures, Product pickup, Related products, Complementary products, Recently viewed products, Shipping info, Product description, or Product metafield has a value. The Product metafield condition uses the configured Metafield namespace and Metafield key. Recommendation-driven conditions update after the underlying Related, Complementary, or Recently viewed Product list resolves, so empty headings or tab items stay hidden instead of appearing before asynchronous content is known. Product gallery supports Slideshow and Grid layouts. Boxed mode for main product media and Boxed mode for thumbnails are independent, so background, padding, border, border style, and border color can be configured separately. Thumbnail boxed-mode controls are available only for Slideshow when Show thumbnails is enabled. Existing main-media boxed settings remain the main-media ownership path, so saved gallery styling remains compatible. In the Theme Editor, real product media is never padded with synthetic gallery items: a product with one media item stays a one-item gallery, while editor placeholders are used only when the product has no media. In Grid, Highlight first media can keep the first media at the top or move it to the Start/End side on desktop; Start/End exposes Highlighted media width from 50% to 75%, while Quick view falls back to Top. Grid Border radius is hidden and normalized to None when Grid gap is None. In Slideshow, Number of thumbnails limits the rendered thumbnail set for Below, Start, or End positions; when more media exist, the final visible thumbnail shows a +x remainder indicator while the main gallery still contains every media item. Enable hover zoom and Enable full-screen gallery independently control desktop image zoom and PhotoSwipe on normal Product surfaces. Quick view intentionally ignores Enable full-screen gallery and does not show the magnifier, avoiding a second full-screen gallery layer inside the product dialog. The Product gallery still owns its own media border radius in Quick view; the existing Grid gap rule continues to normalize that radius to None when the gap is None. Controls is Slideshow-only and covers Show arrows, Control size, icon style/scale/stroke, border radius, and Background opacity. Grid keeps full-screen gallery controls on normalized defaults, so hidden Slideshow appearance settings do not affect the Grid layout. Media aspect ratio also controls thumbnail proportions. In the Theme Editor, placeholders are used only when the selected or resolved product has no media, so products with real media retain their actual gallery count; placeholders never render on the storefront. The Product section sticky purchase bar also includes Show product options. Disable it to hide the selected-options utility row and its typography/separator settings while leaving the sticky price, quantity, media, and purchase action available. When Show media is enabled, Aspect ratio controls the sticky product image independently from the main gallery, including Auto, preset ratios, and Custom. Blend image with background independently applies the same white-packshot blending treatment to Sticky purchase media without changing the main Product gallery setting.
To add augmented-reality viewing for product models, add Buttons > Button, open Show advanced options, and set Action behavior to Shopify XR. The normal Button label, icon, and appearance remain fully merchant-controlled; a practical configuration is the label View in your space with the 3D model icon. The product must have a Shopify 3D model and the same Product surface must include Product gallery. The Theme Editor always shows the configured Button for visual setup, while the storefront shows the live XR action only when Shopify confirms that the current device supports it. Place the Button directly below or close to the gallery so its relationship to the product model is clear. When several product models exist, Guild targets the currently visible model, or the first model when a photo or video is active. Product cards do not expose Shopify XR.
In Variants > Variant display: Option list, picker-only Label font size is hidden. The mode exposes every Product metafields presentation control except Margin: Layout, Alignment, Item spacing, Item appearance, Separator, Typography, Prefix position, prefix Text style, prefix Font weight, and Show colon after prefix. Options render as semantic definition rows. Inline stays horizontal on desktop and switches to Stacked on mobile; configured Stacked stays stacked on both breakpoints. Product metafields uses the same semantic and presentation contract for metafield label/value rows.
Gift card products can also show Gift card recipient inside Purchase controls. Its Label font size applies to the labels above recipient fields, not to the Send as a gift checkbox label. Shared appearance controls also cover hidden labels/placeholders, required-field asterisks, and Default or Compact message input styling; validation messages use the storefront locale.
Cart summary can include Gift wrapping. The customer first selects the checkbox, then the optional Gift message field appears. The message supports Default or Compact style, optional visible label, label size, and placeholder fallback. Both values are stored as cart attributes and carried with the cart/order. The block does not add a wrapping product or fee; use a real priced product/variant or compatible app workflow when gift wrapping must change the order price.
Cart items own their media and title controls directly. Disabling either surface omits its markup while preserving quantity, prices, line details, responsive Remove actions, and AJAX updates.
Cart page and Slide-out cart use the same nested Cart summary defaults for Order notes, Gift wrapping, Terms, Checkout, and accelerated checkout. Product and Cart accelerated checkout share one theme renderer and a consistent Theme Editor placeholder while retaining Shopify-native storefront output.
Product badges can show sale, sold out, new, custom metafield, and low stock badges, with font-size and letter-spacing controls for the badge group. New badge remains visible in the Theme Editor for styling even when the preview product is older than its configured window. Empty badge lists are hidden on the storefront. Enable Attach to media to move the badge list to the direct Product-card container when media is inside the card, then choose a top or bottom vertical position. Low stock output only appears when inventory data is tracked and safe to show.
Product price can show the selected/default variant price, a price range, a From price for price-varying products, and unit price when variant unit-price data is available. Supporting details layout can keep supporting information stacked or place it inline. With Stacked selected, Unit price, Sale details, Savings, Detail text, and Additional detail text can each be moved Inline with price while the remaining details stay stacked. Sale percentage and the previous/compare-at price move as one Sale details group so the discount badge is not separated from the price it explains. On full Product surfaces, Guild automatically shows Shopify's Tax included. disclosure when the active cart/market reports tax-inclusive pricing; product cards suppress that repeated disclosure. Detail text and Additional detail text remain generic short-copy fields for other merchant notes. Product price has no separate Price weight control. Under Supporting details, Font size can remain Default to follow the existing adaptive supporting-size relationship to Price size, or explicitly use Main, Caption, or Small. This supporting-details control does not resize the sale badge/tag and does not change Smaller decimals inside the primary price. When Smaller decimals is enabled and Price display for products with variants uses Show from price, the translated From label uses the supporting text size while the main price value keeps the normal Product price size. Text style controls muted/italic presentation independently, while Font weight: Default follows the main body weight and Light, Regular, Medium, Semi bold, Bold, or Extra bold selects an explicit weight. When the current preview product does not provide sale or unit-price data, the Theme Editor can show representative preview values for styling; those preview values are never storefront product data.
Quick view can open a product-card modal when JavaScript and the global Quick view popup are available. The popup section itself acts as the feature switch: when Quick view is shown in the popup group, eligible View options links open the dialog; when the section is hidden or otherwise absent from the storefront, those links continue to the normal product page. Products that require an associated-product transition, more variant data, disclosures, or another full-page-only flow still use the product page even while Quick view is enabled. In Theme Editor, select Preview product in the Quick view popup section settings before editing its Product blocks. The preconfigured Quick view starts with the same non-gallery Product block composition as the default Product template. Product lists configured as Related products or Complementary products continue to use Shopify's Product Recommendations data inside Quick view and retain the configured Product-list/card presentation and empty-state behavior. The Quick view popup section owns Gallery position: Inside content keeps the existing Slideshow in the Product content flow, while Beside content uses the existing Grid beside the Product content. The shared Product gallery's Gallery layout setting remains authoritative on normal Product surfaces and is ignored in Quick view. In beside-content layout, leading media uses the configured popup image width as an upper bound but never exceeds 50% of the popup on desktop/tablet, and the exposed gallery edge follows the popup's own border radius instead of overriding it from Product gallery settings. Full-screen gallery/PhotoSwipe is intentionally suppressed inside Quick view, including the magnifier control. Without JavaScript, every Quick view trigger remains a normal product-page link.
Product rating reads Shopify review metafields or custom metafields. It only displays data; it does not collect reviews. Review-count wording is generated from the storefront locale. Rating value text style / Rating value font weight and Review count text style / Review count font weight independently control the compact rating value and review-count typography.
Countdown End date and time and Start date and time accept ISO-formatted local date-time values and compatible date/date-time dynamic sources. A Limited-time product card is removed only after the countdown reaches its valid end date. Future start dates and weekday visibility rules hide only the countdown until it becomes active; invalid configuration or asset-loading failure does not remove the promotional card.
Product metric can display a product or variant metafield such as a custom purchase counter. Shopify Liquid does not expose real customer purchase totals by default.
Product inventory is included in the default Product preset and can be removed when inventory messaging is not needed. It hides inventory for untracked stock, sold-out products, and pre-order/backorder products unless explicitly configured otherwise.
Product pickup is a Shopify local-pickup block, not a product metafield. For the selected variant it renders every pickup-enabled location returned by Shopify as a shared Cards-compatible list. Shopify supplies the location name, availability, configured pickup-ready text, address, and phone number. The block controls Grid or Slideshow layout, responsive columns, arrows and pagination, spacing, Boxed mode including the shared card Border radius control, and separate typography/alignment/margin settings for the location heading, availability text, and address/phone details. Show address and Show phone number only control those details. In the Theme Editor, three example location cards remain visible for styling; they never render on the storefront. The previous store-information drawer is no longer part of this block.
Product status can show simple status text from product availability, product metafields, variant metafields, or manual text.
Product brand can show vendor text, brand metafields, a logo image, or a logo metafield.

Product card composition notes:

Theme Guild does not expose a global drag-and-drop Shared product card section.
Use Custom blocks when a section needs a unique card composition, additional local blocks, or a highly tailored featured/regular card split.
Use Default product card when a simple built-in fallback renderer is enough for the product list.
Add Disclosures inside Product metafields to render Shopify-native structured disclosure records from product.metafields.shopify.disclosure. Each disclosure title becomes the inherited list prefix and rich-text content becomes the value. Disclosure symbols/images are intentionally not rendered. The child block owns only Show labels; Layout, Alignment, Item spacing, Item appearance, Typography, Prefix position, prefix Text style, prefix Font weight, colon, and Margin come from the parent Product metafields block. When the preview product has no disclosures, the Theme Editor shows three text-only sample rows. The child emits no storefront rows when live disclosure data is unavailable.
Use Accordion item with Text or Content source for a collapsible size guide. Its Advanced Dynamic content control remains a rich-text setting because that setting can accept compatible rich-text dynamic sources. When Dynamic content and all nested content are empty, the entire accordion item - including its heading - is omitted from the storefront. Use a normal Button or popup link when the guide belongs on a separate page or dialog.
Product shipping displays delivery copy from Shopify metafields and has no built-in heading or manual fallback-text setting. Add a normal Heading in the surrounding Product layout or Product visibility group when a label is needed. By default, the block reads the configured product metafield, with custom.shipping_and_delivery as the initial namespace and key. Under Show advanced options, enable Update by variant to read a selected-variant metafield first, with custom.delivery_estimate as the initial variant namespace and key, then fall back to the configured product metafield when the selected variant has no value. The visible text updates after variant selection without a page reload. If neither source has content, the storefront block and a dynamic Shipping info is available visibility group are hidden; the Theme Editor can still show preview copy for setup. Use short plain-text values that describe the store's actual fulfillment promise. Guild does not calculate delivery dates from inventory, incoming stock, or selling status. For the same product-level data inside a combined definition list, add Product metafields > Metafield, choose Product metafield, and use the same namespace and key. This differs from Product pickup, which reads Shopify's selected-variant store-availability data, pickup time, location address, and phone number.
Back-in-stock request can collect a customer's email address for the currently unavailable selected variant and send the request to the merchant through Shopify's contact-form delivery. It includes the product, product URL, variant title, and variant ID. Compose its visible content with the same nested Heading, Text, Form field, Buttons, and Success message blocks as generic Form. The Success message is rendered after Shopify confirms the contact-form submission; this remains a merchant follow-up request, not an automated restock notification service.
Product description can use Description excerpt, Full description, Custom text, or a Metafield. Full description preserves the product's rich HTML and is available through the same block in Product spotlight and Product list/card composition. Content maximum width can constrain the rendered description without requiring a separate description block. In Product-item card composition, Advanced > Show advanced options > Display mode can keep the description at its default behavior or show it only when the responsive card layout is Stacked or Wide; desktop and mobile card-layout choices are respected independently. Product metafields is a repeatable definition list that can combine Metafield, Disclosures, and Volume pricing children in one ordered list. Its default Item appearance is Default. A Metafield item can read a product metafield, a selected-variant metafield, the selected variant's SKU or Barcode, or manual text; SKU and Barcode update after variant changes and remain absent when no variant can provide a value. The child is named Metafield in authored presets. When Show label is disabled, the redundant merchant Label field is hidden; form/input labels elsewhere remain available when they still provide accessibility or fallback semantics. Shopify metafields whose type starts with list. are rendered inline as escaped comma-separated values such as Oak, Stone, Linen instead of creating a nested list inside the definition row. Non-list metafields retain Shopify's native typed rendering. Manual rows support the same Custom underline style treatments as Content list items. Each Metafield item can add an optional Lucide icon. Disclosures owns only Show labels and intentionally renders no disclosure images. Volume pricing owns only Quantity label and Price label. All three child types inherit the parent's Layout, Alignment, Item spacing, Item appearance, Typography, prefix, separator, and Margin controls. Product visibility group is a separate generic wrapper with nine conditions: Volume pricing, Product disclosures, Product pickup, Related products, Complementary products, Recently viewed products, Shipping info, Product description, or Product metafield has a value. Related, Complementary, and Recently viewed conditions follow their resolved Product list availability, including asynchronous storefront updates; when the group contains variant-aware Product shipping, the Shipping info condition follows that child block's actual dynamic visibility, while legacy groups without a dynamic Product shipping child check the configured product metafield directly. For Product-specific composition, Accordion - product > Accordion item - product and Tabs - product > Tab - product expose Advanced > Use conditional visibility with the same ordered Product conditions. Choose Product metafield has a value and enter the metafield namespace and key when visibility should depend on any normal product metafield; Shipping info remains the specialized Product shipping condition. Conditional items are omitted when their condition is unavailable, and the Product Accordion/Tabs parent is omitted when no child item remains visible, avoiding an empty shell. Column - product and Box - product use these Product-specific Accordion/Tabs blocks instead of the generic variants.

Shop the look

Use Shop the look to pair a strong lifestyle visual with a focused product list, such as a room scene, styled shelf, outfit, collection story, or campaign image.

Recommended use:

Use Row, Column, and Media blocks for the large visual.
Keep the nested Product list to one column when product cards should sit beside the image.
Use compact product cards when the section needs to feel like an editorial buying guide rather than a full collection grid.
Use a selected collection when the products should be curated manually.

Important behavior:

Shop the look is built from the same editable product card structure as Featured collection.
The default preset uses regular flexible blocks: a sticky Media column beside a one-column Product list.
On smaller screens, the layout stacks so media and products remain readable.
The section shows setup placeholder product cards in the Theme Editor when the selected source has no products to preview. On the live storefront, missing or empty product sources avoid showing setup instructions to customers.

Product inventory and stock counters

Use Product inventory and low-stock product badges when scarcity messaging helps customers make a buying decision.

Recommended use:

Use Inventory display set to Show only when low for most stores.
Set Low stock threshold to a number that matches how the store manages fulfillment.
Keep low-stock labels short, such as "Only [count] left".
Use stock counters only for products where inventory is tracked accurately in Shopify.

Important behavior:

Inventory messaging appears only when Shopify exposes tracked inventory that is safe to show.
The low-stock badge uses variant-level data and can update when a customer selects a different variant.
Pre-order or backorder products should be reviewed carefully before showing inventory messaging. When continue-selling stock is zero or below, Guild avoids numeric zero-count copy and uses the generic in-stock/pre-order-style label if the merchant explicitly chooses to show it.
Test products with tracked stock, untracked stock, sold-out variants, continue-selling variants, and multiple variants before publishing.

Use Related products on product templates to show products Shopify identifies as similar to the product being viewed.

Recommended use:

Place it below the main product information or near the end of the product page.
Keep the default heading if it fits the store tone, or edit the Heading block to match the product page.
Use the nested Product list block to adjust list layout, card layout, product count, spacing, and product card content.

Important behavior:

Related products need a product page context. On non-product storefront pages, the section does not render.
Shopify supplies the recommendation data. If Shopify returns no related products, the dedicated section stays hidden on the storefront instead of leaving an empty heading or gap. It remains available in the Theme Editor for configuration.
The section uses the same product-list and product-card model as Featured collection.
Product cards, variant pickers, quantity controls, slideshows, and product forms initialize after recommendation products load.

Complementary products

Use Complementary products on product templates to show products that pair with the product being viewed.

Recommended use:

Place it near the main product content, cart-building content, or after Related products when add-on discovery matters.
Use it for accessories, matching items, refills, care products, or supporting products.
Keep the product count modest so the section remains focused.
Use the nested Product list block to adjust list layout, card layout, product count, spacing, and product card content.

Important behavior:

Complementary products need a product page context. On non-product storefront pages, the section does not render.
The section uses Shopify complementary recommendation data. If Shopify returns no complementary products, the dedicated section stays hidden on the storefront instead of leaving an empty heading or gap. It remains available in the Theme Editor for configuration. Configure complementary products for the product in Shopify Search & Discovery when manual setup is required before expecting output.
The section uses the same product-list and product-card model as Featured collection.
Product cards, variant pickers, quantity controls, slideshows, and product forms initialize after complementary products load.

Featured catalog

Use Featured catalog to show all collections or selected collections as editable collection cards, such as Sofas, Beds, Wardrobes, Tables, or other product groups.

Recommended use:

Keep Show all collections enabled when the section should use the store collection list automatically. Disable it to select specific collections manually in the Collection cards block.
Use the first featured collection card when the layout needs one larger lead category.
Keep collection names concise so cards remain easy to scan on mobile.
Add collection images and descriptions in Shopify admin when cards should use real collection content.
Use Collection cards in other flexible sections when you need category cards inside a custom page composition rather than the default Featured catalog section.

Important behavior:

Collection cards are pulled from all store collections by default. Merchants can disable Show all collections and select a custom collection list instead. They do not build each card manually unless they want to customize the nested card blocks.
Collection cards can render Grid, Masonry, or Slideshow list layouts. Slideshow layout supports arrows, pagination, and optional header arrows. For Wide collection cards, set Columns to 1, then set Card layout to Wide on Collection item or Featured collection. Use Mobile card layout on the item when Wide should also apply on mobile.
In non-slideshow layouts, the first collection can use Featured collection for a larger lead card. Remaining collections use Collection item. When Card layout is Slideshow, collections use the regular card flow so slides stay consistent.
Collection item and Featured collection keep Collection thumb as the fixed first slot, expose Collection title, description, Product count, buttons, and other supported content directly in the item, and keep Collection footer as the fixed last slot. Collection description supports Content maximum width when the description should be constrained inside the card composition. Collection thumb owns card imagery and optional card-overlay content only inside collection-card lists. The separate Collection media block used on collection pages does not replace this card slot.
On the Collection page, use the separate Collection media block for the collection image. It follows the generic Media DOM and supports overlay opacity with an overlay color scheme, media width, aspect ratio, image width, alignment, border radius, box shadow, and Margin without inheriting .l-card behavior.
Collection button labels can use [count] to show the current collection's product count, such as View [count] products.
Setup placeholder collection cards are shown in the Theme Editor when no collection source can render cards. On the live storefront, missing or empty collection sources avoid showing setup instructions to customers.
Collection image alt text should be managed through collection imagery in Shopify admin. Collection cards use Shopify's collection featured-image behavior, so the first product image can act as the fallback when no explicit collection image exists. A visual placeholder is used only when no featured image can be resolved.

Use Related links and text for related category links and longer explanatory content near the bottom of a page, often above the footer.

Recommended use:

Use a selected menu for related category or collection links.
Keep link labels concise and useful for customers.
Use expandable text for longer collection descriptions, buying guides, or editorial SEO content.

Important behavior:

The preset uses boxed mode by default.
Navigation is configured as a flat utility-list style menu by default.
Expandable text only shows the Read more control when the rendered content is long enough to be clamped.

Form success message

Use Success message inside a Form block to customize the confirmation shown after a successful Shopify form submission.

Recommended use:

Keep the confirmation short and specific.
Use a short confirmation icon when the message needs to stand out.
Keep Contact and Newsletter confirmation messages consistent with the form purpose.

Important behavior:

Success message is a child block inside Form, not a standalone section-level block.
Contact form and Newsletter form presets include a success message by default.
The message appears after Shopify confirms a successful form submission. Display: Inline keeps the confirmation visible inside the form, while Display: Alert sends it to the theme's global success-alert system when JavaScript is available. In the Theme Editor, the Success message block shows a preview marker so merchants can style the confirmation without submitting the form.
Success message visual controls are intentionally narrow: merchants can choose Content or Status color, choose no visual or a curated icon, set the message font size, and let the icon inherit the message color. In Inline display mode, Margin controls spacing below the complete success message; Alert mode uses the global alert layout instead.
Text field, Select field, and Choice group support the standard Margin control, which helps align custom form rows with surrounding content. Text field supports Field layout: Single line or Multiline and a 1.0-2.0 Field height multiplier. Single line exposes Field type and optional inline Search button controls; Multiline renders a message textarea and exposes Character limit. Select field provides a curated select indicator choice with icon scale and stroke controls.

Background blocks

Background blocks can add visual layers behind section content. Background is the parent container. Add one or more Background layer children for solid color, gradient, image, or video layers, alongside optional Background icon, Ticker list, and Clickable area children. Background icon controls keep icon scale and icon stroke together for predictable SVG tuning.

Recommended use:

Use one or two background layers for controlled depth.
Use Background icon for large decorative icon marks behind content.
Use decorative background images with empty alt behavior.
Use video backgrounds sparingly and test mobile performance.
Keep ticker text short and readable.
Use Clickable area for a simple rectangular area-style hotspot over a background image or media composition.

Important behavior:

Background layers support Solid color, Gradient, Image, and Video. Image layers reveal Use separate mobile image after a primary image is selected; Mobile image appears only when that option is enabled. A saved Second image is inactive while the separate mobile image flow is enabled.
Background layer sizing uses 2% steps. Horizontal and vertical offsets use signed 2% steps, include a neutral 0% value, and remain available at 100% or oversized layer dimensions; the selected horizontal/vertical edge continues to control where the offset is measured from.
Background layer, Background icon, Ticker list, and Clickable area keep responsive Display mode, Layer order, and Transform controls under Advanced > Show advanced options. Display mode can use Default, Mobile only, Desktop only, Hide on desktop, or Hide on mobile. Mobile only applies through 760px, Desktop only applies above 1000px, Hide on desktop hides the block above 1000px, and Hide on mobile hides it through 760px. Layer order ranges from -10 to 10: 0 follows the block order, while higher values place a layer in front of lower values.
Background layer also exposes Reveal content on scroll under Advanced. Reveal style can use Slide from start, Slide from end, Slide from top, Slide from bottom, Zoom in, or Zoom out, and Delay can postpone the reveal by up to 2000ms. Existing Transform settings remain applied after the reveal completes. When Enable fixed background effect is active, the layer uses the fade/filter part of the reveal without translating or scaling the fixed-media root.
Background icon layers support icon choice, Link/Content/Custom color, large viewport-based icon sizing, opacity, horizontal and vertical positioning, offsets, and the Advanced transform controls.
Image background layers are lazy-loaded and decorative.
Image background layers without a selected image render placeholder media consistently in the storefront and Theme Editor. Video background layers still require a selected video.
Ticker list layers accept utility item, media, and button items.
Clickable area creates an invisible linked area and can show an optional tag-style label. Label styling appears only when Label contains text, and Horizontal alignment / Vertical alignment place that label within the clickable region. Clickable-area width/height use the same 2% sizing grid as Background layer, while signed offsets keep 0% available. In the Theme Editor, clickable areas remain visibly outlined so they can be selected and positioned without making the overlay link active while editing.
Ticker clones are hidden from assistive technology and made inert.

Boxed content

Use Boxed content for focused text, media, cards, or calls to action inside a contained area.

Recommended use:

Use for policy highlights, promotional copy, brand statements, or focused page content.
Use boxed mode and color schemes to separate the content from surrounding sections.
If the box feels too wide or too narrow, adjust section width, container max width, or content max width.
If the content feels cramped, review section padding and global Box padding.

Layered content

Use Layered content for editorial collage sections with multiple background layers, floating ticker content, and a flexible foreground content area.

Recommended use:

Use it for campaign storytelling, press-style hero compositions, editorial promos, and layered lookbook sections.
Keep foreground content short so the background composition remains readable.
Use background layers for flat visual blocks, gradients, images, or video. Use ticker list layers when moving text or utility items need to sit behind or around the content.

Important behavior:

The default preset uses a full-width composition by setting Container max width to 0.
Background layers in the preset avoid 3D transforms so the collage blocks remain predictable.
The ticker list preset uses transform settings to create a receding, off-screen layered effect.

Image hotspots

Use Image hotspots for image-map style layouts where several invisible linked regions sit over a media block or background composition.

Recommended use:

Use it for shoppable room scenes, lookbooks, product hotspots, and interactive editorial images.
Keep labels short and descriptive.
Use Label visibility set to Always when labels are part of the visible design. Use On hover only when the visual should stay cleaner until interaction.

Important behavior:

The default preset includes a Media block and several background Clickable area blocks.
Clickable area transforms are applied to the link overlay, not the label, so labels remain horizontal and readable.
Hover-only labels add the s-fill-bg--layer-hover class to the clickable area layer.

Box block

Use Box inside flexible content areas when only part of a section needs its own contained layout, color scheme, spacing, or controlled height.

Recommended use:

Use Box for grouped content inside Rich content, tabs, accordions, and other flexible sections.
Nest Box blocks only when each layer has a clear purpose, such as an outer layout box and an inner callout.
Use Section width, Background width, Container max width, Content max width, Content horizontal position, Height type, Content vertical position, and Margin to tune the local layout.

Important behavior:

Box supports the same section-style layout structure as other flexible sections, but it remains a block inside the parent section. When Container maximum width is greater than 0, Alignment positions the Box itself at the start, center, or end of the available width without changing nested content alignment.
Box background borders are applied to the Box fill layer, so the visible contained background receives the border instead of passing border variables into nested content.
Empty Box blocks do not render on the storefront.
Box can contain common flexible content blocks, including another Box.

Media with content

Use Media with content to pair images or video with text, buttons, cards, or other content.

Recommended use:

Use for campaign storytelling, product benefits, featured collections, and brand content.
Add meaningful alt text for images when the image communicates important information.
Review mobile stacking after choosing a layout.
If an image crops unexpectedly, adjust aspect ratio or choose an image with a better focal composition.

Important behavior:

Media blocks can use a separate mobile image when the media type is Image.
Mobile images are used at 760px and below. The desktop image is used from 761px and up.
Mobile aspect ratio controls appear only after a separate mobile image is enabled and selected.
Hosted video supports a manual poster image. Hosted video autoplay and hover autoplay lazy-load video sources and keep autoplay muted.
Hosted video Autoplay starts only after the media enters the viewport. Autoplay on hover starts when the customer hovers the figure, or the full card item when the video is used as card leading media.
YouTube / Vimeo uses provider thumbnail behavior when no Shopify preview image is available. Add a Shopify preview image when you want a merchant-controlled poster before play. See Privacy and external services for provider-request notes.
Instagram, TikTok, X/Twitter, and other social embeds are not native Media block types in the current MVP scope. Use Custom HTML or Custom Liquid for trusted third-party social embed code.
3D model media accepts a .glb model URL and an optional iOS .usdz URL. When a poster image is selected, the poster image renders as a real image before the model layer so the layout has stable dimensions before the model loads. The viewer is loaded through Shopify-native model viewer support rather than a theme-owned remote script.

Google map

Use Google map to pair a map with location copy, opening details, contact information, or a directions link. It uses the same layout controls as Media with content, but the preset starts with a generic sample map, placeholder location copy, opening-hours copy, and a directions button so merchants can recognize the map workflow immediately from the section picker.

Recommended use:

Use for store locations, showrooms, studio visits, event addresses, or pickup points.
Replace the sample map, placeholder address, opening hours, and directions link before publishing. Paste a Google Maps embed iframe URL whenever possible. Share links can be used, but embed URLs are the most reliable option. Review privacy/cookie consent coverage for embedded maps before publishing.
Add supporting text next to the map so customers know why the location matters and how to contact the store.
Test the map on mobile after changing aspect ratio, boxed mode, or media stretch settings.

Important behavior:

The section is a map-focused clone of Media with content and uses the same row, column, media, text, button, and flexible content blocks.
The map itself is rendered through the Media block with Media type set to Google map.
Overlay opacity, border radius, aspect ratio, and spacing follow the existing Media block behavior.

Columns

Use Columns to place content in multiple columns. It supports rows, columns, dividers, and rich content blocks.

Recommended use:

Use for comparison layouts, feature lists, mixed media and text, or side-by-side editorial content.
Use Stack on mobile when columns should become a single-column layout on small screens.
Use sticky or sidebar options only for content that benefits from staying visible while scrolling.
If columns become too narrow, reduce the number of columns or allow stacking on mobile.

Important behavior:

Vertical alignment: Stretch makes compatible columns use the full row height.
Stretch media-only column is under Advanced and applies only when Show advanced options is enabled and the column contains exactly one media block, including Media or Before and after. Adding text, buttons, or another block disables the media-stretch layout. Align image with container follows the same media-only condition. Column width includes the shared percentage options used across Column variants, including 45%, 55%, 65%, and 66%.

FAQ accordion

Use FAQ accordion for collapsible questions and answers.

Recommended use:

Use short headings for each question.
Put detailed answers inside Accordion item content.
Use page-sourced content when you want to reuse longer text managed elsewhere.
Split long answers into smaller questions when the content becomes difficult to scan.

Important behavior:

The Accordion parent accepts only Accordion item blocks.
Flexible content belongs inside each Accordion item, not directly under the Accordion parent.
Accordion items can be open by default.
A one-column Accordion using Style: Default can independently hide its top and bottom outer borders. Guild automatically tightens the corresponding outer spacing while keeping the summary row and toggle icon vertically aligned.
Accordion items can include optional heading visuals such as images or icons. Default-style one-column Accordion and Product Accordion shells plus Collection/Search filter accordions share independent Show top border and Show bottom border edge controls. Removing the bottom border subtracts one full accordion padding unit from the Accordion root margin instead of shifting the last panel, while the toggle row padding and icon centering stay unchanged. Accordion and Collection filters can use Plus and minus, Chevrons, or Arrows as the toggle indicator.
Accordion item panels can include rich content such as text, media, cards, forms, tabs, content lists, Content source, Custom HTML, and Custom Liquid. Under Advanced, enable Show advanced options to expose Dynamic content and connect a compatible Shopify dynamic source, such as a product shipping-information rich-text metafield. Collapsing the Advanced settings does not disable a saved source.

Tabbed content

Use Tabbed content to organize related information into tabs.

Recommended use:

Use for product details, care instructions, shipping and returns, size guidance, feature groups, or policies.
Keep tab headings short.
Use static tabs when each section should be reachable as page content rather than hidden panels.
Shorten labels if tabs overflow on mobile.

Important behavior:

The Tabs parent accepts only Tab item blocks.
Flexible content belongs inside each Tab item, not directly under the Tabs parent.
Tabs support standard, static, and hover-style behavior.
Use Hide built-in tab buttons and a Tabs ID when another block should control the tabs.
A Content list can control tabs when Control tabs with this list is enabled, the Content list uses Default or Inline layout, and its Tabs ID to control matches the Tabs ID.
Tab items use flexible child content. Use a Content source block inside a tab item when the panel should reuse content from a selected page.
Tab items can include rich content such as text, media, cards, forms, accordions, content lists, Content source, Custom HTML, and Custom Liquid.
A tabs block can show in the section header when used with a Heading block.

App blocks and app embeds are provided by installed apps. Guild controls where app blocks can be inserted, but the app controls its own output, settings, data requirements, and support scope. For platform details, see Shopify's app blocks and app embeds documentation.

For more predictable app initialization and layout, add app blocks at an available section, Column, Box, Product, Cart, Collection, Search, Footer, or other intentional integration point. Guild does not expose app blocks inside Card media, Collection media, content placed directly under a generic Card, Card footer, Tab item, or Accordion item.

Blog posts

Use Blog posts to show editorial article cards from a selected blog or, on blog templates, from the current blog when no blog is selected. It is useful for journals, buying guides, care guides, announcements, inspiration stories, and article-led discovery areas inside flexible page layouts.

Recommended use:

Select a blog before publishing the section on non-blog templates.
Use Featured blog item for the first article when the layout needs a larger editorial lead card.
Use Blog item for the repeated article card style. Regular Blog item cards stay within the normal grid; Featured blog item can span columns or rows.
Keep article titles and excerpts concise enough for card grids and mobile slideshows.
Add article featured images and alt text in Shopify admin.
Use tags sparingly. A few strong editorial labels usually read better than a long tag cloud on every card.

Important behavior:

Blog post list can render Grid, Masonry, or Slideshow list layouts. Slideshow layout supports arrows, pagination, and optional header arrows. For Wide article cards, set Columns to 1, then set Card layout to Wide on Blog item or Featured blog item. Use Mobile card layout on the item when Wide should also apply on mobile.
Set Article source to Blog, Selected articles, or Related articles. Blog is the default and can fall back to the current article's blog on Article pages. Selected articles preserves the chosen order. Related articles excludes the current post, prioritizes shared tags, fills from the same blog, and does not use native pagination.
Under Advanced, Show only when posts are available hides the complete Blog posts section on the live storefront when its configured source resolves to no articles. It remains visible in the Theme Editor so the section can still be configured.
Featured blog item styles the first resolved article whenever that fixed block is enabled, regardless of Article source. When it is disabled, the first article uses the regular Blog item.
Blog post list, Collection cards, and Product list use the same built-in Pagination child block where the source supports pagination. Keep Pagination last in the fixed block tree and hide it to turn its output off. It remains visible as a Theme Editor preview when enabled, even when the current preview has only one page. The block can render numbered links, Load more, or guarded Infinite scroll. Previous/next icons support arrow or chevron styling, icon-only labels remain accessible, and Infinite scroll retains a manual button fallback. After the final page is appended, Load more and Infinite scroll remove the complete Pagination output instead of leaving a disabled control or completion message. Collection cards pagination is available for the all-collections source; manually selected collection-card lists remain curated capped lists.
Blog post list can also be added to flexible sections when article cards should appear inside a custom page composition.
The first article can use Featured blog item for a larger lead card. Remaining articles use Blog item.
Blog cards use article image alt text, falling back to the article title.
Blog cards keep Article thumb as the fixed first slot, expose article content directly in the Blog item, and keep Blog footer as the fixed last slot. The separate Article media block used on article pages does not replace this card slot.
Content inside Article thumb appears as media overlay content. Article tags with Attach to media are placed directly over the card image when the tags are used inside a card. If the tags are already inside Article thumb, Liquid places them there directly; if they are elsewhere inside the card, JavaScript moves them to the card media layer. Outside cards, the setting has no effect.
Blog item can contain Article heading, Article excerpt, Article details, Article tags, and Article buttons directly between Article thumb and Blog footer.
Blog details can show article information such as author, date, and reading time when article data exists.
Blog tags can use Default, Inverted, or Plain layout, optional color schemes, optional uppercase text, and font-size and letter-spacing controls. Caption is the default tag size. Plain tags can be styled as Default, Muted, Bold, Bold + muted, Italic, or Italic + muted; regular tag badges remain bold by default. When Link tags is enabled, each real Article tag links to that Article's owning Blog tag archive, including cards rendered outside the current Blog page.
Article buttons provide article-aware actions inside Blog cards and Article layouts. Each child owns its link source and appearance.
If configured card blocks produce no body content, the theme renders fallback article metadata, title, excerpt, reading time, and read-more link.
In the Theme Editor, empty states explain whether a blog is missing, the selected blog has no published articles, or the Blog item block is hidden. On the live storefront, missing or empty blog sources avoid showing setup instructions to customers.

Article

Use the main Article section on individual Shopify blog post pages. The section is available only on Article templates. Shopify calls the individual blog post resource an Article; the Blog template remains the list or journal page.

The Article section uses the same generic section shell as Rich content. It supports the standard section width, background width, container and content widths, height, boxed content, color scheme, padding, borders, background content, spacing, reveal, anchor, and advanced layout controls.

Recommended setup:

Keep one Article heading configured as h1.
Use Article excerpt for the optional lead and Article content for the full body created in Shopify Admin.
Use Article media for the primary Article image. Article cards inside Blog post lists continue to use Article thumb.
Use Article details as the list container, then add one or more Article detail children. Choose Type: Date, Author, Reading time, or Summary. Date can show Published or Updated output with an optional label. Author can show the Shopify author account image and an optional title. Summary builds linked navigation from headings inside Article content and can show item numbers.
Use Article tags and Article buttons where the layout needs them.
Use Row - article, Column - article, and Box - article for article-specific multi-column, sidebar, and framed compositions. They use the standard Row, Column, and Box layouts while retaining the current Article resource for nested blocks.
Add Article buttons for Previous article, Current blog, Next article, Article details, or Author homepage actions. Use [title] in Previous/Next labels to insert the destination article title. Enable Keep buttons inline under advanced options when the shared .link-btn--keep-inline hook is needed for custom no-wrap styling.
Enable comments only when comments are enabled for the Shopify blog and the Article section's Show comments setting is enabled.
Add app blocks for supported app content. For native device sharing with Copy link fallback, add a generic Buttons > Button and set Action behavior to Share current page.

Important behavior:

Shared Article title, excerpt, details, tags, and action blocks can be used in Blog cards and on the Article page. Article details uses repeatable Article detail children, and its default settings preserve the existing Blog card output.
Previous article and Next article sources work only for the current Article page and do not resolve from article cards on Blog or Search pages.
A missing author name suppresses the Author output, including the avatar.
A missing previous or next article suppresses only that navigation item.
The Article section supports app blocks, but third-party app setup, styling, privacy behavior, and provider changes remain app-provider responsibilities.

Use Countdown banner for time-limited promotions, launches, events, or deadlines.

Recommended use:

Set a genuine end date and time for a real promotion, launch, event, or deadline.
Use a clear heading and call to action near the countdown.
Review the countdown on desktop and mobile.
Review the page after the deadline passes so expired promotions are not shown by mistake.

Important behavior:

Countdown blocks require an explicit End date and time. If it is blank, the countdown is hidden on the storefront and the Theme Editor shows a setup note instead.
Use countdowns only for genuine time-limited campaigns or events. Do not use a timer to create artificial urgency.
Countdown blocks can include an optional start date/time setting.
Use local time in ISO format for countdown dates, such as 2027-04-14T15:00:00.
Countdown blocks can show or hide days, hours, minutes, and seconds.
Countdown blocks can be limited by weekday visibility.
Review the countdown in a storefront preview after changing dates, because customer devices and browser date parsing can affect how the countdown is displayed.

Before and after

Use Before and after to compare two images.

Recommended use:

Use images with the same dimensions and similar framing.
Select both comparison images before publishing.
Add labels if customers need to understand which image is before and which image is after.
Use for transformations, product results, styling comparisons, or visual edits.
If the comparison looks misaligned, upload matching image sizes.

Important behavior:

Test the comparison control with mouse, touch, and keyboard before publishing.
With two images, the block renders the interactive comparison. With exactly one image, it renders that image as normal media instead of showing an incomplete comparison. With no images, the storefront renders nothing; the Theme Editor keeps comparison placeholders available for setup.
When Show labels is enabled for a horizontal comparison, Label position can place both labels at the Top or Bottom. Vertical comparison keeps its dedicated label placement and hides this setting.
Keep labels short so they remain readable on mobile.
Add meaningful image alt text when either image communicates product, result, or service information.
When Before and after is the only media block inside a compatible Column, it can use the same media-only stretch and container-alignment controls as a regular Media block.

Breadcrumbs

Use Breadcrumbs to help customers understand where they are in the store.

Recommended use:

Place near the top of product, collection, blog, article, or standard page templates.
Keep spacing compact so breadcrumbs support navigation without dominating the page.
Use breadcrumbs as a supporting navigation aid, not as the main page title.

Important behavior:

Breadcrumb output depends on the current template and available Shopify objects.
Breadcrumb separators use the same main separator choices as Content list, including double slash and icon separators.
Use Advanced > Show advanced options > Display mode when Breadcrumbs should be mobile-only, desktop-only, or hidden on one responsive range.
Review product, collection, blog, article, and page templates separately before publishing.
Keep breadcrumb placement consistent across templates so customers do not need to relearn navigation patterns.

Spacer

Use Spacer to add controlled section-level space between page areas.

Recommended use:

Use when one specific page area needs extra room between sections.
Use Divider inside Rich content when the spacing or separator belongs inside a flexible content layout.
Avoid stacking many Spacer sections when global spacing or section padding would solve the same layout issue.

Important behavior:

Spacer is a standalone section-level spacing tool.
It is separate from the Divider block, which can also create an empty space inside flexible content sections.

Contact form

Use Contact form for Shopify-native customer inquiries or for a standalone Shopify search field.

Presets:

Contact form - a contact layout with name, email, topic, message, privacy-consent, submit, and success-message blocks.
Search box - a focused search field that submits a normal Shopify search request. Use it when a page needs an additional search route outside the Header.

Recommended use:

Keep required contact fields limited to what the store needs.
Test contact submissions on a real preview URL before publishing.
If contact messages are not received, check Shopify store email settings and spam filtering.
Keep the Search box label and placeholder clear, then test the resulting Search template.

Important behavior:

Contact forms use Shopify's native contact form delivery and response states.
Search forms submit to Shopify search and do not create a separate predictive-search interface.
Form blocks can use Content max width when the form should be narrower than the surrounding section.
Custom HTML, Custom Liquid, and app-provided forms remain owned by their provider or code author.

The customer contact form is separate from the Guild support form used for theme-related questions.

Use Newsletter form to collect customer email signups.

Recommended use:

Explain what customers will receive.
Keep the form short.
Use a clear success message.
Check Shopify customer and email marketing settings if signups do not appear where expected.

Important behavior:

Form blocks can include fields, choice groups, hidden fields, and customer tags.
Row - form and Column - form organize fields inside a Form block. They use the same layout behavior as the reusable Row and Column blocks, while keeping a form-specific list of allowed child blocks.
Form validation marks forms with errors, disables submit buttons while errors exist, and restores submit buttons after errors are resolved.

Password page form

The Password section itself owns Shopify's native storefront password form. There is no intermediate Password form block. Add Password field and a submit Button directly to the section or inside its Password Row/Box layouts. This is not a customer account login form.

Recommended use:

Place Password field near the password page message or inside a focused Password Box/Column layout.
Keep the field label visible unless the surrounding copy clearly explains the field.
Test an incorrect password to confirm the error appears under the password input.
Test a correct password on a password-protected storefront before launch.

Use Password message when you want to show the password message configured in Shopify admin. Use its Style setting for muted, bold, bold muted, italic, or italic muted presentation. Use a regular Text or Heading block when you want fully theme-controlled content instead.

Both password-specific blocks are grouped under a. Password and only render on the Password page.

Use Popup for popup-style content. Popup sections are added in the popup group, not as normal page sections.

Recommended use:

Use for newsletter prompts, age verifiers, focused announcements, or short promotional content.
Set a clear Popup handle so buttons can target the popup.
Use Open automatically and Delay only when the popup should appear without a customer action.
Use Remember dismissal to avoid showing the same popup too often.

Important behavior:

Popup presets include Popup and Age verifier. Newsletter popup is available as a dedicated popup-group section.
A manual Newsletter popup reopens when its Shopify newsletter form returns a success or error state, so submission feedback remains visible after the storefront reload.
Popups can include leading media. Leading media can use a separate mobile image when the media type is Image.
Popups can block closing, show or hide the close icon, and use position, maximum width, overlay opacity, and overlay color settings.
Buttons can be configured to open or close a target popup.
Popup-control buttons are not form submit buttons.
Popup presets avoid broken placeholder links.

Age verifier guidance:

Use the Age verifier preset only when the store is responsible for age-gating content or products.
Review the age statement and confirmation button wording against the store's legal requirements before publishing.
The preset is designed to remember a successful confirmation so customers are not asked on every page view from the same device.
Test the age verifier in a normal storefront preview, not only in the theme editor, because dismissal memory is handled differently while editing.

Troubleshooting:

If a button does not open a popup, confirm the button target matches the popup handle.
If a button should submit or reset a form, do not enable popup control on that button.
If a popup keeps appearing, review dismissal memory and dismissal duration.
If a popup is difficult to close, review close icon and block closing settings.

Use Product details popup for focused Product information that should open in a dialog on product pages. Add it from the Popups section group.

Recommended use:

Add selected Product blocks such as Product pickup, Back-in-stock request, Product details, Product metafields, Product price, or Product gallery.
Set a clear Popup handle, then configure a Button to open that handle.
Keep the composition focused; use Quick view when customers need variant selection, Purchase controls, app-powered Product content, or a complete purchase surface.

Important behavior:

Product details popup uses the same position, sizing, overlay, close, automatic-display, dismissal, blocking, media-layout, spacing, and color settings as Popup.
It uses the current Product and renders only on product pages. The saved section remains in the Popups group but produces no storefront output on Collection, Search, Page, Blog, Article, Home, or other non-Product pages.
Its Product block pool follows Product spotlight but excludes direct Apps and Purchase controls entries. Product list remains available for focused related/complementary merchandising, and standard Product Row, Column, Box, Accordion, and Visibility group blocks retain their normal nested child options. Quick view retains the complete purchase-capable block pool.
The first top-level Product gallery can use the Popup leading-media area. Its normal Gallery layout remains in control; Quick view's section-owned Gallery position behavior does not apply here.
A Product gallery nested inside a standard Product Row, Column, Box, or Visibility group stays inside that layout. Move the gallery to the section's top level when it should become the popup's leading media. A Button inside Product details Visibility group can target the popup handle while the popup keeps the heavier Product content outside the conditional group.
Some remaining blocks show variant-dependent information. Until one-way synchronization is verified for the store configuration, review price, badges, gallery, pickup, Product details, metafields, Back in stock, and Visibility group content after changing the main Product variant.
The section is opt-in and is not added to the default Popups group automatically.

Back-to-top button

Use Back-to-top button in the popup group when the store needs a persistent shortcut back to the top of the page.

Recommended use:

Keep the label short, such as "Back to top".
Use a compact button style that does not cover product forms, cart controls, or chat widgets.
Test placement on mobile before publishing.

Important behavior:

Back-to-top is managed with the same popup group as popups.
The button remains available in the theme editor so merchants can see and configure it while designing.
The default preset targets the page root instead of a broken placeholder link.
Test the button on long product, collection, article, and mobile pages so it does not cover important controls.

Custom HTML

Use Custom HTML only for trusted embeds or code that cannot be created with normal theme sections.

Recommended use:

Use sparingly.
Use for trusted third-party embeds such as Instagram posts, TikTok videos, X/Twitter posts, maps, booking widgets, or provider snippets that cannot be created with normal Guild settings.
Use the embed code supplied by the provider. Do not paste account dashboards, private links, or scripts from an unknown source.
Duplicate the theme before adding or editing custom code.
Test desktop, mobile, and page speed after adding custom HTML.
Remove custom code before troubleshooting layout, accessibility, or performance issues.
When Custom HTML contains a form, the code author or provider is responsible for the submission endpoint, validation, success/error handling, accessibility, spam protection, consent, and data handling. It does not automatically become a Guild or Shopify-native form.

Use Custom HTML or Custom Liquid for social embeds when a provider gives you an embed snippet, such as an Instagram post, TikTok video, X/Twitter post, booking widget, review widget, or similar provider-controlled content. Guild does not provide native social feed widgets in the current MVP scope.

Before publishing a social embed:

Confirm the embed comes from the official provider or a trusted app/provider.
Test the page on desktop and mobile.
Check whether the embed adds external scripts, cookies, consent requirements, or performance impact.
Remove the embed while troubleshooting layout, accessibility, privacy, or loading issues.
Contact the embed provider or app developer if the embed itself stops loading or changes behavior.

Support note:

Custom HTML can affect layout, accessibility, loading speed, privacy behavior, and app behavior. Third-party embed providers control their own scripts, cookies, availability, and rendering. Custom code is not included in standard theme support unless support explicitly confirms otherwise.

Custom Liquid

Use Custom Liquid only when custom Shopify output is needed and normal theme settings cannot create the result.

Recommended use:

Use only if you understand the code being added.
Duplicate the theme before adding or editing custom code.
Test the affected pages before publishing.
Remove custom code before troubleshooting layout, accessibility, or performance issues.
When Custom Liquid creates or modifies a form, the code author is responsible for the complete form contract, including Shopify form tags or external endpoints, validation, accessible errors/status, consent, spam protection, and data handling.

Support note:

Custom Liquid can affect updates, the support scope for issues caused by the modification, accessibility, performance, privacy behavior, and storefront behavior. Third-party embed providers control their own scripts, cookies, availability, and rendering. Custom code is not included in standard theme support unless support explicitly confirms otherwise. For advanced changes, consider hiring a Shopify Partner.

Advanced content controls

Flexible content sections can use Height type values such as None, Minimum height, Viewport height, or Aspect ratio. Use only the height model that serves the content, and keep reveal or transform effects subtle enough for text to remain readable. Sections that expose Advanced > Show advanced options can also use Display mode to control the whole section with Default, Mobile only, Desktop only, Hide on desktop, or Hide on mobile. Mobile only follows the theme's mobile utility through 760px; Desktop only applies above 1000px; Hide on desktop hides the section above 1000px; and Hide on mobile hides it through 760px. The exclusive Mobile only and Desktop only modes therefore both omit the 761px-1000px tablet range, while the Hide modes keep that range visible.

Useful merchant-facing details:

Input text alignment controls text inside an input field, not the position of the block.
Price blocks can use the Heading 2 price size where a stronger price hierarchy is needed.
A small negative custom margin can tighten a composition, but should be tested with long content and mobile stacking.
Apple Wallet is configured as a generic Button action and appears only when Shopify provides the required gift-card pass URL.
Gift card QR code uses Image width and optional Caption controls; it keeps a square presentation.
Gift card details provides focused recipient, status, and message rows without exposing the full navigation and animation options of a general Content list.
Content list prefix controls are intended for real label/value pairs. Leave Prefix label blank when the item is ordinary content rather than a definition row.

Sections ​

Choose a task guide ​

Theme Editor picker categories ​

Choose sections by storefront job ​

Start simple, then add structure ​

Header ​

Footer ​

Navigation ​

Hero slideshow ​

Image divider ​

Gift card ​

Rich content ​

Social media links ​

Button behavior ​

Logo block ​

Payment methods block ​

Content list blocks ​

Collection list block ​

Content source blocks ​

Collection and Search filters ​

Featured collection ​

Shop the look ​

Product inventory and stock counters ​

Related products ​

Complementary products ​

Recently viewed ​

Featured catalog ​

Related links and text ​

Form success message ​

Background blocks ​

Boxed content ​

Layered content ​

Image hotspots ​

Box block ​

Media with content ​

Google map ​

Columns ​

FAQ accordion ​

Tabbed content ​

Blog posts ​

Article ​

Countdown banner ​

Before and after ​

Breadcrumbs ​

Spacer ​

Contact form ​

Newsletter form ​

Password page form ​

Popup ​

Product details popup ​

Back-to-top button ​

Custom HTML ​

Trusted social embeds ​

Custom Liquid ​

Advanced content controls ​

Related guides ​

Sections

Choose a task guide

Theme Editor picker categories

Choose sections by storefront job

Start simple, then add structure

Header

Footer

Navigation

Hero slideshow

Image divider

Gift card

Rich content

Social media links

Button behavior

Logo block

Payment methods block

Content list blocks

Collection list block

Content source blocks

Collection and Search filters

Featured collection

Shop the look

Product inventory and stock counters

Related products

Complementary products

Recently viewed

Featured catalog

Related links and text

Form success message

Background blocks

Boxed content

Layered content

Image hotspots

Box block

Media with content

Google map

Columns

FAQ accordion

Tabbed content

Blog posts

Article

Countdown banner

Before and after

Breadcrumbs

Spacer

Contact form

Newsletter form

Password page form

Popup

Product details popup

Back-to-top button

Custom HTML

Trusted social embeds

Custom Liquid

Advanced content controls

Related guides