{% comment %} This is a comment tag and won't render in HTML {% endcomment %}
 
<!-- Output markup outputs data from objects -->
<h2>{{ product.title }}</h2>
<p>Price: {{ product.price | money }}</p>
 
<!-- Filters modify outputs via the pipe character '|' -->
<p>{{ "shopify platform" | upcase | replace: "PLATFORM", "E-COMMERCE" }}</p>
 
<!-- Outputting collections -->
<p>First variant SKU: {{ product.variants.first.sku }}</p>

<!-- 'assign' creates or changes variables -->
{% assign discount_rate = 0.15 %}
{% assign sale_price = product.price | times: discount_rate %}
 
<!-- 'capture' compiles blocks of text/HTML into a single string variable -->
{% capture banner_html %}
  <div class="promo-banner">
    <h3>{{ product.vendor }} Special Offer!</h3>
    <p>Save {{ sale_price | money }} today!</p>
  </div>
{% endcapture %}
 
<!-- Render captured variable -->
{{ banner_html }}

<!-- 1. If / Elsif / Else -->
{% if product.available %}
  <button class="btn add-to-cart">Add to Cart</button>
{% elsif product.tags contains 'Preorder' %}
  <button class="btn preorder">Pre-Order Now</button>
{% else %}
  <button class="btn disabled" disabled>Sold Out</button>
{% endif %}
 
<!-- 2. Unless (negation condition) -->
{% unless customer.tags contains 'VIP' %}
  <p>Sign up for VIP status to receive special discounts!</p>
{% endunless; %}
 
<!-- 3. Case statement -->
{% case product.type %}
  {% when 'T-Shirt' %}
     <p>Check our apparel sizing chart.</p>
  {% when 'Shoes' %}
     <p>Review shoe sizing options.</p>
  {% else %}
     <p>Standard shipping guidelines apply.</p>
{% endcase %}

<!-- For loop with limit, offset, and reversed parameters -->
<ul>
  {% for product in collections.all.products limit: 5 offset: 2 %}
    <li>
      {{ forloop.index }}: {{ product.title }} - 
      <!-- loop helpers -->
      {% if forloop.first %} (Starting Item) {% endif %}
      {% if forloop.last %} (Ending Item) {% endif %}
    </li>
  {% else %}
    <li>No products found in this collection.</li>
  {% endfor %}
</ul>
 
<!-- Tablerow generates HTML table structures automatically -->
<table>
  {% tablerow product in collection.products cols: 3 %}
    <a href="{{ product.url }}">{{ product.title }}</a>
  {% endtablerow %}
</table>

my-theme/
├── assets/          # CSS, JavaScript, images, and fonts loaded in pages
├── config/          # theme settings options and default configurations
│   ├── settings_data.json
│   └── settings_schema.json
├── layout/          # Theme wrapper files
│   ├── theme.liquid
│   └── password.liquid
├── locales/         # Translation JSON files for multi-language support
├── sections/        # Modular components that merchants can add/reorder
├── snippets/        # Reusable small helper HTML/Liquid blocks (imported via render)
└── templates/       # Page templates (now JSON format in OS 2.0)
    ├── index.json
    ├── product.json
    └── cart.json

<!-- sections/custom-hero.liquid -->
<div class="custom-hero" style="background-color: {{ section.settings.bg_color }};">
  <div class="hero-container">
    <h2>{{ section.settings.title }}</h2>
    
    <!-- Render block schemas -->
    {% for block in section.blocks %}
      <div class="hero-block" {{ block.shopify_attributes }}>
        {% case block.type %}
          {% when 'text' %}
            <p>{{ block.settings.body }}</p>
          {% when 'button' %}
            <a href="{{ block.settings.link }}" class="btn">{{ block.settings.label }}</a>
        {% endcase %}
      </div>
    {% endfor %}
  </div>
</div>
 
{% schema %}
{
  "name": "Custom Hero",
  "tag": "section",
  "class": "hero-section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Hero Title",
      "default": "Welcome to our Store"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#f4f4f4"
    }
  ],
  "blocks": [
    {
      "type": "text",
      "name": "Text Block",
      "settings": [
        {
          "type": "textarea",
          "id": "body",
          "label": "Text Content"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button Link",
      "settings": [
        {
          "type": "text",
          "id": "label",
          "label": "Button Label",
          "default": "Click Here"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Button Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Hero",
      "category": "Hero Elements",
      "blocks": [
        { "type": "text" }
      ]
    }
  ]
}
{% endschema %}

# Log in to a specific Shopify development store
shopify login --store my-dev-shop.myshopify.com
 
# Initialize a new theme from the Dawn starter repository
shopify theme init my-new-theme
 
# Start a local development server for the current directory
# (Generates a preview link and syncs changes in real-time)
shopify theme dev
 
# Run dev on a specific theme ID or remote store
shopify theme dev --store my-dev-shop.myshopify.com --theme 123456789
 
# Pull changes from the active theme on the remote store
shopify theme pull
 
# Publish local theme code to a development, staging, or live theme slot
shopify theme push
 
# Compile or run checks on Shopify theme syntax constraints
shopify theme check

# Query: Fetch list of products, variants, inventory, and metafields
query GetProductsWithMetafields {
  products(first: 10) {
    edges {
      node {
        id
        title
        handle
        status
        metafield(namespace: "custom", key: "internal_notes") {
          value
        }
        variants(first: 5) {
          edges {
            node {
              id
              title
              price
              inventoryQuantity
              sku
            }
          }
        }
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

query {
  products(first: 5) {
    edges {
      node {
        id
      }
    }
  }
  # Fetch API usage information in the response payload
  cost {
    requestedQueryCost
    actualQueryCost
    throttleStatus {
      maximumAvailable
      currentlyAvailable
      restoreRate
    }
  }
}

# Mutation: Create a cart and add item variants
mutation CreateCartWithLineItem($variantId: ID!, $quantity: Int!) {
  cartCreate(
    input: {
      lines: [
        {
          merchandiseId: $variantId
          quantity: $quantity
        }
      ]
    }
  ) {
    cart {
      id
      checkoutUrl
      lines(first: 10) {
        edges {
          node {
            id
            quantity
            merchandise {
              ... on ProductVariant {
                id
                title
                price {
                  amount
                  currencyCode
                }
              }
            }
          }
        }
      }
    }
    userErrors {
      field
      message
    }
  }
}

// Node.js Express middleware example
const express = require('express');
const crypto = require('crypto');
const app = express();
 
// Note: MUST capture raw body string for accurate HMAC calculation
app.post('/webhooks/order-created', express.raw({ type: 'application/json' }), (req, res) => {
    const hmacHeader = req.headers['x-shopify-hmac-sha256'];
    const apiSecret = process.env.SHOPIFY_API_SECRET;
    
    const hash = crypto
        .createHmac('sha256', apiSecret)
        .update(req.body, 'utf8')
        .digest('base64');
        
    if (hash === hmacHeader) {
        // HMAC signature verified, process order queue
        const payload = JSON.parse(req.body.toString());
        console.log(`Order ${payload.id} received successfully.`);
        res.status(200).send('Verified');
    } else {
        // Security check failed
        console.warn('Webhook verification check failed.');
        res.status(401).send('Unauthorized');
    }
});