Adding WandStore to the Theme

After installing the WandStore app, the WandStore Personalization block needs to be added to the Shopify theme. This block is what delivers personalized content to signed-in customers.

Adding the theme block

1. In the Shopify admin, go to Online Store > Themes.
2. Click Customize on the active theme.
3. Select the template where personalized content should appear (usually Home page).
4. In the theme editor sidebar, find the section where the personalized content should appear.
5. Click Add block and search for WandStore Personalization.
6. Click the block to add it and click Save.

No additional configuration is needed — the block auto-detects the store and connects to the WandStore backend automatically.

How the block works

The WandStore Personalization block only activates for signed-in customers. Here’s what happens:

1. When a signed-in customer loads the page, the block checks if a pre-generated storefront exists for them.
2. If a personalized storefront has been generated (via the WandStore dashboard), it loads instantly from edge cache.
3. If no personalized storefront exists, the block remains invisible and the regular theme content shows through.

Anonymous visitors see nothing from this block — the regular theme content shows through as normal.

Where to place the block

Add the WandStore Personalization block to the Homepage template. This is where signed-in customers will see personalized product recommendations and greetings.

Support for collection pages and product pages is coming soon.

Liquid template details

For advanced theme developers, here’s what the block outputs. The block renders a container div and a script tag that loads the pre-generated personalized content:

{% if customer %}
<div id="wand-personalized" style="display: none;"></div>

<script src="{{ 'wand-personalize.js' | asset_url }}" defer
  data-worker-origin="{{ block.settings.worker_origin }}"
  data-store-slug="{{ block.settings.store_slug | default: shop.permanent_domain | remove: '.myshopify.com' }}"
  data-customer-id="{{ customer.id }}"
  data-customer-first-name="{{ customer.first_name | escape }}"
  data-customer-orders-count="{{ customer.orders_count }}"
  data-customer-total-spent="{{ customer.total_spent | money_without_currency }}"
  data-customer-tags="{{ customer.tags | join: ',' }}"
></script>
{% endif %}

The block uses Shopify’s customer object, so it only renders when a customer is logged in. The store slug auto-detects from the shop’s permanent domain.

Verifying the block

After adding the block:

1. Preview the store to confirm the block appears correctly for signed-in customers.
2. Follow the Verifying Setup guide to confirm everything is working.