Skip to content
Basker Docs
Themes APIs

Snippets

Snippets are small, reusable Liquid partials designed for utility functions, icons, and micro-templates. They’re simpler than components and typically handle a single, focused task.

Location

Section titled “Location”

Snippets are stored in the snippets/ directory:

theme/
└── snippets/
    ├── icon.liquid
    ├── svgsprite.liquid
    ├── filesize.liquid
    └── ...

Using Snippets

Section titled “Using Snippets”

Use the render tag to include a snippet:

{% render 'snippets/icon' name: 'chevron' %}

Syntax

Section titled “Syntax”
{% render 'snippets/[name]' %}
{% render 'snippets/[name]' variable: value %}

Snippet Examples

Section titled “Snippet Examples”

Icon Snippet

Section titled “Icon Snippet”

A common pattern for rendering SVG icons from a sprite sheet:

{# snippets/icon.liquid #}
<svg class="o-icon o-icon--{{ name }}" aria-hidden="true">
  <use xlink:href="#{{ name }}"></use>
</svg>

Usage:

<button class="btn">
  {% render 'snippets/icon' name: 'arrow-right' %}
  <span>Next</span>
</button>


<a href="#" class="social-link">
  {% render 'snippets/icon' name: 'facebook' %}
</a>

SVG Sprite Snippet

Section titled “SVG Sprite Snippet”

Include an SVG sprite sheet for icon definitions:

{# snippets/svgsprite.liquid #}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="chevron" viewBox="0 0 24 24">
    <path d="M9 18l6-6-6-6"/>
  </symbol>
  <symbol id="arrow-right" viewBox="0 0 24 24">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </symbol>
  <symbol id="close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
  {# Add more icons as needed #}
</svg>

Usage in layout:

{# layouts/default.liquid #}
<body>
  {% render 'snippets/svgsprite' %}


  {{ content_for_layout }}
</body>

File Size Formatter

Section titled “File Size Formatter”

Format bytes into human-readable sizes:

{# snippets/filesize.liquid #}
{% assign bytes = size | times: 1 %}
{% if bytes < 1024 %}
  {{ bytes }} B
{% elsif bytes < 1048576 %}
  {% assign kb = bytes | divided_by: 1024.0 | round: 1 %}
  {{ kb }} KB
{% elsif bytes < 1073741824 %}
  {% assign mb = bytes | divided_by: 1048576.0 | round: 1 %}
  {{ mb }} MB
{% else %}
  {% assign gb = bytes | divided_by: 1073741824.0 | round: 2 %}
  {{ gb }} GB
{% endif %}

Usage:

{% for file in block.downloads %}
  <a href="{{ file | file_url }}" download>
    {{ file.filename }}
    ({% render 'snippets/filesize' size: file.filesize %})
  </a>
{% endfor %}
Section titled “Social Share Links”

Generate social sharing URLs:

{# snippets/social-share.liquid #}
{% assign share_url = request.url | url_encode %}
{% assign share_title = title | default: page.title | url_encode %}


<div class="social-share">
  <a href="https://www.facebook.com/sharer/sharer.php?u={{ share_url }}"
     target="_blank"
     rel="noopener"
     aria-label="Share on Facebook">
    {% render 'snippets/icon' name: 'facebook' %}
  </a>


  <a href="https://twitter.com/intent/tweet?url={{ share_url }}&text={{ share_title }}"
     target="_blank"
     rel="noopener"
     aria-label="Share on X">
    {% render 'snippets/icon' name: 'twitter' %}
  </a>


  <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ share_url }}&title={{ share_title }}"
     target="_blank"
     rel="noopener"
     aria-label="Share on LinkedIn">
    {% render 'snippets/icon' name: 'linkedin' %}
  </a>
</div>

Usage:

{% render 'snippets/social-share' title: post.title %}

Truncate with Ellipsis

Section titled “Truncate with Ellipsis”

Truncate text with a “read more” link:

{# snippets/truncate-text.liquid #}
{% assign text_length = text | size %}
{% if text_length > limit %}
  {{ text | truncate: limit, '...' }}
  {% if link %}
    <a href="{{ link }}">Read more</a>
  {% endif %}
{% else %}
  {{ text }}
{% endif %}

Usage:

{% render 'snippets/truncate-text'
   text: post.lede,
   limit: 150,
   link: post.url
%}

Snippets vs Components

Section titled “Snippets vs Components”
AspectSnippetsComponents
SizeSmall, focusedLarger, complex
PurposeUtilities, icons, formattersUI patterns, sections
MarkupMinimalComplete HTML structure
ExamplesIcons, formatters, helpersCards, headers, navigation

When to Use Snippets

Section titled “When to Use Snippets”
  • Icons and SVG sprites
  • Text formatters (dates, file sizes, truncation)
  • Small utility functions
  • Micro-templates (social links, badges)
  • Anything reused across components

When to Use Components

Section titled “When to Use Components”
  • Complete UI sections (header, footer)
  • Card layouts with multiple elements
  • Complex patterns with significant markup
  • Sections that combine multiple snippets

Best Practices

Section titled “Best Practices”

  1. Keep snippets small - If it’s getting complex, consider a component

  2. Single responsibility - Each snippet should do one thing

  3. Document parameters - Use comments to explain expected inputs

  4. Provide defaults - Handle missing parameters gracefully

  5. Semantic naming - Name snippets after what they do (icon, filesize, truncate-text)

{# snippets/badge.liquid #}
{#
  Displays a status badge
  Required: text (string)
  Optional: variant (string: 'success' | 'warning' | 'error', default: none)
#}
{% assign variant_class = '' %}
{% if variant %}
  {% assign variant_class = 'badge--' | append: variant %}
{% endif %}


<span class="badge {{ variant_class }}">{{ text }}</span>