Loyalty Program

Defining your loyalty programs can cause Google to highlight member benefits when your product appears in search results.

Google now supports marking up your loyalty/member program benefits on the home page and for your products.

SEO Rich Snippets supports setting this up in the Shopping / Merchant section of the app.

Programs and Tiers

The Google Merchant Centre lets you add your Loyalty programs to your account (Marketing -> Loyalty programs). We recommend you set up your programs there if you can, as data in the Merchant Center is more detailed and trusted. If you do set it up in the Merchant Center, the steps here are not required.

The information you add to the app about programs and tiers will be included with the business information on the home page. Later, the information can be referenced by product pages to define product-specific prices or points for each member tier.

You can have multiple programs, and each program can have multiple membership tiers (e.g. gold, silver, bronze). Each program and tier has a label which you should define (use alphanumeric and underscores/dashes) and stick with. These are how your products define the benefits your customers get at each tier.

Each tier can define a tier-level points benefit. This is how many points the member earns per $ spent (or per the currency you use).

The tier should also specify whether you offer a product-specific discounted price or points. How to define those discounts/points is in the next section.

You can also define some requirements for becoming a member of a tier. Each type of requirement may have extra fields to define it.

Product Discounts and Points

The Merchant Center feed can include product-level discounts and points via the loyalty_program field; we recommend including this information in the feed if possible. If you do add this info to the feed, this step is not required.

Defining product-level discounts and points earned for a specific product can be tricky. We decided to let you define them in a custom field. The format of the text is a JavaScript object (JSON) and looks like this:

{"program": "my_loyalty_program", "tier": "silver", "price": 10.0, "currency": "USD", "points":10}

Set the program to the program label and the tier to the tier label. If there is a discount, then set the new price and its currency, and if they earn points, how many.

You can add multiple custom fields for the supported tiers.

The JSON format is handy as it is easy to process with Handlebars and JavaScript in the theme. You can also extend it with your own properties. Here’s an example of how to output basic product membership benefits information on the product page by modifying templates/components/products/custom-fields.html. Green depicts the original code.

{{#each product.custom_fields}}
    {{~#if (toLowerCase (trim name)) '===' 'member pricing'}}
        {{~#if (trim value) '!==' ''}}
<script nonce="{{nonce}}">
    window.wsaMembershipData = window.wsaMembershipData || [];
    window.wsaMembershipData.push(JSON.parse({{{json value}}}));
</script>
        {{~/if}}
    {{else}}
<dt class="productView-info-name">{{name}}:</dt>
<dd class="productView-info-value">{{{value}}}</dd>
    {{~/if}}
{{/each}}

<script nonce="{{nonce}}">
if (window.wsaMembershipData) {
    let tableHtml = '<dt class="productView-info-name">Member Pricing:</dt><dd class="productView-info-value"><table><thead><tr><th>Program</th><th>Tier</th><th>Price</th><th>Points</th></tr></thead><tbody>';

    window.wsaMembershipData.forEach(function(membership) {
        tableHtml += '<tr>';
        tableHtml += '<td>' + membership.program + '</td>';
        tableHtml += '<td>' + membership.tier + '</td>';
        tableHtml += '<td>' + membership.price + ' ' + membership.currency + '</td>';
        tableHtml += '<td>' + membership.points + '</td>';
        tableHtml += '</tr>';
    });

    tableHtml += '</tbody></table></dd>';

    document.currentScript.insertAdjacentHTML('afterend', tableHtml);   
}
</script>