Pages

Static pages can be prepared with rich text content and flexible section composition, so merchants can build store policies, brand pages, guides, and other reusable page layouts.

Page template

About page

The About page uses the page.about template and the About story section. It is designed for brand storytelling: a hero introduction, supporting page content, value cards, a milestone timeline, a founder-style quote, and a final call to action. Merchants can edit the page copy in Shopify admin and fine-tune the full storefront layout from the theme editor.

Theme editor showing the About page selected with the About story section in the sidebar.
Open the page selector in the theme editor and choose Pages > About. The template contains one main section named About story.

Template structure

The default page.about.json template contains a single About story section with four Value blocks and five Milestone blocks. The blocks can be reordered, edited, or removed in the theme editor. The section also supports fallback theme text, so the page still previews cleanly before a merchant finishes every field.

Assign the template

In Shopify admin, create or open an About page and assign the about theme template. Add the long-form brand story in the page content area when the section setting Show page content should display it beneath the intro text.

Edit the section

Select About story in the Template area. Use the global color scheme option when the page should inherit the storewide palette, or choose a dedicated color scheme for a more editorial brand page.

Set the page width

Use Content max width to control how wide the page can stretch on large screens. The default is 1640px, which gives the hero and timeline enough room without making text lines too long.

Theme editor sidebar showing About story section settings and its Value and Milestone blocks.
The About story section contains the main section settings first, followed by editable Value and Milestone blocks.

Intro content

Set the Eyebrow, Heading, and rich text Text fields to introduce the brand. Leave the heading blank only when the page title should act as the main heading.

Page content

Enable Show page content to display the Shopify page body inside the hero area. This is useful when merchants prefer editing long narrative copy from the Pages admin instead of inside section settings.

Hero button

Add a Button label and Button link when the intro should lead customers to collections, featured products, a journal page, or a contact page. The button is hidden until both fields are filled.

Theme editor settings for About story intro content, page content toggle, and hero button.
Intro fields control the top copy. The page content toggle pulls in the body text from the Shopify page assigned to this template.

Brand imagery

Add a Primary image for the hero media and a Secondary image for the journey area. Use images with clear subjects and similar visual tone so the page feels intentional across desktop and mobile layouts.

Journey and quote

Set the Journey heading, Quote text, and Quote author to connect the timeline with a human brand voice. If these fields are blank, localized default copy is used.

Call to action

Use the CTA image, heading, text, and up to two buttons to send customers to the next step after they read the brand story. Common destinations are a collection list, a featured collection, or the contact page.

Theme editor settings for About story media, journey, quote, and call to action fields.
Media, journey, quote, and CTA settings complete the lower parts of the About page.

Value blocks

Value blocks create the compact cards below the hero. Use them for brand promises such as quality, responsible materials, delivery, design, service, or warranty. The section supports up to four Value blocks, each with an icon, heading, and short text.

Theme editor showing an About story Value block with icon, heading, and text settings.
Each Value block controls one card. Choose an icon, then keep the heading and text short enough to scan quickly on mobile.
  1. Select a Value block inside the About story section.
  2. Choose an icon: Quality, Leaf, Delivery, Globe, or Star.
  3. Add a concise heading that names the promise.
  4. Add one short sentence explaining why the value matters to customers.
  5. Drag blocks into the order customers should read them.

Milestone blocks

Milestone blocks build the timeline in the journey area. Use them for founding moments, product launches, global expansion, sustainability changes, store openings, community initiatives, or other proof points that help customers understand the brand's progression.

Theme editor showing an About story Milestone block with label, heading, and text settings.
Each Milestone block includes a label, heading, and supporting text. The label is usually a year, but it can also be a short era or campaign name.
  1. Select a Milestone block inside the About story section.
  2. Use Label for a year, season, launch name, or short date marker.
  3. Add a heading that summarizes the milestone.
  4. Add a short text field with the customer-relevant context.
  5. Keep the timeline chronological unless a campaign story needs another order.
