# Layouts
Layouts are a fundamental aspect of CocoShop, as they provide the structure and design for the entire storefront. They serve as a reusable template for different pages and sections of the store, ensuring a consistent look and feel across the site.
In this document, we will explore the various aspects of layouts in a CocoShop, including their purpose, how to create them, and how to manage and customize them.
### Purpose of Layouts
Layouts in CocoShop serve several purposes:
1. **Consistency**: Layouts ensure a consistent look and feel throughout the store, providing a unified user experience.
2. **Efficiency**: By reusing the same layout for multiple pages, developers can avoid duplicating code and streamline the development process.
3. **Customization**: Layouts allow store owners to easily customize the appearance of their store without changing the underlying code.
### Creating a Layout
In CocoShop, layouts are typically created using Liquid, a powerful templating language. A layout is essentially an HTML file containing Liquid tags, which define the structure and appearance of the store.
To create a new layout, follow these steps:
1. In your theme's directory, create a new folder named `layouts` if it doesn't already exist.
2. Inside the `layouts` folder, create a new file with a `.liquid` extension, such as `main-layout.liquid`.
3. Open the newly created file and start building your layout using HTML and Liquid tags. Be sure to include the `{% content_for_layout %}` tag in your layout, as this will serve as a placeholder for the content of individual pages.
Here's a simple example of a layout file:
```
{% render 'header' %}
{% content_for_layout %}
{% render 'footer' %}
```
In this example, the layout includes a header, main content area, and footer.
### Conclusion
Layouts play a crucial role in CocoShop, providing a consistent and customizable structure for the store. By understanding the purpose of layouts and how to create and manage them, developers can build powerful and flexible online stores that cater to the unique needs of their clients.
---
# 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/layouts.md?ask=
```
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.