Key takeaways
- Custom templates let you give specific pages, products, or collections a completely different layout.
- Create them in the code editor: templates folder → new file (e.g.,
page.custom.jsonorproduct.feature.json).- JSON templates define which sections appear on the page — no HTML required.
- Assign a template to a page, product, or collection via the “Theme template” dropdown in the editor.
One template layout doesn’t fit every page. Your About page needs a different layout than your Contact page. A featured product deserves a different layout than your standard product template. Shopify’s custom template system makes this possible without creating separate themes.
How do I create a custom template in Shopify?
Custom templates live in the templates/ folder of your theme. Each template is a JSON file that defines which sections appear on that page type.
Naming convention:
page.custom.json— a custom page template (accessible as “page.custom” in the template selector)product.feature.json— a custom product templatecollection.seasonal.json— a custom collection templatearticle.long-form.json— a custom blog post template
The part before the dot is the page type. The part after is your custom name. You can name the custom part anything (no spaces, lowercase, hyphens only).
Step by step — creating a custom page template
Step 1 - Duplicate your theme. Online Store → Themes → three-dot menu → Duplicate.
Step 2 - Open the code editor on the duplicate theme. Online Store → Themes → Actions → Edit code.
Step 3 - Navigate to the templates/ folder.
Step 4 - Click “Add a new template” (the + button next to the folder, or look for an “Add template” option).
Step 5 - Select the template type (page, product, collection, etc.) and give it a name (e.g., “landing”).
Step 6 - Shopify creates a new JSON file: page.landing.json.
Step 7 - The default content looks something like this:
{
"sections": {
"main": {
"type": "main-page",
"disabled": false,
"settings": {}
}
},
"order": ["main"]
}
This template currently uses the same main content section as the standard page template. You can add additional sections here.
Adding sections to your custom template
To add a hero image section to your landing page template:
{
"sections": {
"hero": {
"type": "image-banner",
"settings": {
"image_height": "large",
"show_text_below": false
}
},
"main": {
"type": "main-page",
"settings": {}
},
"testimonials": {
"type": "testimonials",
"settings": {
"title": "What our customers say"
}
}
},
"order": ["hero", "main", "testimonials"]
}
Important: The "type" value must match an actual section filename in your sections/ folder (without the .liquid extension). Use exact names.
The "order" array controls the sequence sections appear on the page.
How do I assign a template to a page?
For pages:
- Go to Online Store → Pages → select the page
- Look at the right sidebar — find “Theme template”
- Select your new template from the dropdown (e.g., “page.landing”)
- Save
For products:
- Products → select the product
- Right sidebar → “Theme template”
- Select your template (e.g., “product.feature”)
- Save
For collections:
- Products → Collections → select the collection
- Right sidebar → “Theme template”
- Select your template
The template dropdown only shows templates that match the current content type — page templates for pages, product templates for products, etc.
Editing template content in the Theme Editor
Once a custom template is assigned to a page, you can customize it in the Theme Editor:
- Online Store → Themes → Customize
- Use the page selector at the top to navigate to the page using your custom template
- The sections defined in your JSON template appear in the left sidebar
- Edit section settings, add new sections (within the template’s scope), and reorder as needed
Changes made in the Theme Editor update the JSON template file automatically.
How do I upload a template?
You can’t upload a pre-built template file directly via the Shopify admin UI. Instead:
- Create templates by adding new JSON files in the code editor (as described above)
- Copy templates from another theme by copying the JSON content from one theme’s code editor and pasting it into a new file in your theme’s code editor
- Import via Shopify CLI (for developers) — allows pushing theme files including templates from a local machine
For merchants, creating templates through the code editor is the standard approach.
Common custom template use cases
Landing page template. No header navigation, no footer, full-width hero, single CTA. Assign to campaign pages from ads.
Feature product template. More immersive product page with a dedicated video section, expanded ingredient/material details, and a comparison table. Assign to hero products.
Brand story page. Large typography, full-width images, team section. Assign to About page.
Wholesale page. Different product pricing display, a form section, B2B-specific content. Assign to hidden wholesale pages.