Best practice: Treat the About page as a trust page, not only a biography. Lead with the brand's reason to exist, show a few concrete values, use real imagery when possible, and finish with a clear next step.

Page template

Contact page

The storefront Contact page uses the page.contact template. This is different from the documentation support form linked in the header. The storefront template is built for customer contact, store details, and social channels inside Shopify, while the documentation contact form is only for public Kronox theme support.

Theme editor showing the Contact page selected with Contact page and Contact social links sections.
Open the page selector in the theme editor and choose Pages > Contact. The template includes the main Contact page section followed by Contact social links.

Template structure

The default page.contact.json template contains two sections. The first section, Contact page, renders the page heading, optional page body, Shopify contact form, and contact details sidebar. The second section, Contact social links, renders brand social links from Shopify brand settings and optional manual social network blocks.

Assign the template

In Shopify admin, create or open the customer-facing Contact page and assign the contact theme template. Add any intro copy in the page content field when the page should show a short note above the form and contact details.

Section style

Use Follow global theme color scheme when the page should inherit storewide colors. Disable it and choose Color scheme when the contact area needs its own background and surface treatment.

Layout width and spacing

Use Content max width to control the full page width. Adjust top and bottom padding to place the form comfortably between the header, social links, and footer.

Theme editor sidebar showing Contact page section settings for color, width, spacing, and heading.
The Contact page section controls the main storefront contact layout, including page width, heading, form visibility, and sidebar details.

Heading and page content

Set Contact page heading when the storefront heading should be different from the Shopify page title. If the Shopify page has body content, the section displays it under the heading as introductory copy.

Contact form

Keep Enable contact form turned on when customers should be able to send a message through Shopify's built-in contact form. The form includes name, required email, optional phone, and required message fields.

Phone field

Use Show phone field when phone follow-up is useful for the store. Disable it for simpler support workflows where email-only contact is preferred.

Theme editor settings for Contact page form heading, phone field, and contact sidebar fields.
Form settings control the customer message form. Sidebar fields add the visible store contact details beside it.

Contact details sidebar

The sidebar is shown when at least one contact detail is filled in. Use Response heading and Response text to set expectations, then add email, phone, location, and working hours as needed. Email and phone values become clickable links on the storefront, while location and working hours support multiple lines.

  1. Set a clear response heading, such as We are here to help.
  2. Add a short response text that explains when customers should expect a reply.
  3. Add the customer-facing support email and phone number.
  4. Add store location and working hours only when they are useful for the business.
  5. Preview the page on mobile to make sure the sidebar and form stack cleanly.

Contact social links

The Contact social links section helps customers continue the conversation on social channels. It can pull links from Shopify brand settings, render manual social network blocks, or combine both. Social cards are rendered with the contact-social-card snippet, which shows the platform icon, label, optional handle, and a link arrow.

Theme editor settings for Contact social links with brand social links and manual social network blocks.
Use brand social links for storewide channels, or add Social network blocks when the contact page needs specific labels, handles, links, or new-tab behavior.

Brand social links

Enable Show Shopify brand social links to use social URLs configured in Shopify brand settings. The section supports common platforms including Instagram, Facebook, X, LinkedIn, Pinterest, TikTok, YouTube, Snapchat, Tumblr, and Vimeo.

Manual blocks

Add Social network blocks for page-specific channels or custom labels. Each block has a platform, label, handle, link, and Open in new tab option.

Brand fallback

Enable Use Shopify brand link when a manual block link is blank when manual blocks should inherit the matching brand social URL. This is helpful when merchants want custom labels or handles without re-entering every link.

Best practice: Keep the storefront Contact page customer-focused. Use the Shopify contact form for order, product, and store questions; keep the documentation support form separate for theme support requests.

Page template

FAQ page

The FAQ page uses the page.faq template and one main FAQ section. It is built for customer self-service: a clear help-center hero, category buttons, filtered question accordions, and an optional support card for customers who still need help.

