In This Article
The theme editor organizes all the elements of your online store in one place so you can easily design every page with theme templates, sections, styles, and settings.
We'll cover everything you need to know to start using the theme editor to set up your online store and make the most of what Context has to offer.
There's lots to learn about the theme editor but don't worry! Our Context manual will guide you through the theme editor in the step-by-step instructions for each feature.
Use templates to design pages
Templates control the content, layout, and style of all pages and are customized in the theme editor. There are templates for every type of page, including the home page, product page, collection page, blog posts, and more.
At first, there is one Default template for every type of page. All product pages, for example, are initially assigned the same default product template. This means that changes made to a default template will apply to all pages that use that template.
To change the content or style of specific pages, you will need to create a new template and then assign that template to those pages in the Shopify Admin.
Alternatively, you can use Dynamic sources to automatically display the correct content or settings for pages that use the same template.
Here are the basic steps for using templates:
Open templates
Use the Templates selector in the theme editor to find the templates available for each page type. By default, the theme editor opens the Home page template.
See the Templates article for a full overview of all available templates.
Preview specific pages
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.
To preview a different page with that template, click Change in the "PREVIEW" section at the top of the sidebar.
Assign templates to pages
If a warning symbol (!) appears next to the page name, this means that the template you are editing is not applied to that page. Go to the page in the Shopify admin and use the Theme template menu to assign a template.
Templates cannot be assigned on unpublished or trial themes. All changes to your templates will be saved but can only be assigned when purchased and published.
Customize sections and blocks
Theme sections are an easy way to design your store's pages without using any code. Sections are the basic components of your pages. You can add, edit, and rearrange sections to create different layouts with the content and features you want.
Sections are listed in the theme editor sidebar in the order they appear on the page. Follow the guide below to learn how to use and edit sections and blocks.
When you add or edit sections, they will appear on all pages that use that template. To edit specific pages, you can create and assign new templates.
Here are the basic steps for using sections:
Add sections
Click the (+) Add section button in the theme editor sidebar to select one of Context's theme sections. Use the search bar or click Show more to see the full list of sections.
Use the Remove section button to delete them or click the eye icon to hide them.
Add blocks
Most sections are made up of individual Blocks for text, media, buttons, or other content, which are nested under your sections in the editor panel.
Use the (+) Add block button to add or select the type of block you wish to add. Use the Remove block button to delete them or click the eye icon to hide them.
Edit sections and blocks
When you add or edit sections, they will appear on all pages that use that template. To edit specific pages, you can create and assign new templates.
Click directly on a Section or Block to open the settings in the side panel. For step-by-step instructions, see the individual section articles.
Reorder sections and blocks
Click and hold the ⋮⋮ drag icon to change the order of your sections and blocks:
Available theme sections
For all templates (except Checkout), Context includes 15+ sections with different content blocks, layouts, and features.
See our Theme sections article for a full listing and overview of all Context sections.
Create and assign multiple templates
At first, there is one Default template for every type of page. This means that changes made to a default template will apply to all pages that use that template.
To change the content or style of specific pages, you will need to create a new template and then assign that template to those pages in the Shopify Admin.
Alternatively, you can use Dynamic sources to automatically display the correct content or settings for pages that use the same template.
Steps
In your theme editor (Customize):
Use the Templates selector to open the Products, Collections, Pages, Blogs, or Blog posts templates.
Click Create template.
Create template button for collections Enter a Name for your new template and click Create template.
The new template will duplicate the settings of the original template.
Create template settings Under Preview, click Change to preview different pages with this template.
If a warning icon (!) appears, you need to assign the template in your Shopify admin.
Select a page to preview for the template To assign a template, go to the page in the Shopify admin and use the Theme template menu to select a specific template.
Templates cannot be assigned on unpublished or trial themes. All changes to your templates will be saved but can only be assigned when purchased and published.
Click Save.
Use dynamic content
The Dynamic sources feature automatically displays the correct content or settings for pages that use the same template. Dynamic sources are great for accordions and size guides on product pages, and many other sections.
See our article on Dynamic sources for a full overview and tutorials.
This feature is available for settings or fields that have a dynamic source button:
Customize theme settings
Use the Theme settings to make changes to your online store's general styles and feature options that apply to your entire site.
Click the Theme Settings icon in the top-left corner of your theme editor. Open the settings for colors and fonts to change the general appearance of your text and images across your site. You can also adjust the appearance and options for other sitewide elements like products, search, social media links, and the cart.
See our Theme settings article to learn about global settings and how to use them.