Project portfolio Browse selected work

Shopify Plus Upgrade Monthly Fee Reduction + Up to $4800 Development Fee Credit - Exclusive WesWoo Offer

Developer modules / Navigation, announcements and search

Navigation, announcements and search

Connect shoppers to collections, guides and support before enhancing menus and search.

Announcements, conditions and moving text

Read one announcement record with conditions and a detail link. Make the static text readable before adding motion, and review announcements and reassurance copy against the same policy source.

Data and dependencies

  • shop.custom.announcement is a metaobject reference.
  • text is single-line text; destination is a URL.

Interaction logic

  • Show plain text without a destination; omit an empty message.
  • Allow motion to pause and respect reduced-motion preferences.
Example code · snippets/ww-announcement.liquid
Liquid · WESWOO
{% assign announcement = shop.metafields.custom.announcement.value %}
{% if announcement.text.value != blank %}
  <aside class="ww-announcement" aria-label="Store announcement">
    {% if announcement.destination.value != blank %}
      <a href="{{ announcement.destination.value | escape }}">{{ announcement.text.value | escape }}</a>
    {% else %}
      <p>{{ announcement.text.value | escape }}</p>
    {% endif %}
  </aside>
{% endif %}

Acceptance checks

  • Keep one complete announcement in the DOM.
  • Check currency, conditions, dates and the mobile first view.

The example is a static baseline. Populate it only with applicable shipping, warranty or promotion terms.

Read it, integrate it, verify it

  1. Choose a module and confirm the data contract.
  2. Connect the fragment to the current theme or framework.
  3. 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