Data and implementation foundations

Define ownership and inputs before choosing a Liquid or Headless implementation.

Editable modules and section contracts

Separate headings, content and destinations into settings. Let sections own layout, snippets own reusable rendering, and templates compose the page. Validate one real content record before reuse.

Data and dependencies

heading: text; body: richtext; destination: URL.
Use section.id for distinct heading and control IDs.

Interaction logic

Render the link only when a destination exists.
Content edits should preserve layout and document structure.

Example code · sections/ww-intro.liquid

Liquid · WESWOO

<section class="ww-intro" aria-labelledby="Intro-{{ section.id }}">
  <h2 id="Intro-{{ section.id }}">{{ section.settings.heading | escape }}</h2>
  <div>{{ section.settings.body }}</div>
  {% if section.settings.destination != blank %}
    <a href="{{ section.settings.destination | escape }}">
      {{ section.settings.link_label | escape }}
    </a>
  {% endif %}
</section>
{% schema %}
{
  "name": "WW introduction",
  "settings": [
    {"type":"text","id":"heading","label":"Heading","default":"Explore the collection"},
    {"type":"richtext","id":"body","label":"Introduction"},
    {"type":"url","id":"destination","label":"Destination"},
    {"type":"text","id":"link_label","label":"Link label","default":"Explore"}
  ],
  "presets":[{"name":"WW introduction"}]
}
{% endschema %}

Acceptance checks

Add two instances and check for duplicate IDs.
Check empty content, long headings, phones and keyboard order.

This example is a standalone section. Other fragments require the documented template context. Move user-facing strings into project locale files.

Official documentation

Implementation references

Shopify/dawn · sections/header.liquid

WESWOO guides

Shared specifications, policies and resources

Create a field dictionary that separates shared product facts, variant differences and reusable entries. Render only populated public records and keep product, collection, help and summary surfaces consistent.

Data and dependencies

custom.specification_rows: list.metaobject_reference.
Define label, spec_value and unit as single-line text fields.

Interaction logic

Handle draft, missing and removed entries explicitly.
Read variant-specific values from the actual variant.

Example code · snippets/ww-specifications.liquid

Liquid · WESWOO

{% assign rows = product.metafields.custom.specification_rows.value %}
{% if rows != blank %}
  <table>
    <caption>{{ product.title | escape }} — specifications</caption>
    <tbody>
      {% for row in rows %}
        {% if row.label.value != blank and row.spec_value.value != blank %}
          <tr>
            <th scope="row">{{ row.label.value | escape }}</th>
            <td>{{ row.spec_value.value | escape }} {{ row.unit.value | escape }}</td>
          </tr>
        {% endif %}
      {% endfor %}
    </tbody>
  </table>
{% endif %}

Acceptance checks

Compare one fact across cards, tables and explanations.
Recheck every reference after a value or unit changes.

The custom field names are sample definitions. They do not create admin data or grant storefront access.

Official documentation

WESWOO guides

Moving the same module to Headless

Keep the field and purchase-state contract while replacing Liquid reads with server-side Storefront queries. The chosen framework owns routes, rendering and builds; connect commerce primitives for the installed Hydrogen version.

Data and dependencies

Take handle from the current route and country/language from market context.
Query only the facts needed by this module.

Interaction logic

Return a real 404 for an absent product.
Follow pagination instead of treating the first ten variants as complete.

Example code · queries/product.graphql

GraphQL · WESWOO

query ProductFacts($handle: String!, $country: CountryCode!, $language: LanguageCode!)
@inContext(country: $country, language: $language) {
  product(handle: $handle) {
    id
    title
    description
    variants(first: 10) {
      nodes {
        id
        title
        availableForSale
        price { amount currencyCode }
      }
      pageInfo { hasNextPage endCursor }
    }
  }
}

Acceptance checks

Compare initial HTML, market changes and cart for one model.
Check framework versions, lockfiles and cache isolation.

This is a query document, not an authentication or request adapter. Keep private credentials on the server and follow the correct legacy or 2026-10 documentation.

Official documentation

Implementation references

Shopify/hydrogen · README.md

WESWOO guides

Read it, integrate it, verify it

Choose a module and confirm the data contract.
Connect the fragment to the current theme or framework.
Check real variants, markets and recovery states.

Examples target Shopify Online Store 2.0 themes. Headless has separate data and version boundaries. Integrate fragments with actual fields, theme components and locale files.

Architecture references

Original educational examples with Shopify documentation and pinned upstream references. Follow the applicable license when adopting repository code.

Shopify/dawn · Licensecommit 3e9ee2281dc4 · Shopify-integration theme license; architecture reference without copying the implementation.

Shopify/hydrogen · Licensecommit 9e358a2462ba · MIT; retain copyright and license when using substantial code.

References checked 2026-11-12