How to add TBYB elements to your store
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.
- 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
- 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)
- 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.
- 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.
- 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
Cart Page
Step 1 of 8: Add Blackcart to your Cart
- 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.
- 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)
- 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)
- 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.
<div data-tbyb="tbyb-tag"></div>
Step 3 of 8. Modify Item Price
- 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)
- 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
- 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)
- 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" .
- 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
- 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.
- 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
- 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).
- 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
- 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.
- Find the html element that displays the cart total amount. It sometimes has class="totals" or class="cart__subtotal-container"
- 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
- 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).
- 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"
- There will be no changes to the UI as a result of the above changes.
[Notfication] Mini Cart
Step 1 of 3. Add Blackcart to your Mini Cart
- 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.
- 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
- 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).
- 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"
- There will be no changes to the UI as a result of the above changes.
Step 3 of 3. Modify TBYB Item Tag (Optional)
- 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.
- 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
Step 1 of 7. Add Blackcart to your Mini Cart
- 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.
- 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)
- 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.
- 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
- 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.
- 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"
Step 4 of 7. Modify Qty Control
- 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.
- 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}}".
- 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
- 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.
- 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
- 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.
- Find the html element that displays the cart total amount. It sometimes has class="ajaxcart__subtotal".
- 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
- 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.
- 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"
- There will be no changes to the UI as a result of the above changes.