Applying strikethrough pricing effects in Shopify

Let's imagine you want to run a promotion with a SNOW20 coupon that gives 20% off all snowboards in your Shopify store.

To make the discount evident to potential customers and help boost sales, you can use product labels with strikethrough pricing. For example, you can generate a label that says $700 $560 with coupon SNOW20.

Talon.One requirements

• You are an admin user.
• You have set up an Application and a campaign.
• You have enabled the strikethrough feature in your campaign.
• You have created a cart item catalog and connected it to your Application.
• You have synced the cart item catalog with your product inventory in Shopify.

Shopify requirements

• You are an administrator user.
• You have completed the basic setup of the Talon.One Shopify app.

Setting up the integration

1

Create a cart item filter

First, create a cart item filter that selects all snowboards.

Let's imagine that your catalog contains a custom attribute named category and that its value is Snowboard for all snowboards.

1. Open a campaign in the Application that is connected to your Shopify store.
2. In the Rule Builder of the campaign, click Filter Cart Items.
3. Click Add Filter Step and select Filter items by condition.
4. Set the filter to category is equal to Snowboard.
5. In Save As, type Snowboards and click Save Filter.

2

Create a strikethrough rule

Now, create a strikethrough rule that applies a discount to all filtered snowboards:

What	Name	Properties
Effects	Discount individual items	List of items: Select the cart item filter you created, for example, Snowboards. Discount name: 20% off per item Discount value: [Item.Price] * 20 %

3

Create a strikethrough pricing notification

To submit the strikethrough pricing data to Shopify, create a strikethrough pricing notification:

1. In Apps, select the Application for which you want to create a notification.
2. On the left-side menu of the Application, click Notifications.
3. Click Create Notification.
4. In the Create Notification drawer, select Strikethrough pricing updates.
5. In Notification name, type a name for the notification.
6. In the Request section, configure the following parameters:
   • URL: https://shopify-integration.europe-west1.talon.one/strikethrough
   • In Header, add the following headers:
     • content-type:application/json
     • x-shopify-domain:YOUR_STORE_SUBDOMAIN, where YOUR_STORE_SUBDOMAIN is the subdomain of your Shopify store. Example: If your store URL is https://peak-boards.myshopify.com, enter peak-boards.
7. (Optional) To validate the URL and headers you entered by sending a test request, click Test Notification.
8. Click Create Notification.

This immediately triggers the strikethrough rule and sends the pricing effects to Shopify.

4

Display the product label

Whenever the app receives a strikethrough pricing update, it stores the effects in a product variant metafield of each affected product.

For example, imagine your catalog contains a snowboard with a price of $700. As defined in the strikethrough rule, the item receives a 20% discount, so the app stores the following data in the metafield of the variant:

[
   {
      "campaignId": 3,
      "rulesetId": 101,
      "ruleIndex": 1,
      "ruleName": "20% off snowboards",
      "type": "setDiscountPerItem",
      "props": { "name": "20% off per item", "value": 140.00 }
   }
]

To display the discounted price in your online store, retrieve the props.value property from the metafield data.

Theme-based stores

For theme-based stores, you can use Liquid to access the metafield data.

1. In Shopify, open Online Store > Themes.

2. Find the theme that you want to edit and click Customize.

3. Open a product page.

4. In the sidebar, click Add section and choose Custom Liquid.

5. Add the following Liquid code:

   {% assign original_price = product.selected_or_first_available_variant.price %}
   {% assign discounted_price = original_price %}
   {% assign strikethrough_effects = product.selected_or_first_available_variant.metafields.talon_one.effects.value %}
   
   {% if strikethrough_effects %}
      {% for effect in strikethrough_effects %}
         {% assign discount_value = effect.props.value | times: 100 | default: 0 %}
         {% assign discounted_price = discounted_price | minus: discount_value %}
      {% endfor %}
      {% if discounted_price < original_price %}
         <span style="text-decoration: line-through">{{ original_price | money }}</span>
         <span style="font-weight: bold">{{ discounted_price | money }} with coupon SNOW20</span>
      {% endif %}
   {% endif %}

6. Click Save.

When you view your store, you'll see a new section with the product label.

Headless stores

For headless stores, modify the template of your store to do the following:

1. Retrieve the props.value property from the metafield data to get the discount value.
2. Subtract the discount value from the original price to get the discounted price.
3. If the discounted price is lower than the original price, display the original price with a strikethrough and the discounted price next to it, for example, $700 $560 with coupon SNOW20.

5

Add the metafield to the Shopify admin

To verify that the integration is working, you can add the metafield to the Shopify admin user interface.

note

This step is optional. The Talon.One Shopify app always adds the metafield data, regardless of whether it is visible in the Shopify admin.

To add the metafield:

1. In Shopify, open Settings > Metafields and metaobjects > Variants.
2. Click View unstructured metafields.
3. Next to talon_one.effects, click Add definition.
4. Enter a name for the metafield, for example, Talon.One Strikethrough Pricing.
5. Click Select type and select JSON.
6. Click Save.

Now, when you open a product variant in the Shopify admin, you can see the metafield and the data stored for that variant.