> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kiwify.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Snippets

> Reusable code fragments shared across sections

# Snippets

<Info>
  Snippets are reusable pieces of Liquid code that help maintain consistency and reduce duplication across your theme.
</Info>

## Overview

* Not visible in the theme editor
* Ideal for code that's repeated throughout your theme
* Can be thought of as "components" or "partials"
* Can be created, deleted, or renamed as needed

## Creating Snippets

Snippets are stored in the `snippets/` directory with a `.liquid` extension. For example:

```liquid theme={null}
<!-- snippets/course-card.liquid -->
<div class="course-card">
  <img src="{{ course.thumbnail }}" alt="{{ course.name }}">
  <h3>{{ course.name }}</h3>
  <div class="progress-bar">
    <div class="progress" style="width: {{ course.user_data.progress }}%"></div>
  </div>
  <p>{{ course.user_data.progress }}% complete</p>
  <a href="/course/{{ course.id }}" class="button">{{ button_text | default: 'Continue Learning' }}</a>
</div>
```

## Using Snippets

To include a snippet in a section or another snippet, use the `render` tag:

```liquid theme={null}
{% for course_id in all_courses %}
  {% assign course = all_courses[course_id] %}
  {% render 'course-card', course: course, button_text: 'View Course' %}
{% endfor %}
```

## Passing Variables to Snippets

You can pass variables to snippets when rendering them:

```liquid theme={null}
{% render 'course-card', 
  course: course,
  button_text: 'Start Learning',
  show_progress: false
%}
```

Inside the snippet, these variables are available as local variables:

```liquid theme={null}
<div class="course-card">
  <h3>{{ course.name }}</h3>
  
  {% if show_progress %}
    <div class="progress-bar">
      <div class="progress" style="width: {{ course.user_data.progress }}%"></div>
    </div>
  {% endif %}
  
  <a href="/course/{{ course.id }}" class="button">{{ button_text }}</a>
</div>
```

## Default Values

You can provide default values for snippet variables using the `default` filter:

```liquid theme={null}
<a href="/course/{{ course.id }}" class="button {{ button_class | default: 'primary-button' }}">
  {{ button_text | default: 'View Course' }}
</a>
```

## Common Snippet Use Cases

<CardGroup cols={2}>
  <Card title="UI Components">
    * Buttons
    * Cards
    * Navigation elements
    * Progress bars
  </Card>

  <Card title="Content Patterns">
    * Course listings
    * Module layouts
    * Lesson previews
    * User information displays
  </Card>
</CardGroup>

## Example: Image Snippet

A snippet for consistently rendering images with optional lazy loading:

```liquid theme={null}
<!-- snippets/image.liquid -->
<img
  src="{{ src }}"
  alt="{{ alt | escape }}"
  {% if class %}class="{{ class }}"{% endif %}
  {% if width %}width="{{ width }}"{% endif %}
  {% if height %}height="{{ height }}"{% endif %}
  {% if lazy_load %}loading="lazy"{% endif %}
/>
```

Usage:

```liquid theme={null}
{% render 'image', 
  src: product.image, 
  alt: product.title,
  class: 'rounded shadow',
  width: 300,
  height: 200,
  lazy_load: true 
%}
```

## Best Practices

<Tip>
  * Create snippets for components used in multiple places
  * Pass variables to snippets for flexibility
  * Use consistent naming conventions
  * Keep snippets focused on a single responsibility
  * Document the expected variables for each snippet
  * Use default values for optional parameters
</Tip>