Sub-Pages

We are trying to set-up sub-pages but Shopify is not allowing this.

We are trying to achieve something like the following structure.

races/full-ironman

races/half-ironman

races/sprint

races/olympic

races/other

Creating sub-pages (also known as child pages) in Shopify can help organize your content more effectively. While Shopify doesn’t natively support a visual page hierarchy (like parent > child pages), you can still create sub-pages and link them properly in your navigation to make it appear like a structured layout. Here’s how you can do it:

🔧 Step 1: Create the Main (Parent) and Sub (Child) Pages

  1. Log in to your Shopify admin.
  2. Go to Online Store > Pages.
  3. Click Add page and create your parent page (e.g., “About Us”).
  4. Click Add page again and create your sub-pages (e.g., “Our Team”, “Our Story”).

🔗 Step 2: Organize with Navigation Menus

This is where you mimic the sub-page structure.

  1. Go to Online Store > Navigation.
  2. Choose the menu where you want the structure to appear (usually Main menu).
  3. Click Add menu item:
  4. Click Add menu item again for each sub-page.

🎨 Optional: Adjust Theme or Layout (Advanced)

If you want actual page layout nesting (e.g., about/our-team), you’ll need:

  • custom page template in your theme.
  • Possibly modifying theme code (theme.liquid, page.[template].liquid files).
  • A developer or someone familiar with Shopify’s Liquid language.

📝 Example Menu Structure

  • About Us
    ├── Our Story
    └── Our Team

✅ Tips

  • URLs will still look like /pages/our-story, not /about-us/our-story — Shopify doesn’t support nested URLs for pages.
  • Consider using a custom theme or apps if you need deeper content hierarchy.

Let me know if you want help with theme code or setting up a specific page structure!

Modifying the Cello Shopify theme (or any Shopify theme) to visually support sub-pages involves two main things:

  1. Creating sub-pages and navigation (which we already talked about).
  2. Modifying the theme so the sub-pages feel like they belong to the parent (e.g., custom layouts, sidebar menus, breadcrumbs, etc.).

Here’s how to enable sub-pages visually and structurally in the Cello theme:

🔧 STEP 1: Create the Sub-Pages and Set Up Navigation

Do this via Online Store > Pages and Online Store > Navigation:

  • Parent page: “About”
  • Sub-pages: “Our Story”, “Our Team”
  • Nest the sub-pages under “About” in the Main Menu.

🎨 STEP 2: Modify Theme to Support Sub-Pages (Visually)

Go to Online Store > Themes > Cello > Edit code.

🛠️ Option A: Add a Sidebar or Sub-navigation Menu to a Page Template

  1. Duplicate the default page template:

In the templates folder, find page.liquid or page.json.

If it's a JSON template:

  • Copy page.json to a new file like page.subpage.json.
  1. Edit the new template:

Inside sections, reference a sidebar section or create a new one (if not already in the theme).

For example, in page.subpage.json:

{
"name": "Sub Page",
"sections": {
"main": {
"type": "main-page"
},
"sidebar": {
"type": "custom-submenu"
}
},
"order": ["sidebar", "main"]
}

  1. Create a new section for the sidebar menu:

In the sections folder, create a file called custom-submenu.liquid.

Example code:

<div class="subpage-sidebar">
<h4>More from this section</h4>
<ul>
{% for link in linklists.about.links %}
<li><a href=""></a></li>
{% endfor %}
</ul>
</div>

Replace about with the handle of your custom navigation menu (e.g., a menu called “About”).

  1. Assign this new template to your sub-pages:
  • Go to the Pages section.
  • Edit the sub-page (e.g., “Our Team”).
  • Under Theme template, select page.subpage.

✅ STEP 3: Create a Custom Navigation Menu

Go to Navigation and:

  • Add a new menu called About.
  • Add your sub-pages as items in this menu.

Now your custom-submenu.liquid will pull those links dynamically!

📌 Bonus (Optional):

  • Add breadcrumbs: Helpful for sub-page navigation.
  • Use metaobjects or a CMS-style app for more complex structures.
  • Style the sidebar in custom-submenu.liquid with CSS (inside assets/theme.css or base.css).

If you want, I can help you generate the full Liquid code for the sidebar section or style it to match the Cello theme. Just let me know how deep you want to go!