### Install Liquid Skills Plugin

Source: https://github.com/shopify/liquid-skills/blob/main/README.md

Install the liquid-skills plugin from the Shopify/liquid-skills marketplace.

```bash
/plugin install liquid-skills@liquid-skills
```

--------------------------------

### Install Liquid LSP Plugin

Source: https://github.com/shopify/liquid-skills/blob/main/README.md

Install the liquid-lsp plugin from the Shopify/liquid-skills marketplace.

```bash
/plugin install liquid-lsp@liquid-skills
```

--------------------------------

### Install Shopify CLI Prerequisites

Source: https://context7.com/shopify/liquid-skills/llms.txt

Installation commands for the Shopify CLI, which is required by the liquid-lsp plugin.

```bash
# Via npm
npm install -g @shopify/cli

# Or via Homebrew
brew tap shopify/shopify
brew install shopify-cli

# Verify installation
shopify theme language-server --help
```

--------------------------------

### Install Liquid Skills Plugins

Source: https://context7.com/shopify/liquid-skills/llms.txt

Commands to add the marketplace and install the LSP and skills plugins within Claude Code.

```bash
# Add the marketplace
/plugin marketplace add Shopify/liquid-skills

# Install the LSP plugin for code intelligence
/plugin install liquid-lsp@liquid-skills

# Install the skills for Liquid language support
/plugin install liquid-skills@liquid-skills
```

--------------------------------

### Verify Shopify CLI Installation

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-lsp/README.md

Check that the language server is correctly installed and accessible in the system path.

```bash
shopify theme language-server --help
```

--------------------------------

### Install Shopify CLI via Homebrew

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-lsp/README.md

Installation of the Shopify CLI on macOS using Homebrew.

```bash
brew tap shopify/shopify
brew install shopify-cli
```

--------------------------------

### Install Shopify CLI via npm

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-lsp/README.md

Global installation of the Shopify CLI using the Node Package Manager.

```bash
npm install -g @shopify/cli
```

--------------------------------

### Generate Shop Pay Installments Banner HTML with `payment_terms`

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-commerce.md

Use the `payment_terms` filter to generate the HTML for the Shop Pay Installments banner. This filter is used to display installment payment options.

```liquid
{{ form | payment_terms }}
```

--------------------------------

### Featured Collection Section with BEM CSS

Source: https://context7.com/shopify/liquid-skills/llms.txt

Example of a Shopify Liquid section for a featured collection, demonstrating CSS implementation using BEM naming convention and design tokens for styling.

