Marketing your TBYB Program

This article will cover best practices for marketing your Try Before You Buy (TBYB) program to your customers. 

To optimize the impact of TBYB on your conversion rate, it is essential that awareness marketing around the program reaches as much of your site traffic as possible and customers are educated early on in their shopping journey. 

To determine the placement of your Try Before You Buy marketing assets, we suggest looking at where most of your sessions are starting using the Shopify Sessions by landing page report.

To help get you started, we've created an easy to install marketing banner. The banner is fully customizable (colours, fonts, icons), and can be installed in a matter of minutes. See below for an example of what the banner could look like on desktop and mobile.

Desktop:

Mobile:

How to Implement the TBYB Marketing Banner

Step 1: Add the banner liquid file to your theme sections

1. From your Shopify theme dashboard, select the theme to install the banner in by clicking the ellipses on the theme row and select "Edit Code".
   
   
   
   
2. From the code editor create a new section file by selection "Add a new section".
3. Select "liquid" for the file format and label the section "blackcart-marketing".
   
   
   
   
4. Copy and paste the code below into the section file - please note that the CSS for the section is the default recommended styling for the section. This includes spacing, font weight, and mobile styling for the section. All font families, font color, and background color of the section should be customized to your site's branding. The styles can be added into a separate stylesheet for best practice.

<!-- TBYB marketing banner html -->
<section id="section--{{ section.id }}" style="background: {{ section.settings.section_background }};">
 <div class="flex-container">
  <div class="item1">
   <h1 style="font-size:{{ section.settings.heading_font_size }}px" id="heading-title-h2" class="h2 heading">{{ section.settings.heading }} </h1>
   <span class="message">{{ section.settings.message }}</span>
  </div>
  <div class="item2">
  {%- for block in section.blocks -%}
   {%- case block.type -%}
    {%- when 'logo__text' -%}
     {%- assign image = block.settings.image -%}
      <div class="displayColumn">
     {%- if block.settings.image != blank -%}
      {{ image | image_url: width: image.width | image_tag: class: 'icon-section-flex', loading: 'lazy' }}
     {%- endif -%}
    <span class="icon-message">{{ block.settings.text }} </span>
    </div>
   {%- endcase -%}
   {%- endfor -%}
  </div>
 </div> 
</section>

<!-- TBYB marketing banner styles -->
<style>
 .heading-title-h2 {
   font-weight: bold;
   margin-bottom: 20px !important;
 }
 .flex-container {
   text-align: center;
   display: flex;
   justify-content: center; 
   flex-direction: column; 
   height: 100%;
   padding: 15px;
   gap: 5px;
 }
 .icon-section-flex {
   max-width: 25px;
   max-height: 25px;
 }
 .flex-container > div{
   padding: 8px;
 }
 .item2 {
   display: flex;
   justify-content: inherit;
   align-items: unset;
 }
 .displayColumn {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   padding: 1em 4em;
 }
 span.message {
   display: inline-block;
   max-width: 27%;
 }
.displayColumn > span {
}

 /* mobile styles */
 @media screen and (max-width: 769px) {
  .displayColumn > span {
    font-size: 16px;
  }
  span.message {
    font-size: 14px;
    max-width: 100%;
  }
  .item2 {
    display: flex;
    justify-content: inherit;
    align-items: unset;
    flex-direction: column;
  }
  .displayColumn {
    flex-direction: row;
    align-items: center;
    padding: 1em 2.2em;
    gap: 40px;
    justify-content: flex-start;
  }
  .flex-container > div {
    padding: 25px;
  }
 }
</style>

<!-- TBYB marketing banner schema -->
{% schema %}
  {
    "name": "TBYB Banner",
    "settings": [
    {
      "type": "color",
      "id": "section_background",
      "label": "Section Background",
      "default": "#faf5eb"
    },
    {
      "type": "range",
      "id": "heading_font_size",
      "label": "Heading Font Size",
      "min": 12,
      "max": 70,
      "step": 1,
      "default": 32,
      "unit": "px"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Try at Home Before you Buy"
    },
    {
      "type": "textarea",
      "id": "message",
      "label": "Message",
      "default": "Pay for what you love and send the rest back."
    }
  ],
  "blocks": [
    {
      "name": "Logo & Text",
      "type": "logo__text",
      "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "text",
      "label": "Text"
    }
   ]
  }
 ],
 "presets": [
   {
     "name": "TBYB Banner"
   }
  ]
 } 
{% endschema %}

Step 2: Add the banner section to your default collection template

1. From the Shopify theme dashboard select "Customize".
   
   
   
   
2. Using the page drop down on the top of the editor, navigate to your default collection template.
   
   
   
   
3. From the theme lefthand navigation menu select "Add section". Add the "TBYB Banner" section.
   
   
   
   
4. Use the double ellipses left of the section to drag it to the top of the collection template.
   
   

Step 3: Add the banner content and provided icons

1. Click into the section to modify the default heading and description text. You may also adjust the background color by clicking into the color picker and change the header font-size to match your site branding from here.
   
   
   
   
2. From the theme editor left hand navigation menu add the program icons by adding them as blocks. To add the first block select "Add Logo & Text".
3. Click into the "Logo & Text" block and upload the first icon, label the icon according to the program phase. Access Blackcart provided icons here.
   
   
   
   
4. Repeat the above step for the three remaining icons.