create-easel-theme 0.1.0 → 0.2.2

package/README.md

@@ -1,6 +1,6 @@
 # create-easel-theme
 
-Create a focused Shopify Liquid theme with Easel, Vite, and your choice of tools. The interactive UI uses [Clack](https://github.com/bombshell-dev/clack).
+Scaffold a focused Shopify Liquid theme with Vite and Easel. Choose TypeScript or JavaScript, optional Alpine, React or Vue, and plain CSS or Tailwind CSS through a [Clack](https://github.com/bombshell-dev/clack) prompt.
 
 ```sh
 npm create easel-theme@latest my-theme
@@ -43,14 +43,14 @@ Existing folders must be empty apart from `.git` and `.DS_Store`, which are pres
 - Plain CSS (default) or Tailwind CSS.
 - Optional dependency installation using npm, pnpm, Yarn, or Bun. The manager is detected from the invoking package manager; use `--package-manager` to override it.
 
-The output is a standalone project using the published `vite-plugin-shopify-easel` package. It does not depend on this repository or on the scaffolder at runtime. The current templates target Easel `0.1.0` and require Node.js 22.12.0 or newer.
+The output is a standalone project using the published `vite-plugin-shopify-easel` package. It does not depend on this repository or on the scaffolder at runtime. The current templates target Easel `0.2.2` and require Node.js 22.12.0 or newer.
 
-The starter includes a homepage counter, a 404 page, theme settings, and translations. It is deliberately not a complete commerce theme. Framework integrations use their official Vite plugins where applicable, and include Theme Editor initialization and cleanup. React includes its development preamble.
+The starter includes a homepage counter, theme settings, translations, generic JSON templates and sections for the standard storefront page types, `theme.liquid` and `password.liquid` layouts, and a Liquid gift card template. Customer account templates are intentionally omitted because current customer accounts operate independently of themes. Shopify's default robots and agent-discovery templates are left unchanged. Metaobject templates are definition-specific and should be added when those definitions enable web pages. The generic sections are starting points rather than complete commerce features or a production design. Framework integrations use their official Vite plugins where applicable, and include Theme Editor initialization and cleanup. React includes its development preamble.
 
 ## Non-interactive use
 
 ```sh
-pnpm create:theme ../my-theme --yes --language ts --framework vue --tailwind --no-install
+npm create easel-theme@latest my-theme -- --yes --language ts --framework vue --tailwind --no-install
 ```
 
 Flags:
@@ -79,7 +79,7 @@ Without an interactive terminal, or in CI, a directory is required, prompts are
 - The CLI does not authenticate with Shopify, create stores, push themes, initialize Git, or change global package-manager configuration.
 - The CLI invokes the selected package manager directly, without interpolating the destination into a shell command. pnpm installation uses `--ignore-workspace` to avoid installing into an unrelated ancestor workspace.
 
-After generation, normal Vite commands and Shopify CLI take over. Easel does not wrap either tool. Stop development before building and deploy the generated Liquid loader alongside its matching assets.
+After generation, normal Vite commands and Shopify CLI take over. Easel does not wrap either tool. Run `npm run check` for source and build validation, `npm run check:theme` for Shopify Theme Check, or `npm run check:all` for both. The Theme Check scripts require Shopify CLI to be installed separately. Stop development before building and deploy the generated Liquid loader alongside its matching assets.
 
 ## Development
 
@@ -97,4 +97,4 @@ The CLI is TypeScript bundled with tsup. One base theme is composed with small f
 
 The repository's `test/create.test.js` covers generation, validation, filesystem safety, automation, and installation outcomes. The package's `test/install.test.js` also checks signal-handler ordering and cleanup. The package smoke test installs the actual tarball, exercises the npm executable, and installs and checks all 16 language/framework/styling combinations outside the repository. `pnpm test:theme-check` also validates the generated Liquid variants.
 
-Publishing this package is separate from publishing the Vite plugin. No scaffolder release workflow or npm trusted publisher is configured yet; see the repository's `RELEASING.md` for the current release boundary.
+The generator and Vite plugin share a version and trusted-publishing workflow; see the repository's `RELEASING.md` for the release contract.

package/dist/cli.js

@@ -22,7 +22,7 @@ function assertTargetDirectory(target) {
 import { resolve as resolve3 } from "path";
 
 // package.json
-var version = "0.1.0";
+var version = "0.2.2";
 
 // src/generate.ts
 import {
@@ -191,7 +191,7 @@ function projectPackage(options) {
   const dependencies = {};
   const devDependencies = {
     vite: "8.2.2",
-    "vite-plugin-shopify-easel": "0.1.0"
+    "vite-plugin-shopify-easel": "0.2.2"
   };
   if (typescript) devDependencies.typescript = "5.9.3";
   if (options.framework === "alpine") {
@@ -217,6 +217,7 @@ function projectPackage(options) {
     devDependencies["@tailwindcss/vite"] = "4.3.3";
   }
   const typecheck = options.framework === "vue" ? "vue-tsc" : "tsc";
+  const codeCheck = typescript ? `${typecheck} --noEmit && vite build` : "vite build";
   return {
     name: packageNameFor(options.target),
     private: true,
@@ -225,7 +226,9 @@ function projectPackage(options) {
     scripts: {
       dev: "vite",
       build: "vite build",
-      check: typescript ? `${typecheck} --noEmit && vite build` : "vite build"
+      check: codeCheck,
+      "check:theme": "shopify theme check",
+      "check:all": `${codeCheck} && shopify theme check`
     },
     ...Object.keys(dependencies).length ? { dependencies } : {},
     devDependencies
@@ -290,7 +293,7 @@ Shopify CLI is installed and authenticated separately. The notification flag is
 
 ## Build and deploy
 
-Stop the Vite development server, run \`npm run check\`, then use Shopify CLI to preview or deploy the theme. \`npm run build\` builds without the additional TypeScript check.
+Stop the Vite development server, then run \`npm run check:all\` before using Shopify CLI to preview or deploy the theme. This runs the TypeScript and Vite checks followed by Shopify Theme Check. Use \`npm run check\` when Shopify CLI is unavailable, or \`npm run build\` to build without the additional checks.
 
 Deploy \`snippets/easel-assets.liquid\` together with its matching built assets. These generated files are ignored by Git. Never delete unrelated assets or Easel's ownership state to force a build.
 
@@ -298,7 +301,7 @@ Deploy \`snippets/easel-assets.liquid\` together with its matching built assets.
 
 Shopify directories live at the project root. Source lives in \`src/\`; Easel is configured in \`vite.config.${options.language}\`. The homepage contains a small counter to demonstrate the selected tools, with initialization and cleanup for Theme Editor section reloads.
 
-This is a minimal starter, not a complete commerce theme: product, collection, cart, and other storefront features are yours to build. Update theme metadata in \`config/settings_schema.json\` for your project.
+The starter includes generic JSON templates and sections for products, collections, the collection list, cart, pages, contact, blogs, articles, search, password access, and 404 responses. It also includes theme and password layouts and a Liquid gift card template. These are accessible starting points, not complete commerce features or a production design. Customer account templates are intentionally omitted because current customer accounts operate independently of themes. Shopify's default robots and agent-discovery templates are left unchanged, and metaobject templates should be added for the definitions that enable web pages. Update theme metadata in \`config/settings_schema.json\` for your project.
 
 Start with one shared entry. Add named page bundles only when selective loading is useful; see [the named bundles example](https://github.com/BillyNoyes/Easel/tree/main/examples/named-bundles).
 

package/dist/templates/js/base/config/settings_schema.json

@@ -2,7 +2,7 @@
   {
     "name": "theme_info",
     "theme_name": "__THEME_NAME__",
-    "theme_version": "0.1.0",
+    "theme_version": "0.2.2",
     "theme_author": "Billy Noyes",
     "theme_documentation_url": "https://github.com/BillyNoyes/Easel",
     "theme_support_url": "https://github.com/BillyNoyes/Easel/issues"

package/dist/templates/js/base/layout/password.liquid

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="{{ request.locale.iso_code }}">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="canonical" href="{{ canonical_url | escape }}">
+    <link rel="icon" type="image/svg+xml" href="{{ 'easel.svg' | asset_url }}">
+    <title>{{ shop.name | escape }}</title>
+    <style>
+      :root { --theme-background: {{ settings.background }}; --theme-foreground: {{ settings.foreground }}; }
+    </style>
+    {% render 'easel-assets' %}
+    {{ content_for_header }}
+  </head>
+  <body>
+    <a class="skip-link" href="#MainContent">{{ 'accessibility.skip_to_content' | t }}</a>
+    <main id="MainContent" tabindex="-1">{{ content_for_layout }}</main>
+  </body>
+</html>

package/dist/templates/js/base/locales/en.default.json

@@ -2,6 +2,37 @@
   "accessibility": {
     "skip_to_content": "Skip to content"
   },
+  "article": {
+    "back_to_blog": "Back to {{ blog }}"
+  },
+  "blog": {
+    "empty": "No articles found."
+  },
+  "cart": {
+    "title": "Cart",
+    "empty": "Your cart is empty.",
+    "continue_shopping": "Continue shopping",
+    "quantity": "Quantity",
+    "subtotal": "Subtotal",
+    "update": "Update cart",
+    "checkout": "Checkout"
+  },
+  "collection": {
+    "empty": "No products found."
+  },
+  "collections": {
+    "title": "Collections",
+    "empty": "No collections found."
+  },
+  "contact": {
+    "title": "Contact us",
+    "success": "Thanks for contacting us. We'll get back to you soon.",
+    "name": "Name",
+    "email": "Email",
+    "phone": "Phone number",
+    "message": "Message",
+    "send": "Send"
+  },
   "general": {
     "not_found": "Page not found",
     "return_home": "Return home",
@@ -9,5 +40,27 @@
       "decrease": "Decrease count",
       "increase": "Increase count"
     }
+  },
+  "gift_card": {
+    "disabled": "This gift card is disabled.",
+    "expired": "This gift card has expired.",
+    "expires_on": "Expires {{ date }}.",
+    "code": "Gift card code",
+    "continue_shopping": "Continue shopping"
+  },
+  "password": {
+    "password": "Store password",
+    "enter": "Enter store"
+  },
+  "product": {
+    "add_to_cart": "Add to cart",
+    "sold_out": "Sold out"
+  },
+  "search": {
+    "title": "Search",
+    "label": "Search the store",
+    "submit": "Search",
+    "results": "{{ count }} results for “{{ terms }}”",
+    "empty": "No results found."
   }
 }

package/dist/templates/js/base/locales/en.default.schema.json

@@ -3,12 +3,42 @@
     "not_found_name": "404 page"
   },
   "sections": {
+    "contact_form": {
+      "name": "Contact form"
+    },
     "hero": {
       "name": "Hero",
       "heading": "Heading",
       "default_heading": "__THEME_NAME__",
       "text": "Text",
       "default_text": "<p>Build the storefront experience here.</p>"
+    },
+    "main_article": {
+      "name": "Article"
+    },
+    "main_blog": {
+      "name": "Blog"
+    },
+    "main_cart": {
+      "name": "Cart"
+    },
+    "main_collection": {
+      "name": "Collection"
+    },
+    "main_list_collections": {
+      "name": "Collection list"
+    },
+    "main_page": {
+      "name": "Page"
+    },
+    "main_password": {
+      "name": "Password page"
+    },
+    "main_product": {
+      "name": "Product"
+    },
+    "main_search": {
+      "name": "Search"
     }
   },
   "settings": {

package/dist/templates/js/base/sections/contact-form.liquid

@@ -0,0 +1,23 @@
+<section class="page contact">
+  <h2>{{ 'contact.title' | t }}</h2>
+  {% form 'contact' %}
+    {% if form.posted_successfully? %}<p>{{ 'contact.success' | t }}</p>{% endif %}
+    {{ form.errors | default_errors }}
+    <label for="ContactName-{{ section.id }}">{{ 'contact.name' | t }}</label>
+    <input id="ContactName-{{ section.id }}" type="text" name="contact[name]" value="{{ form.name | escape }}" autocomplete="name">
+    <label for="ContactEmail-{{ section.id }}">{{ 'contact.email' | t }}</label>
+    <input id="ContactEmail-{{ section.id }}" type="email" name="contact[email]" value="{{ form.email | escape }}" autocomplete="email" required>
+    <label for="ContactPhone-{{ section.id }}">{{ 'contact.phone' | t }}</label>
+    <input id="ContactPhone-{{ section.id }}" type="tel" name="contact[phone]" value="{{ form.phone | escape }}" autocomplete="tel">
+    <label for="ContactMessage-{{ section.id }}">{{ 'contact.message' | t }}</label>
+    <textarea id="ContactMessage-{{ section.id }}" name="contact[body]" rows="8" required>{{ form.body | escape }}</textarea>
+    <button type="submit">{{ 'contact.send' | t }}</button>
+  {% endform %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.contact_form.name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/js/base/sections/main-article.liquid

@@ -0,0 +1,15 @@
+<article class="page article">
+  <a href="{{ blog.url }}">{{ 'article.back_to_blog' | t: blog: blog.title }}</a>
+  <header>
+    <h1>{{ article.title | escape }}</h1>
+    <p>{{ article.published_at | time_tag: format: 'date' }}</p>
+  </header>
+  <div class="rte">{{ article.content }}</div>
+</article>
+
+{% schema %}
+{
+  "name": "t:sections.main_article.name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/js/base/sections/main-blog.liquid

@@ -0,0 +1,28 @@
+<section class="page">
+  <h1>{{ blog.title | escape }}</h1>
+  {% paginate blog.articles by 12 %}
+    {% if blog.articles_count > 0 %}
+      <ul class="resource-list" role="list">
+        {% for article in blog.articles %}
+          <li>
+            <article class="card">
+              <h2><a href="{{ article.url }}">{{ article.title | escape }}</a></h2>
+              <p>{{ article.published_at | time_tag: format: 'date' }}</p>
+              {% if article.excerpt != blank %}<div class="rte">{{ article.excerpt }}</div>{% endif %}
+            </article>
+          </li>
+        {% endfor %}
+      </ul>
+      {{ paginate | default_pagination }}
+    {% else %}
+      <p>{{ 'blog.empty' | t }}</p>
+    {% endif %}
+  {% endpaginate %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_blog.name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/js/base/sections/main-cart.liquid

@@ -0,0 +1,31 @@
+<section class="page">
+  <h1>{{ 'cart.title' | t }}</h1>
+  {% if cart.item_count == 0 %}
+    <p>{{ 'cart.empty' | t }}</p>
+    <a href="{{ routes.all_products_collection_url }}">{{ 'cart.continue_shopping' | t }}</a>
+  {% else %}
+    {% form 'cart', cart %}
+      <ul class="cart-items" role="list">
+        {% for item in cart.items %}
+          <li class="cart-item">
+            <a href="{{ item.url }}">{{ item.product.title | escape }}</a>
+            {% unless item.product.has_only_default_variant %}<p>{{ item.variant.title | escape }}</p>{% endunless %}
+            <label for="CartQuantity-{{ forloop.index }}">{{ 'cart.quantity' | t }}</label>
+            <input id="CartQuantity-{{ forloop.index }}" type="number" name="updates[]" value="{{ item.quantity }}" min="0">
+            <p>{{ item.final_line_price | money }}</p>
+          </li>
+        {% endfor %}
+      </ul>
+      <p>{{ 'cart.subtotal' | t }}: {{ cart.total_price | money }}</p>
+      <button type="submit" name="update">{{ 'cart.update' | t }}</button>
+      <button type="submit" name="checkout">{{ 'cart.checkout' | t }}</button>
+    {% endform %}
+  {% endif %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_cart.name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/js/base/sections/main-collection.liquid

@@ -0,0 +1,25 @@
+<section class="page">
+  <header>
+    <h1>{{ collection.title | escape }}</h1>
+    {% if collection.description != blank %}<div class="rte">{{ collection.description }}</div>{% endif %}
+  </header>
+  {% paginate collection.products by 24 %}
+    {% if collection.products_count > 0 %}
+      <div class="resource-grid">
+        {% for product in collection.products %}
+          {% render 'product-card', product: product %}
+        {% endfor %}
+      </div>
+      {{ paginate | default_pagination }}
+    {% else %}
+      <p>{{ 'collection.empty' | t }}</p>
+    {% endif %}
+  {% endpaginate %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_collection.name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/js/base/sections/main-list-collections.liquid

@@ -0,0 +1,27 @@
+<section class="page">
+  <h1>{{ 'collections.title' | t }}</h1>
+  {% paginate collections by 24 %}
+    <div class="resource-grid">
+      {% for collection in collections %}
+        <article class="card">
+          <a href="{{ collection.url }}">
+            {% if collection.featured_image %}
+              {{ collection.featured_image | image_url: width: 720 | image_tag: loading: 'lazy', widths: '240, 360, 540, 720', sizes: '(min-width: 64rem) 20rem, 50vw', alt: collection.featured_image.alt | default: collection.title }}
+            {% endif %}
+            <h2>{{ collection.title | escape }}</h2>
+          </a>
+        </article>
+      {% else %}
+        <p>{{ 'collections.empty' | t }}</p>
+      {% endfor %}
+    </div>
+    {{ paginate | default_pagination }}
+  {% endpaginate %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_list_collections.name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/js/base/sections/main-page.liquid

@@ -0,0 +1,11 @@
+<section class="page">
+  <h1>{{ page.title | escape }}</h1>
+  <div class="rte">{{ page.content }}</div>
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_page.name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/js/base/sections/main-password.liquid

@@ -0,0 +1,17 @@
+<section class="page password">
+  <h1>{{ shop.name | escape }}</h1>
+  {% if shop.password_message != blank %}<div class="rte">{{ shop.password_message }}</div>{% endif %}
+  {% form 'storefront_password' %}
+    {{ form.errors | default_errors }}
+    <label for="StorefrontPassword-{{ section.id }}">{{ 'password.password' | t }}</label>
+    <input id="StorefrontPassword-{{ section.id }}" type="password" name="password" autocomplete="current-password" required>
+    <button type="submit">{{ 'password.enter' | t }}</button>
+  {% endform %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_password.name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/js/base/sections/main-product.liquid

@@ -0,0 +1,25 @@
+<section class="page product">
+  <div class="product__media">
+    {% if product.featured_image %}
+      {{ product.featured_image | image_url: width: 1200 | image_tag: widths: '360, 540, 720, 960, 1200', sizes: '(min-width: 48rem) 50vw, 100vw', alt: product.featured_image.alt | default: product.title }}
+    {% endif %}
+  </div>
+  <div class="product__details">
+    <h1>{{ product.title | escape }}</h1>
+    <p>{{ product.selected_or_first_available_variant.price | money }}</p>
+    {% if product.description != blank %}<div class="rte">{{ product.description }}</div>{% endif %}
+    {% form 'product', product %}
+      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+      <button type="submit" name="add"{% unless product.selected_or_first_available_variant.available %} disabled{% endunless %}>
+        {% if product.selected_or_first_available_variant.available %}{{ 'product.add_to_cart' | t }}{% else %}{{ 'product.sold_out' | t }}{% endif %}
+      </button>
+    {% endform %}
+  </div>
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_product.name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/js/base/sections/main-search.liquid

@@ -0,0 +1,28 @@
+<section class="page">
+  <h1>{{ 'search.title' | t }}</h1>
+  <form action="{{ routes.search_url }}" method="get" role="search">
+    <label for="SearchInput-{{ section.id }}">{{ 'search.label' | t }}</label>
+    <input id="SearchInput-{{ section.id }}" type="search" name="q" value="{{ search.terms | escape }}">
+    <button type="submit">{{ 'search.submit' | t }}</button>
+  </form>
+  {% if search.performed %}
+    {% paginate search.results by 24 %}
+      <p>{{ 'search.results' | t: count: search.results_count, terms: search.terms }}</p>
+      <ul class="resource-list" role="list">
+        {% for item in search.results %}
+          <li><a href="{{ item.url }}">{{ item.title | escape }}</a></li>
+        {% else %}
+          <li>{{ 'search.empty' | t }}</li>
+        {% endfor %}
+      </ul>
+      {{ paginate | default_pagination }}
+    {% endpaginate %}
+  {% endif %}
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.main_search.name",
+  "settings": []
+}
+{% endschema %}

package/dist/templates/js/base/snippets/product-card.liquid

@@ -0,0 +1,15 @@
+{% doc %}
+  Renders a product link with its featured image and price.
+
+  @param {product} product - The product to render.
+{% enddoc %}
+
+<article class="card">
+  <a href="{{ product.url }}">
+    {% if product.featured_image %}
+      {{ product.featured_image | image_url: width: 720 | image_tag: loading: 'lazy', widths: '240, 360, 540, 720', sizes: '(min-width: 64rem) 20rem, 50vw', alt: product.featured_image.alt | default: product.title }}
+    {% endif %}
+    <h2>{{ product.title | escape }}</h2>
+  </a>
+  <p>{{ product.price | money }}</p>
+</article>

package/dist/templates/js/base/src/style.css

@@ -54,8 +54,81 @@ output {
 }
 
 .hero,
-.not-found {
+.not-found,
+.page {
   margin-inline: auto;
   max-width: 64rem;
   padding: 4rem 1.5rem;
 }
+
+.page > :first-child,
+.card > :first-child {
+  margin-block-start: 0;
+}
+
+.page > :last-child,
+.card > :last-child {
+  margin-block-end: 0;
+}
+
+.resource-grid,
+.resource-list,
+.cart-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+  gap: 1.5rem;
+  padding: 0;
+  list-style: none;
+}
+
+.card img,
+.product__media img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.product {
+  display: grid;
+  gap: 2rem;
+}
+
+form {
+  display: grid;
+  gap: 0.75rem;
+  max-width: 40rem;
+}
+
+input:not([type='hidden']),
+textarea {
+  width: 100%;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  padding: 0.75rem;
+}
+
+.rte,
+.rte img,
+.rte iframe {
+  max-width: 100%;
+}
+
+.gift-card__balance {
+  font-size: 2rem;
+}
+
+.gift-card__code {
+  display: block;
+  width: fit-content;
+  margin-block: 1rem;
+  border: 1px solid currentColor;
+  padding: 0.75rem;
+}
+
+@media (min-width: 48rem) {
+  .product {
+    grid-template-columns: 1fr 1fr;
+  }
+}

package/dist/templates/js/base/templates/article.json

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-article"
+    }
+  },
+  "order": ["main"]
+}

package/dist/templates/js/base/templates/blog.json

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-blog"
+    }
+  },
+  "order": ["main"]
+}

package/dist/templates/js/base/templates/cart.json

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-cart"
+    }
+  },
+  "order": ["main"]
+}

package/dist/templates/js/base/templates/collection.json

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "main": {
+      "type": "main-collection"
+    }
+  },
+  "order": ["main"]
+}

package/dist/templates/js/base/templates/gift_card.liquid

@@ -0,0 +1,35 @@
+{% layout none %}
+
+<!doctype html>
+<html lang="{{ request.locale.iso_code }}">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="canonical" href="{{ canonical_url | escape }}">
+    <link rel="icon" type="image/svg+xml" href="{{ 'easel.svg' | asset_url }}">
+    <title>{{ gift_card.product.title | default: shop.name | escape }}</title>
+    <style>
+      :root { --theme-background: {{ settings.background }}; --theme-foreground: {{ settings.foreground }}; }
+    </style>
+    {% render 'easel-assets' %}
+    {{ content_for_header }}
+  </head>
+  <body>
+    <main class="page gift-card">
+      <h1>{{ gift_card.product.title | default: shop.name | escape }}</h1>
+      <p class="gift-card__balance">{{ gift_card.balance | money_with_currency }}</p>
+      {% unless gift_card.enabled %}
+        <p>{{ 'gift_card.disabled' | t }}</p>
+      {% endunless %}
+      {% if gift_card.expired %}
+        <p>{{ 'gift_card.expired' | t }}</p>
+      {% elsif gift_card.expires_on %}
+        {% assign expiration_date = gift_card.expires_on | date: format: 'date' %}
+        <p>{{ 'gift_card.expires_on' | t: date: expiration_date }}</p>
+      {% endif %}
+      <p>{{ 'gift_card.code' | t }}</p>
+      <code class="gift-card__code">{{ gift_card.code | format_code }}</code>
+      <a href="{{ shop.url }}">{{ 'gift_card.continue_shopping' | t }}</a>
+    </main>
+  </body>
+</html>