Custom pages

A custom page is a Liquid file in custom_pages/ that draws a whole page: a size guide, a Ramadan landing page, a store locator. It’s a Sooquna addition to the Shopify theme structure. The tutorial builds one step by step.

custom_pages/size-guide.liquid

<div class="page-width">
  <h1>{{ custom_page.title }}</h1>
  {{ custom_page.settings.intro }}
  <table>…</table>
</div>

{% schema %}
{
  "name": "Size guide",
  "layout": "theme",
  "seo": { "title": "Size guide", "description": "How to find your size." },
  "settings": [{ "type": "richtext", "id": "intro", "label": "Introduction", "default": "<p>Measurements in centimetres.</p>" }]
}
{% endschema %}

Naming and URL

The file name is the URL: custom_pages/size-guide.liquid is at /custom/size-guide (and /ar/custom/size-guide in Arabic). Names use lowercase letters, digits and -. Custom pages are listed in the sitemap.

Schema

Key	Meaning
name	The name in admin pickers, and the page title if seo.title isn’t set.
layout	"theme" (default) to draw inside layout/theme.liquid; "none" for a page without the layout.
seo	title and description of /custom/<name>.
settings	Settings read as custom_page.settings. They take their defaults; to let merchants change text, attach the page to a store page and use page.content.

In the page

Variable	Value
custom_page	name, title, url and settings.
page	The store page, when one uses this file (below). Not set at /custom/<name>.

Everything else works as in a template: global objects, {% render %}, {% section 'name' %} to place a section, {% stylesheet %}.

Attaching to a store page

In Storefront › Pages, a page’s Theme template can be Custom page: . Then /pages/<handle> draws the custom page, with page set and custom_page.title taken from the page. The merchant gets a translatable title and handle, SEO fields and visibility dates; you keep the layout in code.

Links

The admin link pickers (menus, buttons, the url setting) offer Custom pages next to products and collections. Links are stored by name and resolve to the right URL at render time, with the language prefix. A custom_page setting lets a section pick one.

Renaming and deleting

Before you rename or delete a custom page, the code editor lists the store pages that use it. Links to a deleted custom page render #, and pages that used it fall back to their normal template.