Theme editor showing the FAQ page selected with the FAQ section in the template sidebar.
Open the page selector in the theme editor and choose Pages > FAQ. The template contains the FAQ section with category and question blocks.

Template structure

The default page.faq.json template includes six Category blocks and seven Question blocks. Category blocks create the filter buttons across the page, while Question blocks create the accordion items. Each question is connected to a category by its Category setting, so customers can filter answers by topic.

Assign the template

In Shopify admin, create or open the FAQ page and assign the faq theme template. Use the Shopify page body only when the FAQ section setting should pull page content into the hero.

Section style

Keep Follow global theme color scheme enabled when the FAQ page should inherit the storewide palette. Use Color scheme, Content max width, and Corner radius to tune the full FAQ layout.

Spacing

Adjust top and bottom padding when the FAQ page needs more room below the header or above the footer. Keep spacing moderate so customers can reach the questions quickly.

Theme editor sidebar showing FAQ section settings and category and question blocks.
The FAQ section settings control the overall page. Category and Question blocks build the customer help content.

Hero content

Use Eyebrow, Heading, and rich text Text to introduce the page. If the Text field is blank, enabling Show page content when intro text is blank lets the section display the Shopify page body instead.

Hero image

Add a Hero image when the FAQ page needs a warmer service or product-care visual. If no image is selected, the hero remains text-first and the page still works cleanly.

Support card

Enable Show support card to display help copy, email, phone, hours, and a CTA button below the FAQ list. This is useful when customers may need order-specific support.

Theme editor settings for FAQ hero content, hero image, and support card.
Hero settings introduce the page. Support settings create the final help card below the accordion list.

Category blocks

Category blocks create the filter buttons customers use to switch between FAQ topics. The section supports up to eight categories, including Orders, Shipping, Returns, Product care, Warranty, Payments, Custom 1, and Custom 2. A category only becomes useful when one or more Question blocks use the same category connection.

Theme editor settings for an FAQ Category block with category connection, icon, and label.
Configure each Category block with a category connection, icon, and customer-facing label.
  1. Select a Category block inside the FAQ section.
  2. Choose the Category connection. This key controls which questions appear when selected.
  3. Choose an icon that matches the topic.
  4. Add a short label, such as Orders, Shipping, Returns, Care, or Payments.
  5. Remove unused categories or add custom categories when the store needs a specific support topic.

Question blocks

Question blocks create the accordion rows inside the FAQ list. Each block has a category, question, rich text answer, and an Open by default option. When customers choose a category, the section hides questions from other categories and opens the first visible item.

Theme editor settings for an FAQ Question block with category, question, answer, and open by default option.
Connect every Question block to the right category so filtering works predictably on the storefront.
  1. Select a Question block inside the FAQ section.
  2. Choose the category where the question should appear.
  3. Write the question in customer language, not internal policy language.
  4. Add a concise rich text answer with links to policy, contact, or product-care pages when useful.
  5. Use Open by default only for the most important answers in a category.
Best practice: Keep the FAQ page task-focused. Group questions by the customer's problem, avoid long legal copy in accordion answers, and route unresolved questions to the Contact page through the support card.

Policy page

The policy page uses the page.policy template and the Policy tabs section. It gives merchants a single, scannable place for returns, shipping, privacy, terms, warranty, and other policy content without hardcoding store-specific text.

Theme editor preview showing the policy page with the Policy tabs section selected.
Open the page selector in the theme editor and choose the policy page. The template contains one main section named Policy tabs with four starter Policy blocks.

Page template

Assign the policy template

Create the page

In Shopify admin, create a page for store policies and assign the policy theme template. The template is section-based, so merchants can keep the page flexible while the Policy tabs section handles the structured policy layout.

Use page content

Add broad introductory copy in the Shopify page content area when the section setting Show page content when intro text is blank is enabled. This keeps longer policy introductions editable from the Pages admin.

Adjust blocks

The default template includes Returns, Shipping, Privacy, and Terms blocks. Merchants can edit, remove, duplicate, or reorder these blocks from the theme editor.

