# Theme

## section

Renders a [section](https://cryptococo.gitbook.io/cocoshop-theme-development/architecture/section)

Sections are self-contained, reusable components that can be included in different parts of a theme.

To create a section, define the HTML, CSS, JavaScript, and Liquid code in a new `.liquid` file within the `sections` folder.

To include a section in your template, use the `{% section %}` tag followed by the section file name without the `.liquid` extension.

Example: Including the `featured-products` section in your template

```liquid
{% section 'featured-products' %}
```

## render

Renders a snippet or app block.

Direct access to variables created outside of the snippet or app block is not permitted, but global objects and objects directly accessible outside the snippet or app block are accessible.

Example: Rendering a `button` template with a `btn_name` variable

```liquid
{% render 'button', btn_name: "Click" %}
```

Inside the snippet or app block, access passed variables using variable name.

Example: Accessing the `btn_name` variable in the `button` template

```liquid
<button class="button">
    {{ btn_name }}
</button>
```

Variables created inside the snippet or app block cannot be accessed outside of it.

{% hint style="info" %}
When you render a snippet using the `render` tag, you cannot use the `include` tag inside the snippet.
{% endhint %}

### Render Tag Parameters

#### **for**

You can render a snippet for every item in an array using the `for` parameter. You can also supply an optional `as` parameter to be able to reference the current item in the iteration inside the snippet. Additionally, you can access a `forloop` object for the loop inside the snippet.

Example:

```php
{% render 'filename' for array as item %}
```

#### **Passing Variables to a Snippet**

Variables that have been created outside of a snippet can be passed to a snippet as parameters on the `render` tag.

Example:

```liquid
{% render 'filename', variable: value %}
```

{% hint style="info" %}
Any changes that are made to a passed variable apply only within the snippet.
{% endhint %}

#### **with**

You can pass a single object to a snippet using the `with` parameter. You can also supply an optional `as` parameter to specify a custom name to reference the object inside the snippet.

Example:

```liquid
{% render 'filename' with object as name %}
```

## Include

Includes the content of another template file within the current template. Direct access to variables created outside of the included template is permitted.

Example: Including a `header` template in your main template

```liquid
{% include 'header' %}
```

Unlike the `{% render %}` tag, the `{% include %}` tag does not support passing variables.

## layout

Layout tags are essential in template languages for defining the structure and organizing the content of your web application. They help you create a consistent layout across different pages and templates by wrapping your content with a predefined layout file.

Example:

```liquid
{% layout 'main-layout' %}
<div class="homepage-content">
  <h1>Welcome to Our Website</h1>
  <p>Discover our latest products and services.</p>
</div>
```


---

# 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/liquid/tags/theme.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.