📝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.
*This guide is applicable if you're using the Draft Orders discount method only.
Overview
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_priceline_item.original_pricecart.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-discountis 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-subtotalattribute 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.