TBYB Cart Modifications

This article includes instructions for adding several small Blackcart cart modifications to your theme's default cart drawer and cart template. If your store uses a smart cart app such as Rebuy or UpCart, please contact Blackcart Merchant Success for further guidance.

Mini Cart and Cart Page Modifications

We recommend three modifications to your mini cart and cart page to reflect your TBYB program at the line item and subtotal level. These changes are intended to help reiterate the program to the customer throughout their purchase journey. The intention is to help them understand the difference between what they will pay for a TBYB item at the time of transaction (TBYB deposit) compared to the cost of the product should they choose to keep it after their TBYB trial period. See the three changes made to the cart annotated below.

Mini Cart Modifications

The slide cart modifications will be made to the liquid file that represents your mini cart and the items within your mini cart. This is also known as the cart-drawer. All Shopify themes will vary but this file can likely be found under your themes "Snippets" as the file cart-drawer.liquid or cart-item.liquid files. To make these changes we target Shopify's liquid selling plan object. To learn more about Shopify's selling plan data see here.

Step 1 - Add the TBYB Program Details

Your program name and trial period length are set under TBYB configurations upon setup of the Blackcart app. Depending on your theme type, the program details will automatically be added to your cart line item details when a TBYB product is added. If not, follow the steps below to ensure that your TBYB program name and trial length are added at the line item level. 

1. From the cart-drawer.liquid file locate the cart item loop. This loop typically represents the display of product details within your cart (price, size, color, discount, etc).
   
   
   
   
2.  Insert the code below where you would like the TBYB program name and trial length to display in the list of your product line item details. We recommend placing it at the end of your existing <product-option> elements.

{%- if item.selling_plan_allocation != nil -%}
  <p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
{%- endif -%}

Step 2 - Adjust product line item total to show your TBYB deposit and if kept or full price amount

1. Locate the cart item details table
   
   
   
   
2. Locate the element that displays the regular line item price of the product
   
   
   
   
3.  Replace the tag inside the div with the following code :
   

   {%- if item.selling_plan_allocation != nil -%}
      {{ item.selling_plan_allocation.checkout_charge_amount | times: item.quantity | money }} ({{ item.final_price | times: item.quantity | money }} if kept)
   {% else %}
      {{ item.original_price | money }}
   {% endif %}

   

Step 4 - Adjust the cart subtotal to reflect the TBYB deposit amount 

1. Locate the cart-drawer__footer class within the cart-drawer.liquid file
2. Adjust the cart subtotals code to match the following
   
   

   <p class="totals__subtotal-value">
     {% assign cart_subtotal = cart.total_price %}
      {% if cart.checkout_charge_amount %}
       {% assign cart_subtotal = cart.checkout_charge_amount %}
      {% endif %}
     {{ cart_subtotal| money_with_currency }}
   </p>

Cart Page Modifications

The mini cart modifications will often translate to your primary cart page. If not, follow the above steps for your theme's default cart template. All Shopify themes will vary but this file can likely be found under your theme's "Snippets" as the main-cart.liquid or cart.liquid files. If your store does not use a cart page and primarily uses the mini cart, no changes are needed.