# Apply 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.

> For the complete documentation index, see [llms.txt](https://docs.talon.one/llms.txt).

To make the discount evident to potential customers and help boost sales, you can use
product labels with
[strikethrough pricing](/docs/product/rules/strikethrough-pricing.md). For
example, you can generate a label that says <code>~~$700~~ $560 with coupon SNOW20</code>.

## Talon.One requirements

- You are an [admin](/docs/product/account/account-settings/manage-roles.md#admin-role)
  user.
- You have set up an [Application](/docs/product/applications/create-and-manage-applications.md) and a
  [campaign](/docs/product/campaigns/create-and-manage-campaigns.md).
- You have
  [enabled the strikethrough feature](/docs/product/campaigns/settings/manage-campaign-features.md)
  in your campaign.
- You have created a
  [cart item catalog](/docs/product/account/dev-tools/manage-cart-item-catalogs.md) and
  connected it to your Application.
- You have [synced](/docs/dev/technology-partners/shopify/sync-inventory-shopify.md) the
  cart item catalog with your product inventory in Shopify.

## Shopify requirements

- You are an
  [administrator](https://help.shopify.com/en/manual/your-account/staff-accounts/staff-roles/staff-roles-descriptions)
  user.
- You have completed the
  [basic setup](set-up-shopify-app.md) of the Talon.One
  Shopify app.

## Set up the integration

<StepsContainer>

### Create a cart item filter

First, create a [cart item filter](/docs/product/rules/cart-item-filters/overview.md) that
selects all snowboards.

Let's imagine that your catalog contains a custom attribute named <Attribute
name="category" type="custom" /> and that its value is `Snowboard` for all snowboards.

1. Open a [campaign](/docs/product/campaigns/overview.md) in the
   [Application](/docs/product/applications/create-and-manage-applications.md) that is connected to
   your Shopify store.
1. In the [Rule Builder](/docs/product/rules/overview.md) of the campaign, click <Filter
   className="icon" /> **Filter Cart Items**.
1. Click **Add Filter Step** and select **Filter items by conditions**.
1. Set the filter to <Attribute name="category" type="custom" /> **is equal to**
   `Snowboard`.
1. In **Save As**, type `Snowboards` and click **Save Filter**.

### Create a strikethrough rule

Now,
[create a strikethrough rule](/docs/product/rules/create-and-manage-rules.md#create-a-strikethrough-rule)
that applies a discount to all [filtered](#create-a-cart-item-filter) snowboards:

| What        | Name                      | Properties                                                                                                                                                                                                                                                                 |
| ----------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Effects** | Discount individual items | **List of items**: Select the cart item filter you [created](#create-a-cart-item-filter), for example, `Snowboards`.**Discount name**: `20% off per item`**Discount value**: <Attribute name="[Item.Price]" type="builtin" /> `* 20 %` |

### Create a strikethrough pricing notification

To submit the strikethrough pricing data to Shopify, create a
[strikethrough pricing notification](/docs/product/applications/application-notifications/overview.md#strikethrough-pricing-updates):

1. In <Apps className="icon" /> **Apps**, select the Application for which you want to
   create a notification.
1. On the left-side menu of the Application, click <Notification className="icon"/>
   **Notifications**.
1. Click <Add className="icon"/> **Create Notification**.
1. In the **Create Notification** drawer, select <Strikethrough className="icon"/>
   Strikethrough pricing updates.
1. In **Notification name**, type a name for the notification.
1. 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`.
1. (Optional) To validate the URL and headers you entered by sending a test request, click
   <Compass className="icon" /> **Test Notification**.
1. Click **Create Notification**.

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

### Display the product label

Whenever the app receives a strikethrough pricing update, it stores the effects in a
product variant [metafield](https://help.shopify.com/en/manual/custom-data/metafields) 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:

```json
[
   {
      "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.

<Tabs>
<TabItem value="theme" label="Theme-based stores" default>
For [theme-based](https://shopify.dev/docs/storefronts/themes) stores, you can use
[Liquid](https://shopify.dev/docs/api/liquid/) to access the metafield data.

1. In Shopify, open **Online Store** > **Themes**.
1. Find the theme that you want to edit and click **Edit theme**.
1. Open a product page.
1. In the sidebar, click **Add section** and choose **Custom Liquid**.
1. Add the following Liquid code:

   ```liquid
   {% 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 %}
         {{ original_price | money }}
         {{ discounted_price | money }} with coupon SNOW20
      {% endif %}
   {% endif %}
   ```

1. Click **Save**.

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

</TabItem>
<TabItem value="headless" label="Headless stores">
For [headless](https://shopify.dev/docs/storefronts/headless/getting-started) 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, <code>~~$700~~
   $560 with coupon SNOW20</code>.
</TabItem>
</Tabs>

### 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**.
1. Click **View unstructured metafields**.
1. Next to **talon_one.effects**, click **Add definition**.

   :::note
   The **Add definition** button only appears after Shopify has successfully received a
   strikethrough notification.
   :::

1. Enter a name for the metafield, for example, `Talon.One Strikethrough Pricing`.
1. Click **Select type** and select **JSON**.
1. 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.

</StepsContainer>