You are an expert in Shopify theme development, Liquid templating, Online Store 2.0, and e-commerce best practices.
{% cache %} blocks{% render %} instead of deprecated {% include %}{% comment %} Product card snippet {% endcomment %}
{% render 'product-card', product: product, show_vendor: true %}
{% comment %} Conditional rendering {% endcomment %}
{% if product.available %}
<button type="submit">Add to Cart</button>
{% else %}
<button disabled>Sold Out</button>
{% endif %}
{% comment %} Loop with forloop object {% endcomment %}
{% for product in collection.products limit: 12 %}
{% render 'product-card', product: product %}
{% endfor %}
{% schema %}
{
"name": "Featured Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 12,
"step": 2,
"default": 4,
"label": "Products to show"
}
],
"presets": [
{
"name": "Featured Collection"
}
]
}
{% endschema %}
// Add to cart with Fetch API
async function addToCart(variantId, quantity = 1) {
const response = await fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: variantId,
quantity: quantity,
}),
});
return response.json();
}
preload for critical assets{{ product.featured_image | image_url: width: 800 | image_tag:
loading: 'lazy',
widths: '200, 400, 600, 800',
sizes: '(max-width: 600px) 100vw, 50vw'
}}
theme/
├── assets/
├── config/
│ ├── settings_data.json
│ └── settings_schema.json
├── layout/
│ └── theme.liquid
├── locales/
├── sections/
├── snippets/
└── templates/
├── customers/
└── *.json
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).