# Overview

CocoShop's theme architecture is designed to be flexible, modular, and scalable, allowing you to create beautiful and functional themes for your online store. In this overview, we'll introduce you to the main components of the theme architecture and provide a high-level understanding of how they interact with each other.

## Theme Components

CocoShop themes are built using a combination of several key components:

1. **Templates:** These are the primary building blocks of your theme. Templates define the structure and layout of your store's pages, such as the home page, product page, and collection page. They are written using Liquid, a powerful templating language that allows you to incorporate dynamic content and logic in your templates.
2. **Sections:** Sections are reusable, customizable pieces of content that can be added to templates. They allow you to build modular designs that can be easily updated and maintained. Examples of sections include headers, footers, sliders, and featured products.
3. **Snippets:** Snippets are smaller, reusable pieces of code that can be included in templates and sections. They are useful for simplifying your code and making it more maintainable. Common snippets might include social media icons, newsletter signup forms, or product ratings.
4. **Assets:** Assets include all the static files that make up the visual appearance and functionality of your theme, such as images, stylesheets, and JavaScript files. These files are organized in a structured folder hierarchy within the theme.
5. **Configuration files:** Configuration files store settings and metadata for your theme. They include information like the theme name, author, and version, as well as settings for customization options and default values.

## Directory Structure

A typical CocoShop theme directory structure looks like this:

<pre class="language-css"><code class="lang-css">theme/
<strong>├── assets/
</strong>│   ├── css/
│   ├── images/
│   └── js/
├── config/
│   ├── settings_schema.json
│   └── settings_data.json
├── layout/
│   └── theme.liquid
├── sections/
│   ├── header.liquid
│   ├── footer.liquid
│   └── ...
├── snippets/
│   ├── social-icons.liquid
│   ├── newsletter-form.liquid
│   └── ...
└── templates/
    ├── index.liquid
    ├── product.liquid
    ├── collection.liquid
    ├── cart.liquid
    └── ...
</code></pre>

Subdirectories not listed here are not supported.<br>

By understanding the architecture of CocoShop themes, you'll be better equipped to create and customize your own theme designs. In the following sections, we'll dive deeper into each of these components and provide examples and best practices for working with them.<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cryptococo.gitbook.io/cocoshop-theme-development/architecture/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.