Policy tabs section

Configure the page shell

Select Policy tabs in the Template area to control the page wrapper, hero content, spacing, and support area. These settings affect every policy tab on the page.

Color and width

Enable Use global color scheme when the policy page should inherit the storewide palette. Disable it to choose a dedicated color scheme. Use Content max width to control the maximum layout width on large screens.

Shape and spacing

Corner radius, Top padding, and Bottom padding tune the page rhythm. The defaults create a roomy documentation style that still works on mobile.

Hero content

Set the Eyebrow, Heading, and rich text Text fields for the top introduction. If the section heading is blank, the page title is used as the main heading.

Policy tabs section settings for color scheme, content width, corner radius, padding, and hero text.
The section settings define the overall page shell and the hero copy above the tabs.

Policy blocks

Build each policy tab

Each Policy block becomes one tab and one matching content panel. The section supports up to eight policy blocks, which is enough for common store policies without making the tab bar hard to scan.

Tab identity

Choose an Icon for the tab, then set the Tab title and Tab description. Available icon styles include returns, shipping, privacy, terms, and lock.

Main content

Use Main heading and Main text for the policy overview. Keep the first paragraph short so customers can understand the policy before reading the detailed cards.

Highlight cards

Add two highlight cards for the most important requirements, such as return windows, packaging rules, shipping timelines, data usage, or warranty exclusions.

Policy block settings for icon, tab title, tab description, main heading, main text, and highlight cards.
The first part of a Policy block controls the tab label, overview copy, and two compact highlight cards.

Step timeline

Enable Show steps to display a four-step process. Each step has a heading, text, and icon. Use this area for workflows like request, review, approval, and resolution.

Step icons

Step icon choices are Mail, Review, Check, and Refund. Pick icons that match the customer action, not just the policy category, so the process is easier to scan.

Optional fields

Blank step headings or text are skipped. This lets merchants use fewer than four visible steps when a policy needs a simpler flow.

Policy block step settings with show steps toggle and fields for step headings, text, and icons.
Steps are useful for returns, warranty claims, delivery exceptions, or account requests.

Comparison cards

Enable Show comparison cards to show a positive and negative card. This pattern works well for included versus not included, eligible versus not eligible, or available versus restricted details.

Rich text lists

Use the positive and negative rich text fields for short bullet lists. Keep each bullet specific so customers do not need to contact support for basic eligibility questions.

Clear labels

Use direct headings such as Included, Not included, Eligible, Not eligible, Covered, or Excluded. The comparison card styling handles the visual distinction.

Policy block comparison card settings for headings and rich text content.
Comparison cards help customers understand policy boundaries without reading a long paragraph.

Negative card text

The final rich text field completes the negative comparison card. Use concise bullets for exclusions, restricted cases, or policy limits.

Policy block negative card text setting in the theme editor.
The negative card supports rich text, including links and lists when merchants need legal or support references.

Support card

Add customer support details

The optional support card appears below the policy panels. Use it for direct help channels when customers still need a human answer after reading the policies.

Visibility

Toggle Show support card on when the policy page should include a final contact area. Turn it off for stores that route all service requests through a separate contact page.

Contact methods

Add support email, phone, and hours. Email and phone render as customer-friendly links, while support hours appear as plain text.

Support action

Add a Support button label and Support button link to send customers to a contact page, help center, returns portal, or order lookup page.

Policy tabs support card settings for heading, text, email, phone, hours, and button link.
The support card is optional and only shows populated contact details.

Best practices

Keep the policy page clear

Write for scanning

Put the most important promise or limitation in the tab description, then use the panel for details. Customers should understand the policy shape before opening every card.

Keep policies reusable

Avoid campaign-specific copy in this page. Use it for long-lived operational information such as returns, shipping, privacy, service terms, warranties, repairs, subscriptions, or store pickup.

Check mobile tabs

On small screens, the tab list becomes horizontally scrollable and each active panel stacks into a single column. Review long tab titles and comparison lists on mobile before publishing.