Skip to main content

Customize your Try Before You Buy theme to Match your Brand

Updated
After integrating all applicable Try Before You Buy elements into your Shopify theme, you will have the ability to modify the styling of certain elements through your Blackcart Merchant Portal account.
 
We suggest reviewing your integrated Shopify theme in preview mode, and keeping this preview window open in a separate tab while making modifications in the Merchant Portal so that you can view the changes as you go.
 
Prerequisites:
 

How to Edit your Try Before You Buy Theme Settings:

  1. From within your Merchant Portal account, navigate to the Theme section.
  2. Put the Theme settings into "edit mode" by selecting the Edit button on the top right corner of the page.image.png
  3. Select the tab that contains the customization options you're looking to modify.
  4. Adjust the settings to your preferences, and select Save in the bottom right corner of the page.
    • Note that saving here will not publish the changes to your Shopify theme. To publish changes to your Shopify theme, see Step 5 below.image.png
  5. When you're done making changes to your theme settings and are ready to publish to Shopify:
    • Select Save & Go Back in the lower right corner of the page.
    • Select Publish in the top right corner of the page.image.pngimage.png
  6. Preview your updated changes in your Shopify Theme to make sure you're satisfied with the updated settings.
 

Customization Options

The following customization options are available, organized by tab in the Theme Settings section of the Merchant Portal below:
 
image.png

 

Theme Variant:

Theme variants define the look of the following Try Before You Buy elements in your storefront:

    • Buttons
    • Try Before You Buy Item Tags
    • Learn More modal icons

There are three available variants: Slightly Rounded, Fully Rounded, and Squared.

 

image.png

 

TBYB Button:

The Try Before You Buy CTA button is displayed on the Product Details Page for any TBYB enabled products. The following customization options are available:
    • Button color: Hex color code
    • Button style: Solid, Outline
    • Button Text: Default setting, "Try Before You Buy", is strongly recommended
    • Caption Text Size
    • Learn More Text Margin: This is the text that appears directly under your TBYB CTA Button.
    • Divider Title Position: Default set to "None".

image.png

 
 

Learn More Modal:

The Learn More Modal is used to educate customers on how the Try Before You Buy (TBYB) program works. You can preview the Learn More Modal by clicking on the "Learn More" link below the TBYB CTA button on your product details page.
 
The following fields can be customized through the Theme Settings section of the Merchant Portal:
 

image.png

 

Cart Page:

Your Cart Page will contain several Try Before You Buy elements which can be customized as follows:
  • Try Before You Buy Item Tag
      • Tag Color: Hex color code
      • Tag Size
      • Tag Style: Solid, or Outline
      • Show Tag Info Icon: Yes or No

 

Cart Eligibility Notification Message:

  • Title
  • Container Width
  • Vertical Margin
  • Horizontal Margin
  • Button Color: Hex color code
  • Button Style: Solid, Outline

 

Mini Cart:

  • Try Before You Buy Item Tag
    • Tag Color: Hex color code
    • Tag Size
    • Tag Style: Solid, or Outline
    • Show Tag Info Icon: Yes or No

Mini Cart Eligibility Notification Message:

  • Title
  • Container Width
  • Vertical Margin
  • Horizontal Margin
  • Button Color: Hex color code
  • Button Style: Solid, Outline
image.png