Snippets

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

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:

<!-- 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:

{% 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:

{% render 'course-card', 
  course: course,
  button_text: 'Start Learning',
  show_progress: false
%}

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

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

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

Common Snippet Use Cases

UI Components

Buttons
Cards
Navigation elements
Progress bars

Content Patterns

Course listings
Module layouts
Lesson previews
User information displays

Example: Image Snippet

A snippet for consistently rendering images with optional lazy loading:

<!-- 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:

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

Best Practices

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

​Snippets

​Overview

​Creating Snippets

​Using Snippets

​Passing Variables to Snippets

​Default Values

​Common Snippet Use Cases

UI Components

Content Patterns

​Example: Image Snippet

​Best Practices

Snippets

Overview

Creating Snippets

Using Snippets

Passing Variables to Snippets

Default Values

Common Snippet Use Cases

Example: Image Snippet

Best Practices