Manual Installation of Snippets
 
Note: Before proceeding with the manual installation of our Snippet, it's essential to take a backup of your current theme.
 
This process requires uploading of a CSS file within the Asset directory and Snippets insertion in the following pages:
 
 
 
Uploading of CSS File
  • Open your theme editor & Navigate to Assets directory.
  • Click "Add a new asset" and upload this css file within the directory (Make sure to keep the same filename).
 
 
 
1. Products Collection & Product Details Page: 
Enabling discounted pricing from Discount Depot on collection as well as product details page is a simple process. However, identifying the correct template files for the product grid or product detail might take some time due to variations in theme architecture. This step ensures that your store effectively showcases the discounted pricing on both of these pages.
 
Product Collection Grid Preview:
 
Product Collection Grid  
 
Product Details Page Preview:
 
 
 
 
 
Implementation Steps: 
 
Step 1: Identify the Templates that displays the Product Card with its price:
  • Open your theme editor
  • Next, find the template used to display a product in a collection and the template used to display product details on product page in the Templates, Sections or Snippets folder. You're looking for the file that contains the markup that displays a card of the product with its price.
  • The filename is different on each theme. Some themes use "product-card.liquid", others use "price.liquid", "product-price.liquid", "product-template.liquid", "product-grid.liquid", "product-listing.liquid" or "product-block.liquid", but there are many other possibilities.
  • Find the markup of Product Price, Usually it would be {{ product.price | money }} or {{ money_price }}
Note: If you are using different product templates for different products, Then you need to make sure you implement the snippets in all of those templates
 
Step 2: Add required classes and code to the Product Price Wrapper:
  • Once you have identified the product price markup, it is time to incorporate the necessary code into its HTML wrapper.
  • Add/Update the HTML wrapper which could be span, div, etc. as in the following example:
<span class='axt-cp-custom {{ product.selected_or_first_available_variant.id }} {{ product.id }}' id='{{ product.id }}' axt-cp-product-id='{{ product.selected_or_first_available_variant.id }}'
>{{ product.price | money }} or {{ money_price }}</span>
 
 
Sample screenshot:
 
 
 
 
 
2. Cart Page ( Only required if Storefront API is turned on with Discount Depot App )
 
Note: This step is only necessary when using the Storefront API for the Discount Depot App. If you're using the default Functions API, it will be handled automatically.
 
For the Cart, We need to identify 3 Markups that are containing price information about Line Item Price, Line Item Subtotal & Cart Subtotal
 
 
 
Step 1: Identify the Template that displays the Cart Line Items in Cart Page:
  • Open your theme editor
  • Next, find the template used to display the Cart Line Items in the Templates, Sections or Snippets folder.
  • The filename is different on each theme. Some themes use "cart-template.liquid", others use "cart.liquid", "main-cart-items.liquid", "ajax-cart-template.liquid" or "cart-notification-product.liquid", but there are many other possibilities.

 

Step 2: Add required classes and code to the Cart Item Price Wrappers:
  • Once you have identified the templates, it is time to incorporate the necessary code to all 3 markups.
  • For Line Item Price, Find the markup that usually contains {{ item.original_price | money }} and Add/Update the HTML wrapper which could be span, div, etc. as <span class='cart-axt cart-{{ item.variant_id }}'> {{ item.original_price | money }} </span>
  • For Line Item Subtotal, Find the markup that usually contains {{ item.original_line_price | money }} and Add/Update the HTML wrapper which could be span, div, etc. as <span class='axt-cart-original-price cart-ori-{{ item.variant_id }}'>{{ item.original_line_price | money }}</span>
  • For Cart Subtotal, Find the markup that usually contains {{ cart.total_price | money_with_currency }} and Add/Update the HTML wrapper which could be span, div, etc. as <span class='axt-cp-cart-total'>{{ cart.total_price | money_with_currency }}</span>

 

You can also contact us at [email protected] for free installation assistance. We're here to help you make sure the snippets are installed correctly and functioning as expected.