Home, collections and trust
Move from the first-view proposition to collections and products, supported by attributable evidence.
Hero, heading and video
Keep the heading and primary destination in HTML. Let a poster carry the first view and expose video controls. Review crop and copy length on phones.
Data and dependencies
- heading/summary are text; poster is image_picker.
- video is a Shopify video setting; collection is a collection setting.
Interaction logic
- Show the heading, poster and link first.
- Expose playback controls and avoid forced autoplay.
Example code · snippets/ww-hero.liquid
<section aria-labelledby="Hero-{{ section.id }}">
<h1 id="Hero-{{ section.id }}">{{ section.settings.heading | escape }}</h1>
<p>{{ section.settings.summary | escape }}</p>
{% if section.settings.poster != blank %}
{{ section.settings.poster | image_url: width: 1600 | image_tag: widths: '480, 800, 1200, 1600', sizes: '100vw', loading: 'eager' }}
{% endif %}
{% if section.settings.video != blank %}
{{ section.settings.video | video_tag: controls: true, autoplay: false, preload: 'none' }}
{% endif %}
{% if section.settings.collection != blank %}
<a href="{{ section.settings.collection.url | escape }}">Explore {{ section.settings.collection.title | escape }}</a>
{% endif %}
</section>
Acceptance checks
- Keep one main H1 outside the image.
- Check long headings, media failure and phone controls.
Use this fragment for the main page hero. Use the appropriate heading level for a section further down the page.
Collection selection and switching
Render collection positioning and real links before enhancing them into switchable panels. Keep names, images and introductions tied to the same collection record.
Data and dependencies
- Collection block settings and actual collection objects.
- Collection custom.selection_summary: single-line text.
Interaction logic
- Keep a readable default and an explicit selected state.
- Switch visibility without replacing destination links.
Example code · snippets/ww-series.liquid
<section aria-labelledby="Series-{{ section.id }}">
<h2 id="Series-{{ section.id }}">Choose a collection</h2>
{% for block in section.blocks %}
{% assign series = block.settings.collection %}
{% if series != blank %}
<article {{ block.shopify_attributes }}>
<h3><a href="{{ series.url | escape }}">{{ series.title | escape }}</a></h3>
<p>{{ series.metafields.custom.selection_summary.value | escape }}</p>
</article>
{% endif %}
{% endfor %}
</section>
Acceptance checks
- Open the correct collection from every entry.
- Check keyboard access, repeated instances and phones.
The example is a stable linked-list baseline. A tab enhancement also needs aria-controls, keyboard movement and panel state.
Official documentation
WESWOO guides
Product cards, prices and purchase entry
Make names, key facts and prices comparable. Send multi-variant products to option selection and reserve direct add for a single default variant.
Data and dependencies
- Product data and selected_or_first_available_variant.
- custom.key_spec contains a short verifiable fact.
Interaction logic
- Offer direct add for one available default variant.
- Use the product page for options or unavailable items.
Example code · snippets/ww-product-card.liquid
{% assign card_product = product %}
{% assign card_variant = card_product.selected_or_first_available_variant %}
{% assign card_form_id = 'CardProduct-' | append: section.id | append: '-' | append: card_product.id %}
<article>
<a href="{{ card_product.url | escape }}">
{% if card_product.featured_image %}
{{ card_product.featured_image | image_url: width: 640 | image_tag: widths: '320, 480, 640', sizes: '(max-width: 749px) 45vw, 25vw', loading: 'lazy' }}
{% endif %}
<h3>{{ card_product.title | escape }}</h3>
</a>
<p>{{ card_product.metafields.custom.key_spec.value | escape }}</p>
<p>{{ card_variant.price | money_with_currency }}</p>
{% if card_product.has_only_default_variant and card_variant.available %}
{% form 'product', card_product, id: card_form_id %}
<input type="hidden" name="id" value="{{ card_variant.id }}">
<button type="submit">Add to cart</button>
{% endform %}
{% else %}
<a href="{{ card_product.url | escape }}">Choose options and check availability</a>
{% endif %}
</article>
Acceptance checks
- Compare model, price and currency with the detail page.
- Check missing images, long names and form errors.
Do not present a starting price as the price of every variant. The caller must pass the product object.
Official documentation
Implementation references
WESWOO guides
Awards, reviews and attributable evidence
Establish source, date, model and original review context before choosing a grid or carousel. Media and stars do not replace attribution; review apps retain ownership of their actual records.
Data and dependencies
- public_evidence: list.metaobject_reference.
- title/context are text and source is an approved URL.
Interaction logic
- Render text and links before enhancement.
- Use an existing theme carousel with pausable autoplay.
Example code · snippets/ww-proof.liquid
{% assign evidence = shop.metafields.custom.public_evidence.value %}
{% if evidence != blank %}
<ul class="ww-evidence">
{% for item in evidence %}
<li>
<h3>{{ item.title.value | escape }}</h3>
<p>{{ item.context.value | escape }}</p>
{% if item.source.value != blank %}
<a href="{{ item.source.value | escape }}">Read the source</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
Acceptance checks
- Open each source and verify attribution and model scope.
- Check swiping, dots and content without the plugin.
The fragment renders supplied evidence; it does not generate reviews, ratings or customer relationships.
Official documentation
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.
References checked 2026-11-12