> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Page Composition and Styling

Plan: Stencil Developer

Lesson 8 of 31 · 15 min

Page composition, also known as page layout, refers to the process of arranging text and graphics on a page to effectively convey the message to the customers. A good composition is not only pleasing to the eye but also enhances the user's shopping experience.

## Referencing a CSS Stylesheet

To apply CSS styling to a page in your theme, make sure that page's code includes a reference to the stylesheet you want to use. This example does so using the ***\{\{partial}}*** and ***\{\{cdn}}*** custom Handlebars helpers:

| **Helper** | **Category** | **Description**                              |
| ---------- | ------------ | -------------------------------------------- |
| partial    | template     | Overrides content defined by a block helper. |
| cdn        | assets       | Url transform for content delivery networks. |

**EXAMPLE:**

```text showLineNumbers={false}
{{#partial "head"}}
    {{{stylesheet '/assets/css/invoice.css'}}}
{{/partial}}
```

## Template composition

Template composition is a valuable Stencil feature. By defining blocks of overrideable content, your themes can insert templates on a per-page basis, while sharing code that is common to the whole theme.

### Defining content blocks

A base template defines content blocks by name. The following snippet uses *\{\{block}}* custom Handlebars helpers to define three content blocks, respectively named:

1. head
2. hero
3. page

**EXAMPLE:**

*templates/layout/base.html*

```jsx showLineNumbers={false}
<!DOCTYPE html>
<html>
    <head>
        <title>{{ head.title }}</title>
        {{#block "head"}} {{/block}}
    </head>
    <body>
        <div class="body">
		    {{#block "hero"}} {{/block}}
		    <div class="container">
		        {{#block "page"}} {{/block}}
		    </div>
		    {{> components/common/modal}}
        </div>
    </body>
</html>
```

## Replacing content block

Pages can use a base template, replacing the defined blocks with their own content. The example below replaces content for the head and page blocks.

**EXAMPLE:**

*/templates/pages/account/orders/invoice.html*

```text showLineNumbers={false}
{{#partial "head"}}
    <link href="{{cdn '/assets/css/invoice.css'}}" rel="stylesheet">
{{/partial}}

{{#partial "page"}}
    <p>An invoice for a particular order would go here</p>
{{/partial}}
{{> layout/empty}}
```

## Matching partials with blocks

For any given name defined within the template rendering path, we recommend that you maintain a 1:1 mapping of partials to blocks.