Your quiz result on every page of the store

Goal: Priya took the quiz and has a store account. Wherever she goes on the store she sees “Your skin type: Dry - See your routine” in the header, and the link opens her results again. Products made for dry skin say “Recommended for your dry skin” under the title. Every collection page opens with a “Picked for your dry skin” strip. Shoppers who are not signed in, or have not taken the quiz, see the store as it was.

Uses: the customer metafields Octane AI writes when Shopify Customers is on for the quiz (namespace octaneai), Liquid in Custom Liquid sections and blocks, and product tags you already manage. Nothing to install; no API key. Available on the Plus and Enterprise plans.

Before you start

• In the quiz, turn on Integrations > Shopify Customers. The Storefront panel there prints this quiz’s real keys. The keys below (q3f9a12cd_...) belong to a fictional store; copy yours from the panel.
• Tag each product with the result it suits: skin:dry, skin:oily, skin:combination. The word after skin: must match the result name. Case does not matter, because the code lowercases both sides.
• A question’s key contains - (for example q3f9a12cd_choice-k3j9x), so always read a metafield with the bracket form customer.metafields.octaneai['<key>'].

1. The results bar (every page)

In the theme editor, Header group, Add section, Custom Liquid:

{% if customer %}
  {% assign octane_result = customer.metafields.octaneai['q3f9a12cd_winner'].value %}
  {% assign octane_link = customer.metafields.octaneai['q3f9a12cd_result_url'].value %}
  {% if octane_result != blank %}
    <div class="octane-bar">
      Your skin type: <strong>{{ octane_result }}</strong>
      {% if octane_link != blank %}<a href="{{ octane_link }}">See your routine</a>{% endif %}
      <span class="octane-when">Quiz taken {{ customer.metafields.octaneai['q3f9a12cd_completed_at'].value | date: '%B %-d' }}</span>
    </div>
    <style>
      .octane-bar { display: flex; gap: 12px; justify-content: center; padding: 8px 16px;
        font: 14px system-ui, sans-serif; background: #f5f3ff; color: #3b0764; }
      .octane-bar a { color: inherit; text-decoration: underline; }
      .octane-when { opacity: 0.6; }
    </style>
  {% endif %}
{% endif %}

The link opens the read-only results view of her latest run. A retake writes the new link; an old link keeps opening the old result.

2. The badge (product page)

Product template, the main product section, Add block, Custom Liquid, placed under the title:

{% if customer %}
  {% assign octane_result = customer.metafields.octaneai['q3f9a12cd_winner'].value %}
  {% if octane_result != blank %}
    {% assign octane_want = 'skin:' | append: octane_result | downcase %}
    {% assign octane_tags = product.tags | join: '|' | downcase | split: '|' %}
    {% if octane_tags contains octane_want %}
      <p class="octane-badge">Recommended for your {{ octane_result | downcase }} skin</p>
      <style>
        .octane-badge { display: inline-block; margin: 8px 0; padding: 4px 12px; border-radius: 999px;
          font: 13px system-ui, sans-serif; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
      </style>
    {% endif %}
  {% endif %}
{% endif %}

contains on an array matches a whole element, so skin:dry never matches skin:dry-sensitive.

3. Your matches first (collection page)

Collection template, Add section above the product grid, Custom Liquid:

{% if customer %}
  {% assign octane_result = customer.metafields.octaneai['q3f9a12cd_winner'].value %}
  {% if octane_result != blank %}
    {% assign octane_want = 'skin:' | append: octane_result | downcase %}
    {% capture octane_cards %}
      {% for p in collection.products %}
        {% assign p_tags = p.tags | join: '|' | downcase | split: '|' %}
        {% if p_tags contains octane_want %}
          <a class="octane-card" href="{{ p.url }}">
            {{ p.featured_image | image_url: width: 300 | image_tag: loading: 'lazy', alt: p.title }}
            <span>{{ p.title }}</span><span>{{ p.price | money }}</span>
          </a>
        {% endif %}
      {% endfor %}
    {% endcapture %}
    {% if octane_cards contains 'octane-card' %}
      <section class="octane-picks">
        <h2>Picked for your {{ octane_result | downcase }} skin</h2>
        <div class="octane-row">{{ octane_cards }}</div>
        <a href="{{ collection.url }}?filter.p.tag={{ octane_want | url_encode }}">See all</a>
      </section>
      <style>
        .octane-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
        .octane-card { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
        .octane-card img { width: 100%; height: auto; }
      </style>
    {% endif %}
  {% endif %}
{% endif %}

Things to know

• Customer metafields are always readable in Liquid, whatever their storefront access setting (Shopify: metafields).
• A for loop reads the first 50 products of a collection (Shopify: paginate). On a larger collection the strip shows matches among those 50; the “See all” link filters the whole collection by the tag with storefront filtering.
• The strip sits above the theme’s own grid rather than reordering it; reordering the grid means editing the theme’s collection section, which differs per theme.
• Multi-select answers are lists: {{ customer.metafields.octaneai['q3f9a12cd_multi-b7x1q'].value | join: ', ' }} prints “Tight after washing”.
• Only a shopper Octane AI matched to a customer has the metafields: one who took the quiz signed in, typed their account’s email in the quiz, or placed an order linked to the quiz.
• To check it, sign in as a test customer with a result: the bar shows on the home page, the badge on a skin:dry product and not on a skin:oily one, and the strip on a collection. Retake with another answer and reload: all three switch. Sign out: all three disappear.