> For the complete documentation index, see [llms.txt](https://cryptococo.gitbook.io/cocoshop-theme-development/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cryptococo.gitbook.io/cocoshop-theme-development/liquid/tags/theme.md).

# Theme

## section

Renders a [section](/cocoshop-theme-development/architecture/section.md)

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>
```
