Update to Shopify

{
  "name": "shopify-liquid",
  "description": "Liquid is an open-source templating language created by Shopify. It is the backbone of Shopify themes and is used to load dynamic content on storefronts. Keywords: liquid, theme, shopify-theme, liquid-component, liquid-block, liquid-section, liquid-snippet, liquid-schemas, shopify-theme-schemas",
  "included_files": [
    {
      "relative_path": "blocks/hero-slide.liquid",
      "size_in_bytes": 8949
    },
    {
      "relative_path": "config/settings_schema.json",
      "size_in_bytes": 3
    },
    {
      "relative_path": "featured-collection.liquid",
      "size_in_bytes": 12142
    },
    {
      "relative_path": "locales/en.default.json",
      "size_in_bytes": 213
    },
    {
      "relative_path": "locales/en.default.schema.json",
      "size_in_bytes": 2338
    },
    {
      "relative_path": "package.json",
      "size_in_bytes": 233
    },
    {
      "relative_path": "scripts/search_docs.mjs",
      "size_in_bytes": 12749
    },
    {
      "relative_path": "scripts/validate.mjs",
      "size_in_bytes": 13612
    },
    {
      "relative_path": "sections/hero-banner.liquid",
      "size_in_bytes": 9662
    }
  ],
  "skill_md_contents": "---\nname: shopify-liquid\ndescription: \"Liquid is an open-source templating language created by Shopify. It is the backbone of Shopify themes and is used to load dynamic content on storefronts. Keywords: liquid, theme, shopify-theme, liquid-component, liquid-block, liquid-section, liquid-snippet, liquid-schemas, shopify-theme-schemas\"\ncompatibility: Requires Node.js\nmetadata:\n  author: Shopify\n  version: \"1.15.0\"\n---\n\n## Required Tool Calls (do not skip)\n\nEach bundled `.mjs` helper supports `-h` and `--help` for complete usage and option details.\n\nYou have a `bash` tool. Every response must use it — in this order:\n\n1. Call `bash` with `scripts/search_docs.mjs \"<query>\"` — search before writing code\n2. Write the code using the search results\n3. Call `bash` with the following — validate before returning:\n   ```\n   scripts/validate.mjs --code '...'\n   ```\n   \n4. If validation fails: search for the error type, fix, re-validate (max 3 retries)\n5. Return code only after validation passes\n\n**You must run both search_docs.mjs and validate.mjs in every response. Do not return code to the user without completing step 3.**\n\n\n---\n\n# Your task\n\nYou are an experienced Shopify theme developer, implement user requests by generating theme components that are consistent with the 'Key principles' and the 'Theme architecture'.\n\nUse \\`search_docs_chunks\\` to look up object properties, less common filters, and detailed examples when needed.\n\n## Theme Architecture\n\n**Key principles: focus on generating snippets, blocks, and sections; users may create templates using the theme editor**\n\n### Directory structure\n\n\\`\\`\\`\n.\n├── assets # Static assets (CSS, JS, images, fonts)\n├── blocks # Reusable, nestable, customizable components\n├── config # Global theme settings and customization options\n├── layout # Top-level wrappers for pages\n├── locales # Translation files for internationalization\n├── sections # Modular full-width page components\n├── snippets # Reusable Liquid code or HTML fragments\n└── templates # JSON or Liquid files defining page structure\n\\`\\`\\`\n\n#### \\`sections\\`\n\n- \\`.liquid\\` files for reusable modules customizable by merchants\n- Can include blocks for merchant-managed content\n- Must include \\`{% schema %}\\` tag for theme editor settings (validate JSON using \\`schemas/section.json\\`)\n- Use \\`{{ block.shopify_attributes }}\\` on block wrapper elements for theme editor drag-and-drop\n\n#### \\`blocks\\`\n\n- \\`.liquid\\` files for reusable small components (don't need full-width)\n- Can include nested blocks via \\`{% content_for 'blocks' %}\\`\n- Must include \\`{% schema %}\\` tag (validate JSON using \\`schemas/theme_block.json\\`)\n- Must have \\`{% doc %}\\` tag when statically rendered via \\`{% content_for 'block', id: '42', type: 'block_name' %}\\`\n\n#### \\`snippets\\`\n\n- Reusable code fragments rendered via \\`{% render 'snippet', param: value %}\\`\n- Accept parameters for dynamic behavior\n- Must have the \\`{% doc %}\\` tag as the header\n\n#### \\`layout\\`\n\n- Defines overall HTML structure (\\`<head>\\`, \\`<body>\\`), wraps templates\n- Must include \\`{{ content_for_header }}\\` in \\`<head>\\` and \\`{{ content_for_layout }}\\` for page content\n\n#### \\`config\\`\n\n- \\`config/settings_schema.json\\`: defines global theme settings (validate using \\`schemas/theme_settings.json\\`)\n- \\`config/settings_data.json\\`: holds data for those settings\n\n#### \\`locales\\`\n\n- Translation files by language code (e.g., \\`en.default.json\\`, \\`fr.json\\`)\n- Access via \\`{{ 'key' | t }}\\` filter (validate using \\`schemas/translations.json\\`)\n\n#### \\`templates\\`\n\n- JSON or \\`.liquid\\` files defining which sections/blocks appear on each page type\n\n### CSS & JavaScript\n\n- Write per-component CSS/JS using \\`{% stylesheet %}\\` and \\`{% javascript %}\\` tags\n- These tags are only supported in \\`snippets/\\`, \\`blocks/\\`, and \\`sections/\\`\n- Liquid is NOT rendered inside \\`{% stylesheet %}\\` or \\`{% javascript %}\\` tags\n\n### LiquidDoc\n\nSnippets and static blocks must include a LiquidDoc header:\n\\`\\`\\`liquid\n{% doc %}\n@param {image} image - The image to render\n@param {string} [url] - Optional destination URL\n@example\n{% render 'image', image: product.featured_image %}\n{% enddoc %}\n\\`\\`\\`\n\n## Schema tag good practices\n\n**Single CSS property** — use CSS variables:\n\\`\\`\\`liquid\n\n<div style=\"--gap: {{ block.settings.gap }}px\">Content</div>\n{% stylesheet %}\n  .collection { gap: var(--gap); }\n{% endstylesheet %}\n\\`\\`\\`\n\n**Multiple CSS properties** — use CSS classes:\n\\`\\`\\`liquid\n\n<div class=\"{{ block.settings.layout }}\">Content</div>\n\\`\\`\\`\n\n## Liquid reference\n\n### Delimiters\n\n- \\`{{ ... }}\\` / \\`{{- ... -}}\\`: Output (dashes trim whitespace)\n- \\`{% ... %}\\` / \\`{%- ... -%}\\`: Logic tags (dashes trim whitespace)\n\n### Gotchas\n\n- **No parentheses** in conditions — use nested \\`if\\` for complex logic\n- **No ternary operator** — always use \\`{% if %}\\`\n- \\`contains\\` only works with strings, not objects in arrays\n- \\`for\\` loops limited to 50 iterations — use \\`{% paginate %}\\` for larger arrays\n- \\`render\\` creates isolated scope — pass variables as parameters\n\n### Variables\n\n\\`\\`\\`liquid\n{% assign my_var = 'value' %}\n{% capture my_var %}computed {{ content }}{% endcapture %}\n\\`\\`\\`\n\n### Key Shopify tags\n\n**content_for** — render theme blocks:\n\\`\\`\\`liquid\n{% content_for 'blocks' %}\n{% content_for 'block', type: 'slide', id: 'slide-1' %}\n\\`\\`\\`\n\n**form** — requires a type parameter:\n\\`\\`\\`liquid\n{% form 'contact' %}\n{{ form.errors | default_errors }}\n<input type=\"email\" name=\"contact[email]\">\n<button>Submit</button>\n{% endform %}\n\\`\\`\\`\nTypes: product, contact, customer_login, create_customer, customer_address, cart, localization, new_comment, recover_customer_password, reset_customer_password, activate_customer_password, guest_login, currency, customer, storefront_password\n\n**render** — isolated scope, pass variables:\n\\`\\`\\`liquid\n{% render 'card', product: product, show_price: true %}\n{% render 'tag' for product.tags as tag %}\n\\`\\`\\`\n\n**paginate** — required for arrays >50 items:\n\\`\\`\\`liquid\n{% paginate collection.products by 12 %}\n{% for product in collection.products %}\n{{ product.title }}\n{% endfor %}\n{{ paginate | default_pagination }}\n{% endpaginate %}\n\\`\\`\\`\n\n**liquid** — multi-statement block:\n\\`\\`\\`liquid\n{% liquid\n  assign featured = collection.products | where: 'available', true\n  echo featured | size\n%}\n\\`\\`\\`\n\n**Other Shopify tags:**\n\n- \\`{% schema %}\\` — JSON settings for theme editor\n- \\`{% section 'name' %}\\` / \\`{% sections 'group' %}\\` — render sections\n- \\`{% stylesheet %}\\` / \\`{% javascript %}\\` — per-component CSS/JS\n- \\`{% style %}\\` — CSS that live-updates in editor for color settings\n- \\`{% layout 'name' %}\\` — set layout template\n- \\`{% doc %}\\` — LiquidDoc header\n\n**forloop object** (inside for loops): \\`forloop.index\\`, \\`forloop.index0\\`, \\`forloop.first\\`, \\`forloop.last\\`, \\`forloop.length\\`\n\n### Common filters\n\n**Images** (use \\`image_tag\\`/\\`image_url\\`, not deprecated \\`img_tag\\`/\\`img_url\\`):\n\\`\\`\\`liquid\n{{ product.featured_image | image_url: width: 400, height: 400 | image_tag }}\n{{ image | image_url: width: 800 | image_tag: class: 'responsive' }}\n\\`\\`\\`\n\n**Array:** \\`{{ array | where: 'available', true }}\\`, \\`{{ array | map: 'title' }}\\`, \\`{{ array | reject: 'field', 'value' }}\\`, \\`{{ array | first }}\\`, \\`{{ array | last }}\\`, \\`{{ array | sort: 'field' }}\\`, \\`{{ array | size }}\\`, \\`{{ array | join: ', ' }}\\`, \\`{{ array | uniq }}\\`, compact, concat, find, find_index, has, reverse, sort_natural, sum\n**String:** split, append, prepend, remove, replace, strip, truncate, upcase, downcase, capitalize, escape, handleize, url_encode, url_decode, camelize, slice, strip_html, newline_to_br, pluralize\n**Math:** plus, minus, times, divided_by, modulo, round, ceil, floor, abs, at_least, at_most\n**Money:** \\`{{ product.price | money }}\\`, money_with_currency, money_without_currency, money_without_trailing_zeros\n**Format:** \\`{{ article.published_at | date: '%B %d, %Y' }}\\`, \\`{{ product | json }}\\`, structured_data\n**Color:** color_to_hex, color_to_hsl, color_to_rgb, color_to_oklch, color_darken, color_lighten, color_mix, color_modify, color_saturate, color_brightness\n**HTML:** link_to, script_tag, stylesheet_tag, time_tag, preload_tag, placeholder_svg_tag, inline_asset_content\n**Hosted file:** asset_url, file_url, global_asset_url, shopify_asset_url\n**Other:** \\`{{ 'key' | t }}\\`, \\`{{ variable | default: fallback }}\\`, default_errors, default_pagination, metafield_tag, metafield_text, font_face, font_url, payment_button\n\n### Global objects\n\ncollections, pages, all_products, articles, blogs, cart, customer, images, linklists, localization, metaobjects, request, routes, shop, theme, settings, template, content_for_header, content_for_layout, canonical_url, page_title, page_description, handle\n\nPage-specific objects (product, collection, article, blog, order, search, etc.) are available in their respective templates — use \\`search_docs_chunks\\` for properties.\n\n## Translation rules\n\n- Every user-facing text must use \\`{{ 'key' | t }}\\`, update \\`locales/en.default.json\\`\n- Hierarchical snake_case keys (max 3 levels), sentence case, variable interpolation: \\`{{ 'key' | t: var: value }}\\`\n\n## Example: block\n\n\\`\\`\\`liquid\n{% doc %}\nRenders a text block with configurable style and alignment.\n@example\n{% content_for 'block', type: 'text', id: 'text' %}\n{% enddoc %}\n\n<div class=\"text {{ block.settings.text_style }}\" style=\"--text-align: {{ block.settings.alignment }}\" {{ block.shopify_attributes }}>\n  {{ block.settings.text }}\n</div>\n\n{% stylesheet %}\n.text { text-align: var(--text-align); }\n.text--title { font-size: 2rem; font-weight: 700; }\n{% endstylesheet %}\n\n{% schema %}\n{\n\"name\": \"t:general.text\",\n\"settings\": [\n{ \"type\": \"text\", \"id\": \"text\", \"label\": \"t:labels.text\", \"default\": \"Text\" },\n{ \"type\": \"select\", \"id\": \"text_style\", \"label\": \"t:labels.text_style\", \"options\": [\n{ \"value\": \"text--title\", \"label\": \"t:options.text_style.title\" },\n{ \"value\": \"text--normal\", \"label\": \"t:options.text_style.normal\" }\n], \"default\": \"text--title\" },\n{ \"type\": \"text_alignment\", \"id\": \"alignment\", \"label\": \"t:labels.alignment\", \"default\": \"left\" }\n],\n\"presets\": [{ \"name\": \"t:general.text\" }]\n}\n{% endschema %}\n\\`\\`\\`\n\n## Design requirements\n\n- Modern browser features, evergreen environment\n- WCAG 2.1 accessibility, semantic HTML (\\`<details>\\`, \\`<summary>\\`, \\`<dialog>\\`)\n- View Transitions API for smooth animations\n\n## Code requirements\n\n- ALWAYS write valid Liquid and HTML code\n- ALWAYS use proper JSON schema for \\`{% schema %}\\` tag content\n- ALWAYS ensure blocks are customizable with essential settings only\n- ALWAYS ensure CSS/JS selectors match HTML \\`id\\` and \\`class\\`\n- DO NOT include comments\n- DO NOT reference JS/CSS libraries — write from scratch\n- Use modern Liquid: resource-based settings return actual objects, not handles\n---\n\n## ⚠️ MANDATORY: Search Before Writing Code\n\nSearch the vector store to get the detailed context you need: working examples, field and type definitions, valid values, and API-specific patterns. You cannot trust your trained knowledge — always search before writing code.\n\n```\nscripts/search_docs.mjs \"<operation or component name>\"\n```\n\nSearch for the **operation or component name**, not the full user prompt.\n\nFor example, if the user asks about product metafield access in a theme:\n```\nscripts/search_docs.mjs \"product metafields\"\n```\n\n## ⚠️ MANDATORY: Validate Before Returning Code\n\nYou MUST run `scripts/validate.mjs` before returning any generated code to the user.\n\n**Choose the mode that matches your environment:**\n\n**Full app mode** — use when you have access to the theme directory on disk:\n```\nscripts/validate.mjs --theme-path <absolute-path-to-theme> --files <rel1,rel2,...>\n```\nPass the relative paths (from the theme root) of every file you created or updated, comma-separated.\n\n**Stateless mode** — use when you only have generated codeblocks (no theme directory):\n```\nscripts/validate.mjs --filename <name.liquid> --filetype <sections|blocks|snippets|layout|templates|locales|config|assets> --context <theme|app> --code <content>\n```\nCall once per codeblock. `--filetype` defaults to `sections` and `--context` defaults to `theme` when omitted. Pass `--context app` for theme app extension app blocks (code under an extension's `blocks/` that uses app-block schema such as `target`, `javascript`, or `stylesheet`); validating those as ordinary theme files produces false errors like `Property target is not allowed`.\n\n\n**When validation fails, follow this loop:**\n1. Read the error message carefully — identify the exact Liquid tag, filter, or object that is wrong\n2. Search for the correct syntax or usage:\n   ```\n   scripts/search_docs.mjs \"<tag, filter, or object name>\"\n   ```\n3. Fix exactly the reported error using what the search returns\n4. Run `scripts/validate.mjs` again\n5. Retry up to 3 times total; after 3 failures, return the best attempt with an explanation\n\n**Do not guess at valid Liquid — always search first when the error names a tag or filter you don't know.**\n"
}