For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dev Portal
DocsAPI ReferenceLearnCommunityChangelog
DocsAPI ReferenceLearnCommunityChangelog
    • Overview
  • Learning Plans
    • Developer Foundations
    • Composable Developer
    • Stencil Developer
    • B2B Developer
  • Courses
        • Stencil Theme File Structure
        • Lab - Edit config.json File
        • Lab - Customize Components
        • Lab - Customize Layout and Pages
        • Lab - Customize Assets
        • Lab - Add a Custom Font Bundled with the Theme
        • Lab - Language File
        • Lab - Theme Editor Text Fields
        • Lab - Debugging Your Stencil Theme
      • Conclusion
    • Learning Changelog
Dev Portal
LogoLogo
On this page
  • Step 1: Create New Layout and Apply it to a Page
  • Step 2: Make Changes in a Page File’s Front Matter and Identify the Results
CoursesStencil CoreModule 2: Customize the Stencil Theme

Lab - Customize Layout and Pages

Was this page helpful?
Previous

Lab - Customize Components

Next

Lab - Customize Assets

Built with

Plan: Stencil Developer

 Lesson 7 of 16 · 30 min

In this lab, you will:

  • Create a new layout and apply it to a page
  • Make changes in a page file’s front matter and identify the results

You can apply custom layout files from templates/layouts to any page including the account portal, search results, and checkout. As long as there’s a file in templates/pages, you can give it a custom layout file from templates/layouts.

Prerequisites

  • Previous labs have been completed

Step 1: Create New Layout and Apply it to a Page

  1. Navigate to /templates/layout
  2. Open base.html
  3. Copy the contents of base.html
  4. Create a new file /templates/layout/new-layout.html
  5. Paste the previously copied code into the new file
  6. Remove the footer component in the newly created layout file

Remove footer component

  1. Open/templates/pages/product.html
  2. Change the layout file that’s called at the bottom from ‘base’ to ‘new-layout’

Change layout reference

  1. View product page
  2. Observe footer no longer appears

Step 2: Make Changes in a Page File’s Front Matter and Identify the Results

  1. Identify the default values in config.json for the homepage new products count key:

Homepage new products count in config.json

  1. Open your templates/pages/home.html file in your editor
  2. Note the reference to the homepage new products count key in the file’s front matter, between the two --- delimiters

Front matter reference

  1. Load your storefront’s homepage (by default, http://localhost:3000) and you should see a “New Products” section that displays 5 products
  2. Change the limit: {{theme settings homepage new products count}} statement to a hard-coded limit: 2

Hard-coded limit change

  1. Reload your storefront’s homepage in your browser, you should see the number of displayed “New Products” change from its default number (as specified in config.json) to two

New Products limited to two