Adding the Blackcart TBYB Widget to Your Storefront

This article will cover instructions for adding the Blackcart app block to your theme and the app block settings that effect the style of the TBYB add to cart widget.

Requirements for Getting Started

• Install the Blackcart App
• Enable Shopify Payments
• Set TBYB Program Configurations
• Set Return Configurations
• Make Products Eligible for Try Before You Buy
• You are using a Shopify theme built on Liquid. For completely custom storefronts built on Vue.js or React, contact Merchant Success at merchantsupport@blackcart.com for specific documentation. 

Adding and Customizing the TBYB Add to Cart Widget

This section will include instructions for how to add the TBYB add-to-cart widget to your default product page, how to position the TBYB add-to-cart widget, how to set the default selection for the TBYB toggle style, and how to change the display of the TBYB widget to a button. 

TBYB add-to-cart widget styles

How to Add the TBYB App Block

Step 1 - Open the Blackcart App

1. 1. From your Shopify Admin dashboard, select "Apps" from the left hand navigation menu and click on the Blackcart app from the list of Installed apps. The Blackcart App will open to the onboarding wizard view. 
      
      
      
      
   2. Once the Program Configurations and Returns Configurations tasks are completed within the onboarding wizard, you will land on the Storefront Setup tab. 
      
      

Step 2 - Add the TBYB Widget

The TBYB add-to-cart widget is added as an app block to your default product template within Shopify's theme editor. The widget will be automatically placed closest to your buy buttons. If the widget is unable to be placed automatically, you can add it in manually. 

1. From the Storefront Setup tab, click the "Install in Theme" button.
   Note that by clicking "Install in Theme", the theme editor will open for your published theme by default. It is important to note that the TBYB app block will only be visible to live traffic when you run the "Launch" action as the final step in the onboarding wizard. You will still be able to preview your changes in your published theme prior to launching. If you'd prefer to work in an unpublished theme, follow these instructions here for adding the Blackcart app block from your unpublished theme. 
   
   
   
   
2. You will be redirected to your store's default product template within Shopify's theme editor. Notice that the TBYB widget has been added as an app block.
   
   
   
   
3. To position your TBYB widget, hover over the app block with your mouse and drag the block by grabbing the double elipsis left of the app block text.
   
   
   
   
4. Drag the app block and place it above the "Buy Buttons". This is the recommended placement for the TBYB widget.
   
   
   
   
5. Once you're satisfied with the position and style of your add-to-cart widget, click "Save" from the theme editor. If you'd like to modify the style of your TBYB add-to-cart widget or adjust the default position of the toggle, following the instructions here.
   
   
   
   

How to Manually Add the TBYB App Block

Follow the steps below to manually add the TBYB app block to your theme or to any draft theme. Using a draft theme can be useful when testing the experience prior to launching on your live storefront.

Step 1 - Navigate to your default product template in your draft theme

1. Select your draft theme and click "Customize"
   
   
   
   
2. Using the top bar navigation select the default PDP template

Step 2 - Add the app block

1. From the left hand navigation select "Add block".
   
   
   
   
2. Select "Apps" from the corresponding menu and then "Blackcart TBYB".
   
   
   
   
3. Follow steps 3-4 from "Add Your TBYB Widget" to position the app block.
   
   

How to Customize the TBYB Add To Cart Widget

There are two different styles of TBYB add-to-cart widgets you can choose from, the toggle style or the button style. We recommend the toggle style which has shown to drive a 40% higher conversion rate compared to the button style since the toggle more clearly explains the value of the TBYB offer to shoppers. 

Step 1 - Select the Style of Your TBYB Add to Cart Widget

1. From within the theme editor, click into the Blackcart TBYB block. From there, you will see a Blackcart TBYB menu open where you can further customize your Blackcart TBYB block. 
   
   
   
   
   
2. From the Blackcart TBYB app block menu select the "Toggle" or "Button" setting.

Step 2 - Set the Default Position of the TBYB Toggle

The default position of the TBYB add-to-cart toggle will be set to Try Before You Buy following installation.  We recommend keeping this selection to encourage site users to participate in the program and help drive add-to-cart rate. To change the default position of the toggle to "Pay Today" follow the steps below: 

1. Open the Blackcart TBYB app block menu
2. Check or Uncheck the setting, "TBYB as default" 
   
   
   
   
3. Click Save
   
   
   
   
4. Once you're satisfied with the position and style of your TBYB add-to-cart widget, click Save from the Theme Editor. You're now ready to move on to the next step in the Blackcart storefront integration , TBYB Cart Modifications.