Content, brand and partnerships
Connect real articles, business identity, locations and partnership information.
Article cards, authors and task categories
Use titles that state the task and summaries that identify the audience. Preserve real contributors, organize tags by use and connect products and guides for a stated reason.
Data and dependencies
- Article title, summary, author and update time.
- custom.author_profile: a reviewed page reference.
Interaction logic
- Link contributor profiles only when supplied.
- Tag destinations should show the intended article scope.
Example code · snippets/ww-article-summary.liquid
<article>
<h2><a href="{{ article.url | escape }}">{{ article.title | escape }}</a></h2>
<p>{{ article.excerpt_or_content | strip_html | truncatewords: 28 | escape }}</p>
<p>By {{ article.author | escape }} · {{ article.updated_at | date: '%Y-%m-%d' }}</p>
{% if article.metafields.custom.author_profile.value != blank %}
<a href="{{ article.metafields.custom.author_profile.value.url | escape }}">About the contributor</a>
{% endif %}
<ul>
{% for tag in article.tags %}
<li>{{ tag | link_to_tag: tag }}</li>
{% endfor %}
</ul>
</article>
Acceptance checks
- Compare contributor roles with the business information.
- Check titles, dates and links between listing and body.
A template does not establish credentials or customer relationships. Preserve actual attribution without invented endorsements.
Brand, milestones and process evidence
Move from the actual company proposition to milestones, processes and inspection records. Attach dates, scope and evidence to claims while keeping facts in readable text.
Data and dependencies
- shop.custom.milestones: list.metaobject_reference.
- date is a date; title/scope are text; source is a URL.
Interaction logic
- Do not present an unsupported milestone as an established outcome.
- Retain readable facts and sources when media fails.
Example code · snippets/ww-brand-evidence.liquid
{% assign milestones = shop.metafields.custom.milestones.value %}
{% if milestones != blank %}
<ol>
{% for milestone in milestones %}
<li>
<time datetime="{{ milestone.date.value | date: '%Y-%m-%d' }}">{{ milestone.date.value | date: '%Y-%m' }}</time>
<h3>{{ milestone.title.value | escape }}</h3>
<p>{{ milestone.scope.value | escape }}</p>
{% if milestone.source.value != blank %}
<a href="{{ milestone.source.value | escape }}">View the evidence</a>
{% endif %}
</li>
{% endfor %}
</ol>
{% endif %}
Acceptance checks
- Check identity, dates, responsibilities and permission.
- Verify model scope and conditions of process evidence.
The fragment renders supplied records and contains no claimed business outcomes. Reference schedules are not delivery commitments.
Store cards, addresses and maps
Render readable names, addresses, opening hours and contact information before map navigation. Use one location record for filters and markers.
Data and dependencies
- shop.custom.public_stores: list.metaobject_reference.
- name/address/opening_hours are text; map_url is an approved URL.
Interaction logic
- Keep addresses readable without the map.
- Synchronize list and markers after city selection.
Example code · snippets/ww-store-list.liquid
{% assign stores = shop.metafields.custom.public_stores.value %}
<ul>
{% for store in stores %}
<li>
<h2>{{ store.name.value | escape }}</h2>
<p>{{ store.address.value | escape }}</p>
<p>{{ store.opening_hours.value | escape }}</p>
{% if store.map_url.value != blank %}
<a href="{{ store.map_url.value | escape }}">Open the map for {{ store.name.value | escape }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
Acceptance checks
- Check actual address, timezone, hours and destination.
- Check phone map links and map failures.
Do not create locations without actual records. Integrate third-party maps according to project privacy and performance requirements.
Official documentation
Affiliates, distributors and subscriptions
Separate partnership applications from newsletter requests. State audience, region and review steps for applications and delivery conditions for subscriptions, using actual form outcomes.
Data and dependencies
- Use a contact form with an application type for partnerships.
- Use a customer form for subscriptions and real benefit terms.
Interaction logic
- Acceptance is not partnership approval.
- Keep the page usable after dismissing a subscription overlay.
Example code · snippets/ww-partner-request.liquid
{% assign partner_form_id = 'Partner-' | append: section.id %}
{% form 'contact', id: partner_form_id %}
<label for="Partner-Type-{{ section.id }}">Request type</label>
<select id="Partner-Type-{{ section.id }}" name="contact[Request type]">
<option value="Distributor">Distributor application</option>
<option value="Affiliate">Affiliate inquiry</option>
</select>
<label for="Partner-Email-{{ section.id }}">Business email</label>
<input id="Partner-Email-{{ section.id }}" type="email" name="contact[email]" required>
<button type="submit">Send application</button>
{% if form.posted_successfully? %}<p role="status">Application submitted for review.</p>{% endif %}
<div role="alert">{{ form.errors | default_errors }}</div>
{% endform %}
Example code · snippets/ww-newsletter.liquid
{% assign newsletter_id = 'Newsletter-' | append: section.id %}
{% form 'customer', id: newsletter_id %}
<input type="hidden" name="contact[tags]" value="newsletter">
<label for="Newsletter-Email-{{ section.id }}">Email for product news</label>
<input id="Newsletter-Email-{{ section.id }}" type="email" name="contact[email]" autocomplete="email" required>
<p>Subscribe to product news. Read the privacy policy before submitting.</p>
{% if shop.privacy_policy != blank %}<a href="{{ shop.privacy_policy.url | escape }}">Privacy policy</a>{% endif %}
<button type="submit">Subscribe</button>
{% if form.posted_successfully? %}<p role="status">Your request was submitted.</p>{% endif %}
<div role="alert">{{ form.errors | default_errors }}</div>
{% endform %}
Acceptance checks
- Check routing and ownership for both application types.
- Test email, error feedback and the privacy link.
The fragments do not configure commissions, pricing or approval. Connect consent and future messages to the actual account and applicable requirements.
Official documentation
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.
References checked 2026-11-12