How to add TBYB elements to your store
In this article, we will walk you through how to integrate Blackcart elements with your existing storefront theme. Follow the steps as outlined in the table of content.
Please note that your theme may be different than the examples used in this article.
Requirements Before Getting Started
- Complete your Blackcart Account Setup
- Tag products to be included in your Try Before You Buy program
- Enable Try Before You Buy on your Storefront
- You are using a Shopify theme built on Liquid (most merchants). For completely custom storefronts built on Vue.js or React, contact Merchant Success through the chatbot for specific documentation.
Table of Contents
- Access the Theme editor through your Shopify Admin
- Product Details Page
- Cart Page
- [Notification] Mini Cart
- Mini Cart
Accessing the theme editor through the Shopify admin
Merchants can access the theme editor in the Shopify admin.
- From the Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit, click Actions >Edit Code
Reminder that we recommend creating an unpublished copy of your live theme while you add Try Before You Buy to your store. You'll be able to preview the theme copy to verify it's working correctly. Then, you can publish the copy to be your live theme.
Product Details Page
Step 1 of 2. Insert TBYB Toggle on product detail page (PDP)
What this is:
This task will add the Try Before You Buy (TBYB) toggle on the PDP for any TBYB enabled products.
Note: The TBYB toggle will only show up on product pages that have the TBYB product tag. Help on adding product tags.
Why this is important:
Shoppers will be able to add TBYB enabled products to the cart.
Theme File:
- The .liquid file that present the product details page.
- This is sometimes found under the Sections folder, file name product-template.liquid for older themes (or) main-product.liquid for 2.0, however your theme maybe different.
Code Placement:
- Find the "add to cart" button wrapper inside PDP form element. The add to cart element sometimes has id: product_form_id or id: form_id , and "add to cart" button has name="add" attribute, the wrapper should be above this add to cart snippet.
Note: These class names may however be different for your theme
- Add the following snippet within your button container wrapper
data-tbyb="tbyb-button"
If you are having difficulty formatting your toggle you can use the following snippet and add it above your Add to cart Button code.
<div data-tbyb="tbyb-button"></div>
Step 2 of 2. Learn More Modal
What this is :
The Learn More modal is activated by default, and can be previewed by clicking on the "Learn More" link below the TBYB button on the PDP.
Why this is important:
The Learn More modal is used to educate customers on how the Try Before You Buy program works, and is accessible as a resource to customers in a number of places throughout their shopping and checkout journey.
Preview:
Cart Page
Step 1 of 8: Add Blackcart to your Cart
What this is:
This task will make the Cart Page line items accessible to Blackcart.
Why this is important:
Modify your cart presentation for shoppers to reflect your TBYB program.
Theme File:
- The .liquid file that presents the cart page line items.
- This is sometimes found under the Sections folder, file name cart-template.liquid for older themes (or) main-cart-items.liquid for 2.0; however your theme maybe different.
Code Placement:
- Find the section that is generating the line items in the cart. It is usually a loop on cart.items .
- Find the outer most wrapper element. This is usually the first html tag inside the loop.
- Add the following attribute to the html tag found above:
data-tbyb="tbyb-cart-line-item"
Step 2 of 8. Modify TBYB Item Tag Placement (optional)
What this is:
The TBYB Item tag will be activated by default once you complete step 1.
Why this is important:
Shoppers will be able to distinguish TBYB items in the cart using this the tag.
You can modify the placement of the TBYB Tag if you like (Optional).
Theme File:
- The .liquid file that presents the cart page line item.
- This is sometimes found under the Sections folder, file name cart-template.liquid for older themes (or) main-cart-items.liquid for 2.0; however your theme maybe different. (same as step 1)
Code Placement:
- Find the section that is generating the line items in the cart. It is usually a loop on cart.items.
- Find the outer most wrapper element. This is usually the first html tag inside the loop. (same as step 1)
- Place the following snippet inside the elements found above.
(We recommend inserting this snippet inside a section where line item related information is displayed in the line items table.)
<div data-tbyb="tbyb-tag"></div>
Step 3 of 8. Modify Item Price
What this is:
This task will make modifications to the cart item so that the price is displayed correctly (i.e. crossed out), for any items added to cart as TBYB.
Some themes do not present the cart item price (unit price located right next to product name), only the item total (the price x quantity displayed on the far right for the item). If your theme doesn't present the cart item price, this change won't impact your cart.
Why this is important:
If you have the Item price element activated in your Cart Page, making modification to the price is recommended to reflect your TBYB program for shoppers.
Theme File:
- The .liquid file that presents the cart page line item prices.
- This is sometimes found under the Sections folder, file name cart-template.liquid for older themes (or) main-cart-items.liquid for 2.0; however your theme maybe different. (same as step 1)
Code Placement:
- Find the section that is generating the line items in the cart. It is usually a loop on cart.items .
- In that section, find the element(s) that display original price for one unit. It usually outputs item.original_price value inside its tags.
- Add the following attribute to the element(s) found above:
data-tbyb="tbyb-price-line"
- In the same section as above, find the element(s) that display discounted price for one unit. It usually outputs item.final_price value inside its tags.
- Add the following attribute to the element(s) found above:
data-tbyb="tbyb-price-line"
Step 4 of 8. Modify Qty Control
What this is:
This task will prevent customers from increasing the quantity of TBYB items in their cart from more than a quantity of 1. This task will also prevent customers from manually editing the quantity field from the cart.
Why this is important:
TBYB limits customers to try up to one unique product variant per order.
Theme File:
- The .liquid file that presents the cart page line item.
- This is sometimes found under the Sections folder, file name cart-template.liquid for older themes (or) main-cart-items.liquid for 2.0; however your theme maybe different. (same as step 1)
Code Placement:
- Look for an input html tag with a quantity input within the line item wrapper. It sometimes has type="number" attribute as well as value="{{ item.quantity }}" .
Note: These attributes may however be different for your theme, sometimes other html tags may be used in place of input field.
- Add the following attribute to the input tag:
data-tbyb="quantity-control"
- Within the same area, look for a button html tag that increases item quantity. This button usually has an attribute of name="plus" .
Note: Your theme may not have a html button to change quantity. If so, skip this following snippet.
- To disable the quantity increase function add the following TBYB attribute to the plus button tag:
data-tbyb="quantity-control"
Step 5 of 8. Modify Item Price Total
What this is:
This task will enable the correct upfront payment amount for TBYB items ($0.00) to be displayed.
Why this is important:
The actual prices for each item in the cart will be displayed to the shoppers.
Theme File:
- The .liquid file that presents the cart page line items.
- This is sometimes found under the Sections folder, file name cart-template.liquid for older themes (or) main-cart-items.liquid for 2.0; however your theme maybe different.
Code Placement:
Note: If your theme displays a different element for each viewport size, repeat the following steps for each total price element found.
- Find the element(s) that displays item.original_line_price inside the tag, for non-discounted items within the line item wrapper.
- Add the following attribute to the element found above:
data-tbyb="tbyb-total-line"
- Find the element(s) that display item.final_line_price inside the tag, for discounted items within the line item wrapper.
- Add the following attribute to the element found above:
data-tbyb="tbyb-total-line"
Step 6 of 8. Modify Eligibility Warning
What this is:
Blackcart allows you to set eligibility requirements for your TBYB program; such as requiring carts to meet certain minimum or maximum item quantity or price requirements in order for the cart to qualify for TBYB during checkout. These settings can be viewed and modified under the My Store section of your Merchant Portal account.
Why this is important:
Shoppers are notified of any TBYB cart eligibility requirements while they are shopping. The eligibility warning looks at your program settings under the My Store section of your Merchant Portal account, and compares them with the contents of the cart. If minimum or maximum eligibility requirements are not met, a warning message will be displayed.
To test seeing this warning message, go to the My Store section on the left hand navigation bar in your Merchant Portal account and change the minimum cart quantity from 1 to 2. Then only add one (1) TBYB item to your cart. This should trigger the warning message.
Theme File:
- The .liquid file that presents the cart page line items.
- This is sometimes found under the Sections folder, file name cart-template.liquid for older themes or main-cart-items.liquid for newer 2.0; however your theme maybe different. (same as above steps).
Code Placement:
- Insert the following attribute in the location you want the warning message to be displayed. We recommend placing the eligibility warning above the line items table.
<div data-tbyb="tbyb-warning"></div>
Step 7 of 8. Modify Subtotal
What this is:
Blackcart applies its own pricing for TBYB items and accepts a mixed cart with non-TBYB items. This task allows us to override cart totals to reflect the actual cart cost to a customer.
Why this is important:
Shoppers will see the actual total of their cart in two subtotal lines;
(i.e) Try Before You Buy Deposit, and Pay Today amount.
Note: Currently, you cannot modify the Try Before You Buy Deposit subtotal line. If you do not have a TBYB Deposit set as part of your program configurations, the deposit amount will show as $0.00.
Theme File:
- The .liquid file that presents the cart footer.
- This is sometimes found under the Sections folder, file name cart-template.liquid for older themes or main-cart-footer.liquid for 2.0; however your theme maybe different.
Code Placement:
- Find the html element that displays the cart total amount. It sometimes has class="totals" or class="cart__subtotal-container"
Note: These class names may however be different for your theme
- Add the following snippets to this section container.
data-tbyb="tbyb-cart-total"
- In the same section as above, find the html tag that displays the subtotal label, sometimes has a class name of class="totals__subtotal" or class="cart__subtotal-title"
Note: These class names may however be different for your theme
- Add the following tag snippet to the subtotal text element:
data-tbyb="tbyb-cart-total__text"
- In the subtotal container, find the html element that displays the subtotal amount (cart.total_price) inside its tag.
- Add the following tag snippet to the element found above:
data-tbyb="tbyb-cart-total__price"
Step 8 of 8. Modify Checkout Button
What this is:
This task allows Blackcart to provide the appropriate checkout experience when TBYB items are present in the cart.
Theme File:
- The .liquid file that presents the cart footer.
- This is sometimes found under the Sections folder, file name cart-template.liquid for older themes or main-cart-footer.liquid for 2.0; however your theme maybe different (same as step 7).
Code Placement:
- Find the button html tag that is used to trigger checkout. It usually has name="checkout" or id="checkout" attribute, as well as type="submit".
Note: These attributes may however be different for your theme.
- IMPORTANT: The checkout button element needs to be a <button> and not an <input>. If currently an <input>, change the opening and closing tags to be <button>. If not completed, the TBYB items will not be recognized in checkout.
- Add the following snippet to the button element found above:
data-tbyb="checkout-btn"
Preview:
- There will be no changes to the UI as a result of the above changes.
[Notfication] Mini Cart
Disclaimer : These instruction are based on 2.0 themes that Shopify has built (eg. Dawn). Please skip this step if your mini cart lists all items and allows modify quantity control.
Step 1 of 3. Add Blackcart to your Mini Cart
What this is:
This task will make the Mini Cart line items accessible to Blackcart.
Why this is important:
Modify your mini cart presentation for shoppers to reflect your TBYB program.
Theme File:
- The .liquid file that presents the mini cart notification pop-up.
- This is sometimes found under the Snippets folder, file name cart-notification.liquid ; however, your theme may be different.
Code Placement:
- Find the element that is generating the line item in the mini cart. It is usually a html tag (eg. div) and may have id="cart-notification-product" attribute on it; however it maybe different in your theme.
- Add the following attribute to the html tag found above:
data-tbyb="tbyb-minicart-line-item"
Step 2 of 3. Modify Checkout Button
What this is:
This task allows Blackcart to provide the appropriate checkout experience when TBYB items are present in the cart.
Theme File:
- The .liquid file that presents the mini cart notification pop-up.
- This is sometimes found under the Snippets folder, file name cart-notification.liquid ; however, your theme may be different (same as step 1).
Code Placement:
- Find the button html tag that is used to trigger checkout. It usually has name="checkout" or id="checkout" attribute.
Note: These attributes may however be different for your theme
- Add the following snippet to the button element found above:
data-tbyb="checkout-btn"
Preview:
- There will be no changes to the UI as a result of the above changes.
Step 3 of 3. Modify TBYB Item Tag (Optional)
What this is:
The TBYB Item tag will be activated by default once you complete step 1.
Why this is important:
Shoppers will be able to distinguish TBYB items in the cart using this the tag.
You can modify the placement of the TBYB Tag if you like (Optional).
Theme File:
- The .liquid file that presents the line item in the mini cart notification pop-up.
- This is sometimes found under the Sections folder, file name cart-notification-product.liquid ; however, your theme may be different.
Code Placement:
- Place the following snippet in the line item container.
- We recommend inserting this snippet inside a section where cart line item related information is displayed, this is usually were product-options are displayed.
<div data-tbyb="tbyb-tag"></div>
Mini Cart
Disclaimer: These instruction are based on 1.0 themes that Shopify has built (eg. Boundless). If you only have a notification type mini cart please skip this step and refer to Notification Mini Cart Section.
Step 1 of 7. Add Blackcart to your Mini Cart
What this is:
This task will make the Mini Cart line items accessible to Blackcart.
Why this is important:
Modify your mini cart presentation for shoppers to reflect your TBYB program.
Theme File:
- The .liquid file that presents the mini cart drawer or pop-up.
- This is sometimes found under the Layout folder, file name theme.liquid ; however, your theme may be different.
Code Placement:
- Find the element that is generating the line item in the mini cart. It is usually a html tag (eg. div) that is sometimes found inside a form element and may have class="cart ajaxcart" attribute on it; however it maybe different in your theme.
Note: These class names may however be different for your theme
- Add the following attribute to the html tag found above:
data-tbyb="tbyb-minicart-line-item"
Step 2 of 7. Modify TBYB Item Tag (Optional)
What this is:
The TBYB Item tag will be activated by default once you complete step 1.
Why this is important:
Shoppers will be able to distinguish TBYB items in the mini cart using this the tag.
You can modify the placement of the TBYB Tag if you like (optional).
Theme File:
- The .liquid file that presents the mini cart drawer or pop-up.
- This is sometimes found under the Layout folder, file name theme.liquid ; however, your theme may be different.
Code Placement:
- Place the following snippet in the line item container.
- We recommend inserting this snippet inside a section where mini cart line item related information is displayed, this is usually were product-options are displayed.
<div data-tbyb="tbyb-tag"></div>
Step 3 of 7. Modify Item Price
What this is:
This task will make modifications so that the price is displayed correctly (i.e. crossed out), for any items added to mini cart as TBYB.
Why this is important:
If you have the Item price element activated in your Cart Page, making modification to the price is recommended to reflect your TBYB program for shoppers.
Theme File:
- The .liquid file that presents the mini cart drawer or pop-up.
- This is sometimes found under the Layout folder, file name theme.liquid ; however, your theme may be different.
Code Placement:
- Find the element that is generating the line item (see Step 1 of 8).
- In that section, find the element(s) that display original price for one unit. It usually outputs originalLinePrice value inside one of its children tags.
- Add the following attribute to the parent element(s) found above::
data-tbyb="tbyb-price-line"
Note: Discount Price : Coming soon
Step 4 of 7. Modify Qty Control
What this is:
This task will prevent customers from increasing the quantity of TBYB items in their cart from more than a quantity of 1. This task will also prevent customers from manually editing the quantity field from the cart.
Why this is important:
TBYB limits customers to try up to one unique product variant per order.
Theme File:
- The .liquid file that presents the mini cart drawer or pop-up.
- This is sometimes found under the Layout folder, file name theme.liquid ; however, your theme may be different.
Code Placement:
- Look for input html tag(s) for the quantity input within the line item wrapper. It sometimes has type="text" attribute as well as value="{{itemQty}}".
Note: These attributes may however be different for your theme, sometimes other html tags may be used in place of input field.
- Add the following attribute to the input tag:
data-tbyb="quantity-control"
- Within the same area, look for a button html tag that increases item quantity. This button usually has an attribute of data-qty="{{itemAdd}}".
Note: Your theme may not have a html button to change quantity. If so, skip this following snippet.
- To disable the quantity increase function, add the following TBYB attribute to the plus button tag:
data-tbyb="quantity-control"
Step 5 of 7. Modify Eligibility Warning
What this is:
Blackcart allows you to set eligibility requirements for your TBYB program; such as requiring carts to meet certain minimum or maximum item quantity or price requirements in order for the cart to qualify for TBYB during checkout. These settings can be viewed and modified under the My Store section of your Merchant Portal account.
Why this is important:
Shoppers are notified of any TBYB cart eligibility requirements while they are shopping. The eligibility warning looks at your program settings under the My Store section of your Merchant Portal account, and compares them with the contents of the cart. If minimum or maximum eligibility requirements are not met, a warning message will be displayed.
To test seeing this warning message, go to the My Store section on the left hand navigation bar in your Merchant Portal account and change the minimum cart quantity from 1 to 2. Then only add one (1) TBYB item to your cart. This should trigger the warning message in your mini cart.
Theme File:
- The .liquid file that presents the mini cart drawer or pop-up.
- This is sometimes found under the Layout folder, file name theme.liquid ; however, your theme may be different.
Code Placement:
- Insert the following attribute in the location you want the warning message to be displayed. We recommend placing the eligibility warning below the line items table.
<div data-tbyb="tbyb-minicart-warning"></div>
Step 6 of 7. Modify Subtotal
What this is:
Blackcart applies its own pricing for TBYB items and accepts a mixed cart with non-TBYB items. This task allows us to override cart totals to reflect the actual cart cost to a customer.
Why this is important:
Shoppers will see the actual total of their cart in two subtotal lines.
(i.e) Try Before You Buy Deposit, and Pay Today amount.
Theme File:
- The .liquid file that presents the mini cart drawer or pop-up.
- This is sometimes found under the Layout folder, file name theme.liquid ; however, your theme may be different.
Code Placement:
- Find the html element that displays the cart total amount. It sometimes has class="ajaxcart__subtotal".
Note: These class names may however be different for your theme
- Add the following snippets to this section container.
data-tbyb="tbyb-minicart-total"
- Inside the same section found above, find the html tag that displays the subtotal label, sometimes it displays cart.general.subtotal inside its tag or has a class name of class="ajaxcart__subtotal-title.
Note: These class names and values may however be different for your theme
- Add the following tag snippet to the subtotal container:
data-tbyb="tbyb-minicart-total__text"
- In the same subtotal container, find the html element that displays the subtotal amount (totalPrice) inside its tag.
- Add the following tag snippet to the element found above:
data-tbyb="tbyb-minicart-total__price"
Step 8 of 8. Modify Checkout Button
What this is:
This task allows Blackcart to provide the appropriate checkout experience when TBYB items are present in the cart.
Theme File:
- The .liquid file that presents the mini cart drawer or pop-up.
- This is sometimes found under the Layout folder, file name theme.liquid ; however, your theme may be different.
Code Placement:
- Find the button html tag that is used to trigger checkout. It usually has name="checkout" or id="checkout" attribute, as well as type="submit".
Note: These attributes may however be different for your theme.
- Add the following snippet to the button element found above:
data-tbyb="checkout-btn"
Preview:
- There will be no changes to the UI as a result of the above changes.
Comments
0 comments
Article is closed for comments.