Appearance
Navigation and page structure
Documentation scope: Guild 0.1.x pre-release builds. The exact public release version will be confirmed in the changelog before Theme Store publication.
Use this guide for the store shell, page hierarchy, and broad layout decisions.
Header and Footer
Use Header for the logo, Main menu, search, account access, cart access, localization utilities, and optional top-bar content. Build menu content in Shopify Admin first, then choose how Guild displays it. Dropdown style can keep classic dropdowns, choose generated mega menus automatically from deeper menu structures, or force mega-menu presentation. Generated mega menus have separate controls for navigation columns and gap, group headings, nested links, and View-all actions. Group headings can use Heading or Body typography, Body-only Text style, Font weight, Font size, Uppercase, alignment, and margin; optional Mega menu panel and Custom mega menu content keep their own component styling.
Use Footer for secondary navigation, policies, contact routes, social media links, payment methods, localization utilities, and store details. Footer Navigation headings can use Heading or Body typography, Body-only Text style, Font weight, Font size, Uppercase, and heading spacing. Columns sets the maximum desktop column count; when the selected menu renders fewer groups, Guild uses only the available groups instead of reserving empty columns. Keep support and legal links easy to find.
Before publishing, test nested menus, the desktop More overflow, mobile navigation, search, account access, cart access, country selection, and language selection.
Opening and editorial structure
Use Hero slideshow for a strong campaign or brand opening. Keep each slide focused on one message and one primary action.
Use Media with content for an image, video, or 3D model paired with concise text. It is usually a better fit than a slideshow when the page needs one stable story.
Use Rich content when a preset already matches the intended composition, such as Store highlights, Testimonials, Gallery, Team, Trust and reassurance, or Press coverage.
Layout sections
Use Columns for deliberate side-by-side content. Enable mobile stacking where the content should read vertically on small screens.
Use Boxed content for framed information, notices, trust content, or a visually separated content group. Use Layered content when content needs to overlap or sit over a background composition.
On an Article page, use Row - article, Column - article, and Box - article when nested content must retain the current Article data. These blocks use the same layout system as the standard Row, Column, and Box blocks. Use the dedicated Article navigation block when the layout needs previous, blog, and next buttons.
Supported Heading, Row, Column, and Box blocks can be hidden responsively from Advanced > Show advanced options > Display mode. The same control is available on supported Media, Divider, Icon, Quote, and Star rating blocks. Use it for intentional device-specific composition rather than duplicating whole sections.
Use Breadcrumbs to help visitors understand page hierarchy. Use Spacer only for an intentional local gap; prefer section spacing settings for the general page rhythm.
Review checklist
- Confirm menu labels and calls to action are short enough for mobile.
- Check image crop and text length at desktop and mobile widths.
- Review keyboard navigation for menus, sliders, tabs, and popups.
- Avoid recreating a built-in layout with Custom HTML or Custom Liquid.
- Test pages with the longest realistic headings and translated labels.