How to Create a New Page in Shopify
All educational content pages on the FLAIR store—such as the Equine Asthma page and the Recovery After Exercise page—use a shared HTML/CSS layout system called the Respiratory Story template.
Rather than building pages from scratch each time, new pages are created by copying the base template, replacing the content, and dropping the raw HTML into Shopify's page editor.
This guide walks through that process from start to finish. Follow each step in order. If something looks off after publishing, the troubleshooting section at the bottom covers the most common issues.
Online Store → Pages
Where all content pages live in the Shopify admin
</> Source
The HTML toggle in the page editor — always use this for template pages
page.content
The Liquid object that renders your HTML on the storefront
Step 1 – Navigate to Pages
Open the Shopify Admin
Log in at your-store.myshopify.com/admin and confirm you are on the correct store environment (production vs. development).
Go to Online Store → Pages
In the left sidebar, expand Online Store and click Pages. You will see a list of all existing content pages.
Click "Add page"
The Add page button is in the top-right corner. This opens a blank page editor.
Step 2 – Title the Page and Switch to HTML
Enter the page title
Type the page title in the Title field at the top (e.g., Equine Asthma and Airway Health). Shopify will auto-generate the URL handle from this title — you can edit the handle below if needed.
Open the HTML source editor
In the content area, click the </> icon (source code toggle) in the rich-text toolbar. The editor will switch to raw HTML mode.
<style> tags and corrupt the markup. Always switch to source code view first.
Template Section Reference
Every page is built from the same set of reusable section blocks. Use these as your building kit — combine them in any order.
.story-header
Page header. Contains a teal uppercase label (<span>) and the main <h1> title. Always comes first.
.story-row / .story-row.reverse
Side-by-side layout: a .story-text column (flex 1.2) beside a .story-media image block. Add reverse class to flip the order.
.stats-strip
Three-column grid of teal .stat-box tiles. Use for key statistics or quick-reference facts. Each tile has an <h3> (large number or short phrase) and a <p> label.
.story-section
Full-width text section — no image. Use for longer explanatory content, numbered phases, or lists that don't need a visual companion.
.callout-box + .process-grid
Dark (#111) panel with a teal headline and a 2-column grid of .process-item cards. Use for mechanism explanations or grouped concepts. The last odd item auto-centers.
.story-footer
Closing section on a light (#f9f9f9) background. Contains a summary heading, 1–2 short paragraphs, and the teal .cta-link button. Always the last element.
Step 3 – Paste the Template HTML
Copy the full HTML for the page you are creating (see the template file in the shared drive) and paste it directly into the source code editor. The template includes both the <style> block and the <div class="respiratory-story"> wrapper.
<style> and end with </div>. Do not wrap it in additional <html>, <head>, or <body> tags — Shopify provides those.
The pasted code will look like this at a high level:
/* .respiratory-story base styles */
/* .story-header, .story-row, .story-section … */
</style>
<div class="respiratory-story">
<!-- header -->
<header class="story-header">…</header>
<!-- content sections -->
<section class="story-row">…</section>
<div class="callout-box">…</div>
<!-- footer -->
<footer class="story-footer">…</footer>
</div>
Replacing Images
All images reference Shopify CDN URLs (cdn.shopify.com/s/files/…). To use a new image:
- Upload the image via Content → Files in the Shopify admin
- Copy the CDN URL from the file detail view
- Replace the
src="…"value in the template - Update the
alt="…"attribute to describe the new image
?v= cache-busting parameter. Always copy the full URL including this parameter from the Files section — do not manually construct it.
Step 4 – Configure SEO and Page Template
Set the page template
In the right-hand sidebar under Online store, set the Theme template to page (the default). Do not select a custom template unless one has been specifically created for this page type.
Edit the SEO fields
Scroll to the Search engine listing preview section. Set a descriptive Page title (under 60 characters) and a Meta description (under 155 characters). The URL handle should match the page title in slug format.
Set page visibility
Under Visibility, choose Visible to publish immediately or set a future publish date. Pages default to Hidden — confirm this before saving if you are not ready to go live.
Step 5 – Save and Preview
Save the page
Click Save in the top-right corner. Shopify will save the page and return you to the page detail view. A green banner confirms the save was successful.
Preview in the storefront
Click the eye icon next to the page title (or open the page URL directly) to preview how the page renders. Check both desktop and mobile — the template is responsive at 850px.
Verify the layout
Confirm that images load, the teal color (#00AEC7) renders correctly, and the .callout-box dark background appears. If the page renders as plain text, the <style> tag was likely stripped — see Troubleshooting below.
Troubleshooting Common Issues
Page renders as plain unstyled text
The <style> block was stripped by Shopify's rich-text editor. This happens when you paste HTML while in WYSIWYG mode instead of source code mode. To fix: re-open the source editor (</>), delete all content, and re-paste the full template HTML.
Images are broken or not loading
Verify the CDN URL is correct and the file exists under Content → Files. Check that the full URL including the ?v= parameter was copied. Also confirm the image was not deleted or moved in the Files section after the URL was recorded.
Layout is correct on desktop but broken on mobile
The responsive breakpoint is set at 850px. Check that the @media (max-width: 850px) block is present at the bottom of the <style> section and was not accidentally deleted during editing.
The dark callout box (.callout-box) is not centering its last item
The centering rule .process-item:last-child:nth-child(odd) only fires when the last item in the grid is alone on its row (odd total item count). If you have an even number of items, all items will fill the grid normally — no action needed.
The page URL handle contains special characters or is too long
Shopify auto-generates the URL handle from the title. If the title is long, manually shorten the handle in the URL and handle field on the page editor. Keep handles lowercase, hyphen-separated, and under 50 characters.
The CTA link button goes to the wrong collection
The .cta-link href defaults to /collections. Update this to the specific collection or product handle relevant to the page content (e.g., /collections/flair-strips).
