SSR live pricing (beta)

SSR live pricing renders the discounted price on Shopify's servers, inside your theme's Liquid, rather than rewriting it in the shopper's browser. There is no flash of the original price, and the discounted price is in the HTML search engines see. In exchange, it requires a one-time edit to your theme's code.

It is a beta feature. Campaigns using it carry an SSR live pricing (Beta) badge.

When to use it

Use SSR live pricing when the brief flash of the original price on page load is unacceptable, or when you want discounted prices in the initial HTML for SEO. Otherwise, ordinary live pricing needs no theme edit and covers more discount types.

Requirements

1. An active campaign whose discount method is Automatic and that has a Multi Products Discount — either as its discount type, or as one of the discounts in a campaign with Multiple discounts turned on. The option does not appear on any other combination.
2. SSR live pricing (Beta) enabled from that campaign's three-dot menu, or, in a campaign with multiple discounts, from the Multi Products Discount's menu on the Campaign name & type step.
3. A one-time edit to your theme's price snippet. The code for it, and the metafield it reads, are in SSR live pricing: the theme snippet and metafield contract.

Turn it on

1. Open the campaigns list and click the three-dot menu on the campaign.
2. Choose Enable SSR live pricing (Beta) and confirm.

In a campaign with Multiple discounts turned on, open the campaign, click the three-dot menu on its Multi Products Discount entry and choose Enable SSR live pricing (Beta), then save. Only one discount in the campaign can be picked, and the pick is cleared if you switch the campaign to a code.

If live pricing is already on for the campaign, the confirmation dialog warns you that the two can overlap — see below.

When you enable it, Hype writes the campaign's discount rules into a shop metafield that your theme reads. Turning it off clears that metafield.

Using it together with live pricing

Both can be on for the same campaign. That is useful when part of your storefront is drawn by an app rather than by your theme — a search results grid, for example — because the theme snippet never runs there and only live pricing can update those prices.

If your live pricing schema also targets the prices the theme snippet already rendered, shoppers see those prices repaint after the page loads, and the two amounts can differ by a cent. Keep the schema pointed at the app-rendered areas only. The details are in Using SSR live pricing together with live pricing.

Only one campaign at a time

Only one automatic campaign's rules are stored at a time. Enabling SSR live pricing on a second automatic campaign disables it on the first, without asking. If you run several automatic campaigns, decide which one deserves server-side prices.

The theme edit

Your theme's price snippet has to read the metafield and override the price before your theme formats it. The snippet differs by theme:

The Hype code goes after your theme assigns price and compare_at_price, and before it formats them with the money filter:

1. Theme assigns: price, compare_at_price (from product/variant)2. --> Hype SSR code goes here <--3. Theme assigns: money_price = price | money4. Theme renders: HTML with money_price, compare_at_price

Placed there, the matched product's original price becomes the strike-through compare-at price and the discounted price becomes the sale price, so your theme's existing sale markup keeps working unchanged.

Because Liquid can read a product's collections everywhere — product pages, collection pages, product cards, search results and the cart — SSR pricing applies across the whole storefront, not just the product detail page.

The code to paste, the exact placement, the data-hype-ssr attribute to add, and the optional currency-conversion set-up are all in SSR live pricing: the theme snippet and metafield contract. Send that page to whoever makes the edit.

Ask a developer to make this edit, and duplicate your theme first. Editing the price snippet incorrectly breaks prices on every page.

Matching and markets

A product is discounted if the rule applies to all products, or the product's ID is listed, or the product is in a listed collection — and it is not in the rule's excluded products or excluded collections. When a campaign has several rules, the first match wins.

Percentage discounts work in any currency. Fixed-amount discounts use the per-market value you set on the rule when there is one. When there is none and the shopper is browsing in another currency, the theme snippet needs a way to convert your primary-currency amount, and Liquid does not expose an exchange rate. The developer article describes an optional, manual set-up for that: a Money metafield you create yourself on the shop, from which the snippet derives the rate, including Shopify's currency conversion markup. Stores that only use percentage discounts, sell in one currency, or set a value for every market can skip it. See Converting amount discounts for other currencies.

Keeping the data fresh

The metafield syncs when you enable the toggle, and re-syncs automatically whenever you save changes to the campaign, including its discount rules and customer eligibility. It is cleared automatically when the campaign is deleted, deactivated, or switched from Automatic to a discount code.

If prices ever look out of sync with the campaign, toggle SSR live pricing off and on again to force a re-sync.

Related

• What is live pricing?
• Live pricing limits