```APIDOC
## CSS Standards and BEM Naming

CSS patterns using BEM naming convention with design tokens.

### Liquid Code Example

```liquid
{# Featured Collection Section #}
<section
  class="featured-collection"
  style="
    --section-padding: {{ section.settings.padding | default: 60 }}px;
    --columns: {{ section.settings.columns | default: 4 }};
  "
>
  {% if section.settings.heading != blank %}
    <h2 class="featured-collection__heading">{{ section.settings.heading }}</h2>
  {% endif %}

  <div class="featured-collection__grid">
    {% for product in collection.products limit: section.settings.limit %}
      {% render 'product-card', product: product %}
    {% endfor %}
  </div>
</section>

{% stylesheet %}
  /* BEM: Block */
  .featured-collection {
    padding-block: var(--section-padding);
    container-type: inline-size;
  }

  /* BEM: Element */
  .featured-collection__heading {
    font-size: var(--font-size-2xl);
    margin-block-end: var(--space-lg);
    text-align: center;
  }

  .featured-collection__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
  }

  /* Container query for responsive columns */
  @container (min-width: 768px) {
    .featured-collection__grid {
      grid-template-columns: repeat(var(--columns), 1fr);
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .featured-collection * {
      transition: none !important;
    }
  }
{% endstylesheet %}
```
```

--------------------------------

### Get asset image URL

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-html-media.md

Returns the CDN URL for an image in the assets directory of a theme.

```liquid
{{ 'red-and-black-bramble-berries.jpg' | asset_img_url }}
```

--------------------------------

### Define Block Entry Types

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/schema-and-settings.md

Examples of block types used within the blocks array of a schema.

```json
{ "type": "@theme" }
```

```json
{ "type": "@app" }
```

```json
{ "type": "slide" }
```

--------------------------------

### Get product image URL (deprecated)

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-html-media.md

The `product_img_url` filter is deprecated and returns the CDN URL for a product image. Use `image_url` or `img_url` for current best practices.

```liquid
{{ product.featured_image | product_img_url }}
```

--------------------------------

### Implement Accessible Product Media Gallery

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/liquid-theme-a11y/references/component-patterns.md

Use aria-live="polite" for main images and aria-current for active thumbnails.

```html
<div role="region" aria-label="{{ 'products.media_gallery' | t }}">
  <div class="gallery__main" aria-live="polite">
    <img
      id="MainImage-{{ section.id }}"
      src="{{ current_image | image_url: width: 800 }}"
      alt="{{ current_image.alt | escape }}"
    >
  </div>

  <div class="gallery__thumbnails" role="list">
    {% for media in product.media %}
      <button
        role="listitem"
        aria-current="{% if forloop.first %}true{% else %}false{% endif %}"
        aria-label="{{ 'products.view_image_n' | t: n: forloop.index }}"
      >
        <img
          src="{{ media | image_url: width: 100 }}"
          alt=""
          loading="lazy"
        >
      </button>
    {% endfor %}
  </div>
</div>
```

--------------------------------

### Get the number of items in an array or characters in a string using size

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-language.md

The `size` filter returns the count of elements in an array or the number of characters in a string. It's a straightforward way to get the length of a collection or text.

```liquid
{{ collection.title | size }}
{{ collection.products | size }}
```

--------------------------------

### Liquid Variable Assignment and Capture

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/SKILL.md

Demonstrates how to assign values to variables using `assign` and `capture`, and how to use `increment` and `decrement` for counters.

```liquid
{% assign my_var = 'value' %}
```

```liquid
{% capture my_var %}computed {{ value }}{% endcapture %}
```

```liquid
{% increment counter %}
```

```liquid
{% decrement counter %}
```

--------------------------------

### Run Claude Code with Local Plugins

Source: https://context7.com/shopify/liquid-skills/llms.txt

Execute Claude Code with a local plugin directory for testing. Use the `--plugin-dir` flag followed by the path to your plugins.

```bash
# Run Claude Code with local plugin directory
claude --plugin-dir ./plugins/liquid-lsp
```

```bash
# Test multiple plugins
claude --plugin-dir ./plugins/liquid-skills
```

--------------------------------

### Get font URL

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-html-media.md

Returns the CDN URL for the provided font in woff2 format.

```liquid
{{ settings.type_header_font | font_url }}
```

--------------------------------

### Slice strings and arrays

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-language.md

Extracts a portion of a string or array starting at a specific index.

```liquid
{{ collection.title | slice: 0 }}
{{ collection.title | slice: 0, 5 }}

{{ collection.all_tags | slice: 1, 2 | join: ', ' }}
```

--------------------------------

### Prepend String

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-language.md

Adds a given string to the beginning of another string.

```liquid
{%- assign origin = request.origin -%}

{{ product.url | prepend: origin }}
```

--------------------------------

### Generate Shop Login Button

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-commerce.md

Use `login_button` on the `shop` object to generate an HTML button that allows customers to sign in or follow the shop in the Shop App.

```liquid
{{ shop | login_button }}
```

--------------------------------

### Routes

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/objects-tier2.md

Utility object for generating standard storefront URLs.

```APIDOC
## Routes

### Description
Allows you to generate standard URLs for the storefront.

### Access
- Global

### Properties
- root_url
- account_url
- account_login_url
- account_logout_url
- account_recover_url
- account_register_url
- account_addresses_url
- account_profile_url
- collections_url
- all_products_collection_url
- search_url
- predictive_search_url
- cart_url
- cart_add_url
- cart_change_url
- cart_clear_url
- cart_update_url
- product_recommendations_url
- storefront_login_url
```

--------------------------------

### Increment a variable

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/tags.md

Create a variable starting at 0 that increases by 1 on each call. Shared with decrement tags.

```liquid
{% increment variable_name %}
```

```liquid
{% increment variable %}
{% increment variable %}
{% increment variable %}
```

--------------------------------

### Decrement a variable

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/tags.md

Create a variable starting at -1 that decreases by 1 on each call. Shared with increment tags.

```liquid
{% decrement variable_name %}
```

```liquid
{% decrement variable %}
{% decrement variable %}
{% decrement variable %}
```

--------------------------------

### Test Plugins Locally

Source: https://github.com/shopify/liquid-skills/blob/main/README.md

Run Claude with the --plugin-dir flag to test plugins locally from the specified directory.

```bash
claude --plugin-dir ./plugins/liquid-lsp
```

--------------------------------

### Document Snippets with LiquidDoc

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/SKILL.md

Standard format for documenting snippets and blocks to define parameters and usage.

```liquid
{% doc %}
  Brief description of what this file renders.

  @param {type} name - Description of required parameter
  @param {type} [name] - Description of optional parameter (brackets = optional)

  @example
  {% render 'snippet-name', name: value %}
{% enddoc %}
```

--------------------------------

### Create Responsive Image Containers

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/liquid-theme-standards/references/css-patterns.md

Uses aspect-ratio and object-fit to maintain consistent image dimensions.

```css
.image-container {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
```

--------------------------------

### Round Number Up to Nearest Integer

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-language.md

The `ceil` filter rounds a number up to the nearest whole integer. For example, 1.2 becomes 2.

```liquid
{{ 1.2 | ceil }}
```

--------------------------------

### Get Absolute Value of a Number

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-language.md

The `abs` filter returns the absolute (non-negative) value of a number. It's useful for calculations where the sign is irrelevant.

```liquid
{{ -3 | abs }}
```

--------------------------------

### Implement a Featured Collection Section

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/liquid-theme-standards/references/css-patterns.md

Combines Liquid logic with scoped CSS variables and container queries for responsive grid layouts.

```liquid
<section
  class="featured-collection"
  style="
    --section-padding: {{ section.settings.padding | default: 60 }}px;
    --columns: {{ section.settings.columns | default: 4 }};
  "
>
  {% if section.settings.heading != blank %}
    <h2 class="featured-collection__heading">{{ section.settings.heading }}</h2>
  {% endif %}

  <div class="featured-collection__grid">
    {% for product in collection.products limit: section.settings.limit %}
      {% render 'product-card', product: product %}
    {% endfor %}
  </div>
</section>

{% stylesheet %}
  .featured-collection {
    padding-block: var(--section-padding);
    container-type: inline-size;
  }

  .featured-collection__heading {
    font-size: var(--font-size-2xl);
    margin-block-end: var(--space-lg);
    text-align: center;
  }

  .featured-collection__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
  }

  @container (min-width: 768px) {
    .featured-collection__grid {
      grid-template-columns: repeat(var(--columns), 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .featured-collection * {
      transition: none !important;
    }
  }
{% endstylesheet %}
```

--------------------------------

### Get image URL (deprecated)

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-html-media.md

The `img_url` filter is deprecated and returns the CDN URL for an image. Use `image_url` for more control over image rendering.

```liquid
{{ product | img_url }}
```

--------------------------------

### Add Shopify Liquid Skills Marketplace

Source: https://github.com/shopify/liquid-skills/blob/main/README.md

Add the Shopify Liquid Skills marketplace to your Claude Code environment.

```bash
/plugin marketplace add Shopify/liquid-skills
```

--------------------------------

### Liquid Syntax Basics

Source: https://context7.com/shopify/liquid-skills/llms.txt

Common Liquid delimiters, operators, variable assignments, conditionals, and iteration patterns.

```liquid
{# Delimiters #}
{{ ... }}       {# Output (prints a value) #}
{{- ... -}}     {# Output with whitespace trimming #}
{% ... %}       {# Logic tag (if, for, assign) — prints nothing #}
{%- ... -%}     {# Logic tag with whitespace trimming #}

{# Operators #}
{# Comparison: ==, !=, >, <, >=, <= #}
{# Logical: and, or, contains #}

{# Variables #}
{% assign my_var = 'value' %}
{% capture my_var %}computed {{ value }}{% endcapture %}
{% increment counter %}
{% decrement counter %}

{# Conditional #}
{% if product.compare_at_price > product.price %}
  This product is on sale!
{% endif %}

{% unless product.has_only_default_variant %}
  {# Variant selection functionality #}
{% endunless %}

{% case product.type %}
  {% when 'Health' %}
    This is a health potion.
  {% when 'Love' %}
    This is a love potion.
  {% else %}
    This is a potion.
{% endcase %}

{# Iteration #}
{% for product in collection.products %}
  {{ product.title }}
{% else %}
  There are no products in this collection.
{% endfor %}

{# Pagination for large arrays (for loops max 50 iterations) #}
{% paginate collection.products by 5 %}
  {% for product in collection.products %}
    {{ product.title }}
  {% endfor %}
  {{ paginate | default_pagination }}
{% endpaginate %}
```

--------------------------------

### Get Shopify Asset URL

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-html-media.md

Returns the CDN URL for a globally accessible Shopify asset. Useful for core Shopify JavaScript files.

```liquid
{{ 'option_selection.js' | shopify_asset_url }}
```

--------------------------------

### Get Global Asset URL

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-html-media.md

Returns the CDN URL for a global Shopify asset. Can be used with tag filters like `script_tag` or `stylesheet_tag`.

```liquid
{{ 'lightbox.js' | global_asset_url | script_tag }}
```

```liquid
{{ 'lightbox.css' | global_asset_url | stylesheet_tag }}
```

--------------------------------

### Round Number Down to Nearest Integer

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-language.md

Use the `floor` filter to round a number down to the nearest whole integer. For example, 1.2 becomes 1.

```liquid
{{ 1.2 | floor }}
```

--------------------------------

### Render Responsive Image Snippet

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/examples.md

A reusable snippet for rendering responsive images with optional linking and cropping. Requires the image object and supports optional width, height, and crop parameters.

```liquid
{% doc %}
  Renders a responsive image that might be wrapped in a link.

  When `width`, `height` and `crop` are provided, the image will be rendered
  with a fixed aspect ratio.

  @param {image} image - The image to be rendered
  @param {string} [url] - An optional destination URL for the image
  @param {string} [css_class] - Optional class to be added to the image wrapper
  @param {number} [width] - The highest resolution width of the image to be rendered
  @param {number} [height] - The highest resolution height of the image to be rendered
  @param {string} [crop] - The crop position of the image

  @example
  {% render 'image', image: product.featured_image %}
  {% render 'image', image: product.featured_image, url: product.url %}
  {% render 'image',
    css_class: 'product__image',
    image: product.featured_image,
    url: product.url,
    width: 1200,
    height: 800,
    crop: 'center',
  %}
{% enddoc %}

{% liquid
  unless height
    assign width = width | default: image.width
  endunless

  if url
    assign wrapper = 'a'
  else
    assign wrapper = 'div'
  endif
%}

<{{ wrapper }}
  class="image {{ css_class }}"
  {% if url %}
    href="{{ url }}"
  {% endif %}
>
  {{ image | image_url: width: width, height: height, crop: crop | image_tag }}
</{{ wrapper }}>

{% stylesheet %}
  .image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
{% endstylesheet %}

{% javascript %}
  function doSomething() {
    // example
  }
  doSomething()
{% endjavascript %}
```

--------------------------------

### Apply CSS Patterns for Settings

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/SKILL.md

Techniques for applying settings to CSS properties via variables or classes.

```liquid
<div style="--gap: {{ block.settings.gap }}px">
```

```liquid
<div class="{{ block.settings.layout }}">
```

--------------------------------

### Get File URL

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-html-media.md

Returns the CDN URL for a file uploaded to the Files page in the Shopify admin. Use for non-image files like PDFs.

```liquid
{{ 'disclaimer.pdf' | file_url }}
```

--------------------------------

### Get collection image URL (deprecated)

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-html-media.md

The `collection_img_url` filter is deprecated and returns the CDN URL for a collection's image. Prefer using `image_url` or `img_url`.

```liquid
{{ collection.image | collection_img_url }}
```

--------------------------------

### Image Snippet with LiquidDoc

Source: https://context7.com/shopify/liquid-skills/llms.txt

Renders a responsive image, optionally wrapped in a link, with support for aspect ratio based on provided width, height, and crop. Use this for displaying images in a flexible and responsive manner.

```liquid
{# File: snippets/image.liquid #}
{% doc %}
  Renders a responsive image that might be wrapped in a link.

  When width, height and crop are provided, the image will be rendered
  with a fixed aspect ratio.

  @param {image} image - The image to be rendered
  @param {string} [url] - An optional destination URL for the image
  @param {string} [css_class] - Optional class to be added to the image wrapper
  @param {number} [width] - The highest resolution width of the image
  @param {number} [height] - The highest resolution height of the image
  @param {string} [crop] - The crop position of the image

  @example
  {% render 'image', image: product.featured_image %}
  {% render 'image', image: product.featured_image, url: product.url %}
  {% render 'image',
    css_class: 'product__image',
    image: product.featured_image,
    url: product.url,
    width: 1200,
    height: 800,
    crop: 'center'
  %}
{% enddoc %}

{% liquid
  unless height
    assign width = width | default: image.width
  endunless

  if url
    assign wrapper = 'a'
  else
    assign wrapper = 'div'
  endif
%}

<{{ wrapper }}
  class="image {{ css_class }}"
  {% if url %}href="{{ url }}"{% endif %}
>
  {{ image | image_url: width: width, height: height, crop: crop | image_tag }}
</{{ wrapper }}>

{% stylesheet %}
  .image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }
  .image > img {
    width: 100%;
    height: auto;
  }
{% endstylesheet %}
```

--------------------------------

### Get article image URL (deprecated)

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-html-media.md

The `article_img_url` filter is deprecated and returns the CDN URL for an article's image. Use `image_url` or `img_url` instead.

```liquid
{{ article.image | article_img_url }}
```

--------------------------------

### Render a section in Liquid

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/tags.md

Use the section tag to render a section file statically.

```liquid
{% section 'name' %}
```

```liquid
{% section 'header' %}
```

--------------------------------

### Get File Image URL

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-html-media.md

Returns the CDN URL for an image uploaded to the Files page in the Shopify admin. Use for images not part of the theme assets.

```liquid
{{ 'potions-header.png' | file_img_url }}
```

--------------------------------

### Specifying layouts with layout

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/tags.md

The layout tag defines the layout file to use for the template.

```liquid
{% layout name %}
```

--------------------------------

### String formatting

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-language.md

Converts strings to CamelCase or handle format.

```liquid
{{ 'variable-name' | camelize }}
```

```liquid
{{ product.title | handleize }}
{{ product.title | handle }}
```

--------------------------------

### Get Asset URL

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-html-media.md

Returns the CDN URL for a file in the theme's assets directory. Use for static assets like JavaScript or CSS files.

```liquid
{{ 'cart.js' | asset_url }}
```

--------------------------------

### Get Element with DOM Validation

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/liquid-theme-standards/references/javascript-patterns.md

Safely retrieves a DOM element using a selector. Logs a warning if the element is not found, preventing potential runtime errors.

```javascript
// Validate DOM elements before use
const getElement = (selector, context = document) => {
  const element = context.querySelector(selector);
  if (!element) {
    console.warn(`Element not found: ${selector}`);
  }
  return element;
};
```

--------------------------------

### Creating theme areas with content_for

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/tags.md

Use content_for to define areas for rendering blocks. Requires a type parameter to distinguish between multiple blocks or a single static block.

```liquid
{% content_for 'blocks' %}
{% content_for 'block', type: "slide", id: "slide-1" %}
```

```liquid
{% content_for "blocks" %}
```

--------------------------------

### Implement Animation Patterns

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/liquid-theme-standards/references/css-patterns.md

Optimizes performance by animating only transform and opacity properties.

```css
/* Safe defaults — only animate transform and opacity */
.product-card {
  transition: transform 0.2s ease;
}

.product-card:hover {
  transform: translateY(-2px);
}

/* will-change only during animation */
.product-card:hover {
  will-change: transform;
}
.product-card:not(:hover) {
  will-change: auto;
}
```

--------------------------------

### Implement Live Region for Dynamic Updates

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/liquid-theme-a11y/SKILL.md

Announces dynamic content changes to screen readers using aria-live.

```html
<div aria-live="polite" aria-atomic="true" class="visually-hidden">
  {{ 'products.variant_selected' | t: variant: selected_variant.title }}
</div>
```

```javascript
announce(message) {
  this.liveRegion.textContent = '';
  requestAnimationFrame(() => {
    this.liveRegion.textContent = message;
  });
}
```

--------------------------------

### Get Item Count for Variant in Cart

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-commerce.md

Use `item_count_for_variant` to retrieve the total quantity of a specific product variant within the shopping cart. Requires the variant ID as an argument.

```liquid
{{ cart | item_count_for_variant: 39888235757633 }}
```

--------------------------------

### Get the last item of an array using last

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-language.md

Access the final element of an array with the `last` filter. Similar to `first`, this provides direct access to the array's concluding item.

```liquid
{%- assign last_product = collection.products | last -%}

{{ last_product.title }}
```

--------------------------------

### product_option Object

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/objects-tier2.md

Represents a product option, such as size or color.

```APIDOC
## product_option Object

### Description
A product option, such as size or color.

### Access
`product.options_with_values`

### Properties
- `name` (string) - The name of the option (e.g., 'Color', 'Size').
- `position` (integer) - The position of the option in the list of options.
- `values` (array) - An array of available values for this option.
- `selected_value` (string) - The currently selected value for this option.
```

--------------------------------

### Get the index of an item by property using find_index

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-language.md

The `find_index` filter returns the numerical index of the first item in an array that matches a specified property value. This can be used for positional referencing.

```liquid
{% assign index = collection.products | find_index: 'vendor', "Polina's Potent Potions" %}

{{ index }}
```

--------------------------------

### metaobject_system Object

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/objects-tier2.md

Provides basic system information about a `metaobject`.

```APIDOC
## metaobject_system Object

### Description
Basic information about a `metaobject`. These properties are grouped under the `system` object to avoid collisions between system property names and user-defined metaobject fields.

### Access
`metaobject.system`

### Properties
- `type` (string) - The type of the metaobject.
- `handle` (string) - The handle of the metaobject.
- `id` (string) - The unique identifier of the metaobject.
- `url` (string) - The URL of the metaobject.
```

--------------------------------

### Liquid Object: blog

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/objects-content.md

Provides information about a specific blog in the store. Accessible in `blog` and `article` templates.

```APIDOC
## `blog` Object

Information about a specific blog in the store.

**Access:** Templates: `blog`, `article`

### Properties

| Property | Type | Description |
|----------|------|-------------|
| `id` | `number` | The ID of the blog. |
| `title` | `string` | The title of the blog. |
| `handle` | `string` | The handle of the blog. |
| `articles` | `array` | The articles in the blog. |
| `articles_count` | `number` | The total number of articles in the blog. This total doesn't include hidden articles. |
| `metafields` | `array` | The metafields applied to the blog. |
| `url` | `string` | The relative URL of the blog. |
| `template_suffix` | `string` | The name of the custom template assigned to the blog. |
| `all_tags` | `array` | All of the tags on the articles in the blog. |
| `tags` | `array` | A list of all of the tags on all of the articles in the blog. Unlike `blog.all_tags`, this property only returns tags of articles that are in the filtered view. |
| `comments_enabled?` | `boolean` | Returns `true` if comments are enabled for the blog. Returns `false` if not. |
| `moderated?` | `boolean` | Returns `true` if the blog is set to moderate comments. Returns `false` if not. |
| `next_article` | `article` | The next (older) article in the blog. |
| `previous_article` | `article` | The previous (newer) article in the blog. |
```

--------------------------------

### Configure Live Regions for Dynamic Updates

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/liquid-theme-a11y/references/component-patterns.md

Utilizes aria-live and role attributes to announce dynamic content changes. Use aria-atomic="true" to ensure the entire region is read upon updates.

```html
<!-- Cart count -->
<span aria-live="polite" aria-atomic="true" class="visually-hidden">
  {{ 'cart.item_count' | t: count: cart.item_count }}
</span>

<!-- Filter results count -->
<div aria-live="polite" aria-atomic="true">
  {{ 'filters.showing_results' | t: count: results.size }}
</div>

<!-- Form success -->
<div role="status" aria-live="polite">
  {{ 'forms.success_message' | t }}
</div>
```

--------------------------------

### Get the first item of an array using first

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-language.md

Retrieve the first element of an array using the `first` filter. This is a simple way to access the initial item without needing to know its index.

```liquid
{%- assign first_product = collection.products | first -%}

{{ first_product.title }}
```

--------------------------------

### Generate MD5 Hash

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-language.md

Converts a string into an MD5 hash. Note that MD5 is considered insecure; use blake3 instead.

```liquid
{{ '' | md5 }}
```

--------------------------------

### Get Payment Type SVG Image URL with `payment_type_img_url`

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/filters-commerce.md

The `payment_type_img_url` filter returns the URL for an SVG image of a specified payment type. It's useful for displaying payment method icons.

```liquid
{% for type in shop.enabled_payment_types %}
<img src="{{ type | payment_type_img_url }}" width="50" height="50" />
{% endfor %}
```

--------------------------------

### Shopify Liquid Setting Types Reference

Source: https://context7.com/shopify/liquid-skills/llms.txt

Lists all available setting types for section and block schemas in Shopify Liquid, along with their common configurations.

```APIDOC
## Setting Types Reference

All available setting types for section and block schemas.

### JSON Schema for Setting Types

```json
{
  "settings": [
    {
      "type": "header",
      "content": "t:headers.content"
    },
    {
      "type": "paragraph",
      "content": "t:paragraphs.help_text"
    },
    {
      "type": "checkbox",
      "id": "show_title",
      "label": "t:labels.show_title",
      "default": true
    },
    {
      "type": "text",
      "id": "heading",
      "label": "t:labels.heading",
      "placeholder": "Enter heading"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "t:labels.description"
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "t:labels.content"
    },
    {
      "type": "inline_richtext",
      "id": "subtitle",
      "label": "t:labels.subtitle"
    },
    {
      "type": "number",
      "id": "columns",
      "label": "t:labels.columns",
      "default": 4
    },
    {
      "type": "range",
      "id": "padding",
      "label": "t:labels.padding",
      "min": 0,
      "max": 100,
      "default": 20,
      "step": 5,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "t:labels.layout",
      "options": [
        { "value": "grid", "label": "t:options.layout.grid" },
        { "value": "list", "label": "t:options.layout.list" }
      ],
      "default": "grid"
    },
    {
      "type": "radio",
      "id": "alignment",
      "label": "t:labels.alignment",
      "options": [
        { "value": "left", "label": "t:options.alignment.left" },
        { "value": "center", "label": "t:options.alignment.center" }
      ]
    },
    {
      "type": "text_alignment",
      "id": "text_align",
      "label": "t:labels.text_alignment",
      "default": "left"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "t:labels.background_color",
      "default": "#ffffff"
    },
    {
      "type": "color_background",
      "id": "gradient",
      "label": "t:labels.gradient"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:labels.image"
    },
    {
      "type": "video",
      "id": "video",
      "label": "t:labels.video"
    },
    {
      "type": "video_url",
      "id": "video_url",
      "label": "t:labels.video_url",
      "accept": ["youtube", "vimeo"]
    },
    {
      "type": "product",
      "id": "featured_product",
      "label": "t:labels.product"
    },
    {
      "type": "product_list",
      "id": "products",
      "label": "t:labels.products",
      "limit": 12
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "t:labels.collection"
    },
    {
      "type": "collection_list",
      "id": "collections",
      "label": "t:labels.collections",
      "limit": 6
    },
    {
      "type": "page",
      "id": "page",
      "label": "t:labels.page"
    },
    {
      "type": "blog",
      "id": "blog",
      "label": "t:labels.blog"
    },
    {
      "type": "article",
      "id": "article",
      "label": "t:labels.article"
    },
    {
      "type": "url",
      "id": "link",
      "label": "t:labels.link"
    },
    {
      "type": "link_list",
      "id": "menu",
      "label": "t:labels.menu"
    },
    {
      "type": "font_picker",
      "id": "heading_font",
      "label": "t:labels.heading_font",
      "default": "helvetica_n4"
    }
  ]
}
```
```

--------------------------------

### JavaScript Component Communication: Parent to Child

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/liquid-theme-standards/SKILL.md

Communicate from a parent component to a child component by directly calling the child's public methods. Ensure the child component is accessible, for example, by querying it using `querySelector`.

```javascript
this.querySelector('child-component')?.publicMethod(data);
```

--------------------------------

### Liquid Objects Documentation

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/references/objects-tier3.md

This section provides documentation for various Liquid objects available in Shopify.

```APIDOC
## Liquid Objects - Tier 3

> 53 simple objects with access paths.

**`additional_checkout_buttons`** (global) — Returns `true` if a store has any payment providers with offsite checkouts, such as PayPal Express C

**`all_country_option_tags`** (global) — Creates an `<option>` tag for each country.

**`all_products`** (global) — All of the products on a store.

**`app`** — An app. This object is usually used to access app-specific information for use with theme app extens

**`articles`** (global) — All of the articles across the blogs in the store.

**`blogs`** (global) — All of the blogs in the store.

**`brand_color`** (brand.colors) — The colors defined as part of a store's brand assets.

**`canonical_url`** (global) — The canonical URL for the current page.

**`collections`** (global) — All of the collections on a store.

**`color_scheme`** — A color_scheme from a `color_scheme` setting.

**`color_scheme_group`** — A color_scheme_group from a `color_scheme_group` setting.

**`content_for_additional_checkout_buttons`** (global) — Returns checkout buttons for any active payment providers with offsite checkouts.

**`content_for_header`** (global) — Dynamically returns all scripts required by Shopify.

**`content_for_index`** (global) — Dynamically returns the content of sections to be rendered on the home page.

**`content_for_layout`** (global) — Dynamically returns content based on the current template.

**`country_option_tags`** (global) — Creates an `<option>` tag for each country and region that's included in a shipping zone on the Ship

**`current_page`** (global) — The current page number.

**`current_tags`** (blog, collection) — The currently applied tags.

**`customer_payment_method`** (customer.payment_methods) — A customer's saved payment method.

**`discount_allocation`** (line_item.discount_allocations, shipping_method.discount_allocations) — Information about how a discount affects an item.

**`filter_value_display`** *(deprecated)* (filter_value.display) — The visual representation of a filter value.

**`focal_point`** (image_presentation.focal_point) — The focal point for an image.

**`form_errors`** (form.errors) — The error category strings for errors from a form created by a `form` tag.

**`handle`** (global) — The handle of the resource associated with the current template.

**`image_presentation`** (image.presentation) — The presentation settings for an image.

**`images`** (global) — All of the images that have been uploaded to a store.

**`instructions`** (line_item.instructions) — The instructions for a nested cart line item.

**`linklists`** (global) — All of the menus in a store.

**`metaobject`** (metaobjects.) — A metaobject entry, which includes the values for a set of fields. The set is defined by the parent 

**`metaobject_definition`** — A `metaobject_definition` defines the structure of a metaobject type for the store, which consists o

**`metaobjects`** (global) — All of the metaobjects of the store.

**`money`** (metafield.value, store_credit_account.balance) — A money value, in the the customer's local (presentment) currency.

**`page_description`** (global) — The meta description of the current page.

**`page_image`** (global) — An image to be shown in search engine listings and social media previews for the current page.

**`page_title`** (global) — The page title of the current page.

**`pages`** (global) — All of the pages on a store.

**`parent_relationship`** (line_item.parent_relationship) — Information about the parent relationship for a nested cart line item.

**`pending_payment_instruction_input`** (transaction.buyer_pending_payment_instructions) — Header-value pairs that make up the list of payment information specific to the payment method. This

**`powered_by_link`** (global) — Creates an HTML link element that links to a localized version of `shopify.com`, based on the locale

**`quantity_price_break`** (variant.quantity_price_breaks) — The per-unit price of a variant when purchasing the minimum quantity or more.

**`remote_details`** (remote_product., remote_product.remote_details) — Information about the remote source from which the object came from.

**`robots`** (robots.txt.liquid) — The default rule groups for the `robots.txt` file.

**`rule`** (group.rules) — A rule for the `robots.txt` file, which tells crawlers which pages can, or can't, be accessed.

**`script`** (scripts.cart_calculate_line_items) — Information about a Shopify Script. > Caution: > Shopify Scripts will be sunset on August 28, 2025. 

**`scripts`** (global) — The active scripts, of each script type, on the store. > Caution: > Shopify Scripts will be sunset o

**`selling_plan_allocation_price_adjustment`** (selling_plan_allocation.price_adjustments) — The resulting price from the intent of the associated `selling_plan_price_adjustment`.
```

--------------------------------

### Define Page Layout Patterns

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/liquid-theme-standards/references/css-patterns.md

Standard CSS patterns for grid, flexbox, and container constraints.

```css
.section-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}
```

```css
.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
```

```css
.page-width {
  width: min(100%, var(--page-width));
  margin-inline: auto;
  padding-inline: var(--space-md);
}
```

```css
.full-bleed {
  display: grid;
  grid-template-columns: var(--space-md) 1fr var(--space-md);
}

.full-bleed > * {
  grid-column: 2;
}

.full-bleed > .full-width {
  grid-column: 1 / -1;
}
```

--------------------------------

### Create Interactive Web Components

Source: https://context7.com/shopify/liquid-skills/llms.txt

Use custom elements to encapsulate interactive logic like adding items to the cart.

```javascript
class ProductCard extends HTMLElement {
  #controller = null;

  connectedCallback() {
    this.#controller = new AbortController();
    this.button = this.querySelector('[data-add-to-cart]');
    this.button?.addEventListener('click', this.#handleClick.bind(this), {
      signal: this.#controller.signal
    });
  }

  disconnectedCallback() {
    this.#controller?.abort();
  }

  async #handleClick(event) {
    event.preventDefault();
    this.button.disabled = true;

    try {
      const formData = new FormData();
      formData.append('id', this.dataset.variantId);
      formData.append('quantity', '1');

      const response = await fetch('/cart/add.js', {
        method: 'POST',
        body: formData
      });

      if (!response.ok) throw new Error('Failed');

      this.dispatchEvent(new CustomEvent('cart:item-added', {
        detail: await response.json(),
        bubbles: true
      }));
    } catch (error) {
      console.error('Add to cart error:', error);
    } finally {
      this.button.disabled = false;
    }
  }
}

customElements.define('product-card', ProductCard);
```

```liquid
{# Usage in Liquid #}
<product-card data-variant-id="{{ product.selected_or_first_available_variant.id }}">
  <button data-add-to-cart>{{ 'products.add_to_cart' | t }}</button>
</product-card>
```

--------------------------------

### Implement Liquid-Aware CSS

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/SKILL.md

Use the style tag for dynamic CSS that requires Liquid variables, such as theme settings.

```liquid
{% style %}
  .section-{{ section.id }} {
    background: {{ section.settings.bg_color }};
  }
{% endstyle %}
```

--------------------------------

### Shopify Theme Directory Structure

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/shopify-liquid-themes/SKILL.md

Illustrates the standard directory structure for a Shopify Liquid theme, outlining the purpose of each folder like sections, blocks, snippets, layout, templates, config, locales, and assets.

```tree
. 
├── sections/    # Full-width page modules with {% schema %} — hero, product grid, testimonials
├── blocks/      # Nestable components with {% schema %} — slides, feature items, text blocks
├── snippets/    # Reusable fragments via {% render %} — buttons, icons, image helpers
├── layout/      # Page wrappers (must include {{ content_for_header }} and {{ content_for_layout }})
├── templates/   # JSON files defining which sections appear on each page type
├── config/      # Global theme settings (settings_schema.json, settings_data.json)
├── locales/     # Translation files (en.default.json, fr.json, etc.)
└── assets/      # Static CSS, JS, images (prefer {% stylesheet %}/{% javascript %} instead)
```

--------------------------------

### Implement Accessible Color Swatches

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/liquid-theme-a11y/references/component-patterns.md

Use role="radio" with aria-checked for single-select swatches. Always provide a text label and avoid relying on color alone.

```html
<fieldset>
  <legend>{{ 'products.color' | t }}</legend>
  {% for color in product.options_by_name['Color'].values %}
    <button
      type="button"
      role="radio"
      aria-checked="{% if color == selected_color %}true{% else %}false{% endif %}"
      aria-label="{{ color }}"
      style="background-color: {{ color | handleize }}"
      class="color-swatch"
    >
      <span class="visually-hidden">{{ color }}</span>
    </button>
  {% endfor %}
</fieldset>
```

--------------------------------

### Manipulate JSON Files with jq

Source: https://github.com/shopify/liquid-skills/blob/main/plugins/liquid-skills/skills/liquid-theme-standards/SKILL.md

Common patterns for modifying Shopify theme JSON files using the jq command-line tool to ensure structural integrity.

```bash
# Add a section to a template
jq '.sections.new_section = {"type": "hero", "settings": {"heading": "Welcome"}}' templates/index.json > /tmp/out && mv /tmp/out templates/index.json

# Update a setting value
jq '.current.sections.header.settings.logo_width = 200' config/settings_data.json > /tmp/out && mv /tmp/out config/settings_data.json

# Reorder sections
jq '.order += ["new_section"]' templates/index.json > /tmp/out && mv /tmp/out templates/index.json

# Remove a section
jq 'del(.sections.old_banner) | .order -= ["old_banner"]' templates/index.json > /tmp/out && mv /tmp/out templates/index.json

# Read a nested value
jq '.sections.header.settings' templates/index.json
```