# Using templates

Your online store consists of different types of **pages**, including: the *home page*, *product pages*, *collection pages*, *blogs*, and other *pages*.

Pages are designed using **templates**. In the theme editor, you change the look and layout of your pages by editing their assigned templates.

* There are **default templates** for each type of page. *Editing a default template will apply the same layout to all pages that use that template*.&#x20;
* To **use different layouts for specific pages**, create new templates, then assign those templates to your pages in the Shopify admin.

## Design pages with templates

***

Open your theme editor to find default templates for every type of page.

* Add page content in Shopify admin
* Customize layout with sections and blocks
* Customize general page styles

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Edit templates to design pages</strong></mark></td><td>Use sections to create the layout of your page.</td><td><a href="../../sections/overview/section-styles">section-styles</a></td></tr><tr><td><mark style="color:blue;"><strong>Use different templates for pages</strong></mark></td><td>Create new templates for specific collections, products, or pages.</td><td><a href="create-and-assign-templates">create-and-assign-templates</a></td></tr><tr><td><mark style="color:blue;"><strong>Assign templates to pages</strong></mark></td><td>To make your changes live, assign the template to your pages in the Shopify admin.</td><td><a href="create-and-assign-templates">create-and-assign-templates</a></td></tr></tbody></table>

## Customize page styles

***

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Color scheme</strong></td><td><a href="../../../sections/overview/section-styles#color-scheme">#color-scheme</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F3XSH2rw2Xl7gRoMb34up%2Fsection-colors.jpg?alt=media&#x26;token=ccb376a8-d35b-4822-9bb0-5de9a0eb5ae6">section-colors.jpg</a></td></tr><tr><td><strong>Content width</strong></td><td><a href="../../../sections/overview/section-styles#section-width">#section-width</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FDCCYMn4K3pSbVR42zVAF%2Fsection-width.jpg?alt=media&#x26;token=68dd352f-bb69-4220-87a0-6a1c733d909c">section-width.jpg</a></td></tr><tr><td><strong>Content padding</strong></td><td><a href="../../../sections/overview/section-styles#section-padding">#section-padding</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FoZCVax7FX1rLehRaYU5Y%2Fsection-padding.jpg?alt=media&#x26;token=3dbb23bd-4ab6-4874-8834-941a671e5cec">section-padding.jpg</a></td></tr><tr><td><strong>Animation</strong></td><td></td><td></td></tr></tbody></table>

## Preview changes

***

When you open a template, the theme editor selects a page (e.g. one product or collection) to preview the changes made to that template.

* Click **Change** in the "PREVIEW" section to view a different page with that template.
* To view a full preview of the live site, click more **`…`** > **Preview**. The preview will open in a new window, and you can click **Share preview** to copy the preview link to share with others.

### Create unique page layouts

***

At first, every type of page uses a **default template**. For example, if you edit the **Default blog post template**, any changes you make will apply all blog post pages.

* To design different layouts for pages, **create and assign a new template** for those pages.
* To show unique page content in the same template, use **dynamic content** in sections.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Create and assign new templates</strong></td><td><a href="create-and-assign-templates">create-and-assign-templates</a></td></tr><tr><td><strong>Add dynamic page content</strong></td><td><a href="../../general/editing-themes/dynamic-content-with-metafields">dynamic-content-with-metafields</a></td></tr></tbody></table>
