Compare at Price implementation

Web Pixels
1

Is it possible to have compare_at_price implemented on the product object?

It seems unnecessary to have to fetch it through <myshopify.com/products/product-name.json> and then match up with the product id, thus finding the compare_at_price this way.

My use case is when I have to integrate the data into Klaviyo. Standard events from their native app contain compare at prices, which are used in their emails.

2

What’s the usecase? I see the Pixels category, but is it for checkout/purchase events (ie. LineItem object)?

Have not tested, but my best bet would be it could be accessed through line_item.variant.compare_at_price.

For storefront events you can create your own custom events and pass any liquid variable.

3

The usecase is for Klaviyo. Their standard event contains a compare_at_price value, which is then used in their emails.

4

@Patrick_Koo agree with @curzey


var myArray = [];

// Check if the product is on sale
  {% if product.compare_at_price > product.price %}
    myArray["merchandise"] = {
      "product": {
        "price": {{ product.price | default: 0 | money_without_currency }},
        "compare_at_price": {{ product.compare_at_price | default: 0 | money_without_currency }},
        "currency": {
          "shop_currency": "{{ shop.currency }}",
          "local_currency": Shopify.currency.active || ""
        }
      }
    };
  {% endif %}

// Send Custom Web Event
Shopify.analytics.publish('my_event', myArray);

//this is verbose to just illustrate an example - event will look like this:

{
    "name": "my_event",
    "customData": {
        "merchandise": {
            "product": {
                "price": 90,
                "compare_at_price": 100,
                "currency": {
                    "shop_currency": "USD",
                    "local_currency": "USD"
                }
            }
        },
        "gtm.uniqueEventId": 1
    },
    "type": "custom",
    "timestamp": "2024-11-28T16:50:41.895Z",
    "context": {
        "document": {
            "location": {
                "href": "https://xxx.myshopify.com/products/teet",
                "hash": "",
                "host": "xxx.myshopify.com",
                "hostname": "xxx.myshopify.com",
                "origin": "https://xxx.myshopify.com",
                "pathname": "/products/teet",
                "port": "",
                "protocol": "https:",
                "search": ""
            },
            "referrer": "https://xxx.myshopify.com/",
            "characterSet": "UTF-8",
            "title": "Test T-Shirt Title – Product Test"
        },
        "navigator": {
            "language": "en-US",
            "cookieEnabled": true,
            "languages": [
                "en-US",
                "en"
            ],
            "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
        },
        "window": {
            "innerHeight": 810,
            "innerWidth": 889,
            "outerHeight": 931,
            "outerWidth": 1597,
            "pageXOffset": 0,
            "pageYOffset": 0,
            "location": {
                "href": "https://zamartz-test.myshopify.com/products/teet",
                "hash": "",
                "host": "xxx.myshopify.com",
                "hostname": "xxx.myshopify.com",
                "origin": "https://xxx.myshopify.com",
                "pathname": "/products/teet",
                "port": "",
                "protocol": "https:",
                "search": ""
            },
            "origin": "https://xxx.myshopify.com",
            "screen": {
                "height": 1117,
                "width": 1728
            },
            "screenX": 51,
            "screenY": 38,
            "scrollX": 0,
            "scrollY": 0
        }
    },
    "id": "xxx",
    "clientId": "xxx"
}