Templates

Templates are the backbone of your theme's structure, providing the necessary layout and logic for each page type. They determine the overall structure and appearance of different pages in your online store. In a CocoShop theme, templates are Liquid files that are located in the templates directory.

Page Templates

CocoShop provides a set of default page templates for various types of pages, such as product pages, collection pages, and blog pages. Each template corresponds to a specific type of content in your store, allowing you to maintain a consistent design throughout your site.

To create a custom template for a specific page type, you can create a new Liquid file in the templates directory. The file should have a name that reflects the purpose of the template (e.g., product.liquid for a product page).

Here's a list of some common page templates in CocoShop:

Type

The home page of your online store

The product detail page

The collection page, displaying a list of products within a specific collection

Collection List page that displays a list of collections in the store

Template Components

Templates can include various components such as sections, and snippets. These components help you build a flexible and modular architecture for your theme.

  • Sections: Sections are reusable, customizable parts of a template that can be managed through the theme editor. You can include a section in your template using the section tag, e.g., {% section 'header' %}. See Section page for details.

  • Snippets: Snippets are reusable pieces of code that can be included in templates or other snippets using the render tag, e.g., {% render 'snippet-name' %}. Snippets can be found in the snippets directory and are useful for organizing and reusing common elements across multiple templates.

When developing your theme, it's important to consider the organization and structure of your templates and components. This will help ensure that your theme is easy to maintain and customize in the future.

Last updated