๐This is an advanced guide that requires basic knowledge of HTML, Shopify liquid, and the Theme editor. If you need help adding this, please reach out to our support team and your request will be passed to our development team.
Overview
This guide is applicable if you're using a "fixed amount" and/or "percentage" discount for your OCU Product Page Widget and/or Pre-Purchase offer(s) and want that discounted pricing to be reflected on your Theme's Cart Page or AJAX Cart.
Using the information in this guide, you can show the offer product's discounted price on the Cart Page or your AJAX Cart (drawer/mini/popup cart, etc), which can help improve your initiated checkout rates and subsequently, purchase conversions.
To show the discount on the Cart Page or AJAX Cart, code addition to theme file(s) is required. You will need to add the following attributes
to the cart-template, cart.liquid and/or ajax-cart-template.liquid files included in your Theme (or some other file that describes the cart page or AJAX cart drawer/mini/popup cart)
Attribute value | Selector for |
| line_item.original_line_price |
| line_item.original_price |
| cart.original_total_price |
| cart specific OCU discounts |
๐data-ocu-cart-discount
is an optional attribute you can use for showing the discount amount above or below the Subtotal price. It only works for the Discount Progress Bar functionality for the Multi-Product Pre-Purchase offer type. In the screenshot below, notice that the $55.99 price already includes a discount, itโs the final price.
๐ The discount from the Discount Progress Bar will not display the discount applied to each product on the Cart page / AJAX cart. It will only display and be applied on the Checkout page.
Showing the Discount on the Cart Page
You need to identify attributes that define the following on the Cart Page:
line_item.original_line_price
line_item.original_price
cart.original_total_price
Follow the steps below to find and add attributes to your Theme files:
1. Navigate to Online Store > Themes > Actions > Edit code in your Shopify admin.
2. Find and open the cart-template.liquid or cart.liquid file (or another file that describes the cart page for your theme).
3. Open the Cart Page on your store in a separate browser tab.
4. On the Cart Page, right-click and select "Inspect" or press the F12 key to open the Inspector. Choose the "Select and element in the page to inspect it" option:
5. Find the corresponding selector for cart.original_total_price
by hovering over it and clicking on it. Copy the selector:
In this case, it will be cart-subtotal__price
6. In your cart-template.liquid or cart.liquid file, press Ctrl+f to open a search field. Paste in the selector you copied in the previous step and press Enter to search for it:
7. Add data-ocu-subtotal
before the > character as seen below:
8. Back on the Cart Page, find the corresponding selector for line_item.original_price
and copy it:
In this case the selector will be data-cart-item-regular-price
,
โ<span data-cart-item-regular-price="">$20.00</span>
9. Find the element for line_item.original_price
using the selector copied in the previous step, data-cart-item-regular-price
in this case:
๐ If you see more than one entry for this selector in the theme file, then analyze the HTML around it to understand where it should be pasted.
10. Add data-ocu-total-block="{{ item.key }}"
before the > character as seen below:
11. Back on the Cart Page, find the corresponding selector for line_item.original_line_price
and copy it.
๐If your Theme's cart page doesn't have the line_item.original_line_price
element, then skip steps 11 - 13.
In this case the selector is data-cart-item-regular-price
,
โ<dd data-cart-item-regular-price="">$20.00</dd>
12. Find element for line_item.original_line_price
using the selector copied in the preivous step, data-cart-item-regular-price
in this case:
13. Add data-ocu-price-block="{{ item.key }}"
before the > character as seen below:
14. Add <div data-ocu-cart-discount></div>
before or after the subtotal selector, depending on where you want it shown:
๐ Showing the discounted value above the subtotal works only for the Discount Progress Bar functionality for the Multi-Product Pre-Purchase offer type.
15. Save your cart-template.liquid or cart.liquid file.
Note that you can always revert your changes if you make a mistake using Shopify's built-in liquid files history functionality:
*Important Notes:
For some Themes, you may need to adjust
{{ item.key }}
. It might be{{ line_item.key }}
,{{ product.key }}
,{{ key }}
or another expression. If you need help with it please reach out to our support team.This functionality is not compatible with Shopify "Automatic Discounts" and/or other 3rd party apps that apply discounts on the Cart Page.
data-ocu-cart-discount
is an optional attribute that you could use for showing discount amount above or below the subtotal.For some themes that use a currency filter for the subtotal, it could be necessary to add the same currency filter for the
data-ocu-subtotal
attribute in order to show the same label for the subtotal after adding the attribute:
โUse the same filter that you use for
cart.total.price
:
โIn this case it will be
data-ocu-subtotal="money_with_currency"
Showing the Discount on an AJAX Cart
Follow the same steps from the previous section "Showing the Discount on the Cart Page", but for the AJAX Cart. Make modification in the ajax-cart-template.liquid file (or other file that describes your Ajax drawer/mini/popup cart) on your Theme.
*Important Notes:
For some Themes, you may need to adjust
{{ item.key }}
. It might be{{ line_item.key }}
,{{ product.key }}
,{{ key }}
or another expression. If you need help with it please reach out to our support team.If it doesnโt work for your AJAX Cart, please reach out to our support team and your request will be passed to our development theme. Sometimes it requires knowledge of JavaScript to make these attributes work on an AJAX Cart.
Instruction for developers of 3rd party AJAX drawer/mini/popup cart apps
If you use or you are a 3rd party app that provides the ability to use an AJAX drawer/mini/popup cart, you can now show OCU offer discounts on your cart.
Using OCUApi.renderOCUDiscounts
method that is now available in global window
object, accepting selectors object as the only parameter.
To see OCU offer discounts on your cart, you need to add additional attributes to the cart template in your theme or change default selectors using the renderOCUDiscounts
method.
Adding specific attributes allows you to choose where to have prices rendered and are created to prevent unexpected behavior. It is preferred to insert your attributes into either div
or span
tags, for additional customization.
Default attributes for adding to your cart template:
item
is an iterable, naming may vary.
Attribute value | Selector for |
| Single product price. |
| Total price of a number of products. |
| Subtotal |
| Cart specific OCU discounts |
OCUApi.renderOCUDiscounts
method needs to be called after the cart page is finished mounting or being updated. Selectors are used to determine the element where a respective discount will be shown:
Key | Example selector |
productPrice |
|
totalProductsPrice |
|
cartSubtotal |
|
cartDiscount |
|
Example usage of OCUApi.renderOCUDiscounts
method:
if (window.OCUApi) window.OCUApi.renderOCUDiscounts({
productPrice: 'data-ocu-price-block',
totalProductsPrice: 'data-ocu-total-block',
cartSubtotal: 'data-ocu-subtotal',
cartDiscount: 'data-ocu-cart-discount'
});
If no parameter is passed, default selectors are used.
We strongly advise using default attributes to prevent unexpected behavior.