CTB - Bar Integration for Empire Theme

Step 1: Select the placeholder option in CTB

  1. Select the last option under the "position" setting in the bar configuration in the App
  2. Save the change

Step 2: Find theme files

  1. Go to Admin > Online Store > Themes
  2. Click the "..." button on the right-hand side, and select "Edit HTML/CSS"

Step 3: Add CTB Part I

  1. Target file: static-header.liquid
  2. Find static-header.liquid from the left-hand side file list
  3. Open the static-header.liquid file
  4. Find <section class="site-header"> in the file
  5. Add this code <div id="ctb_placeholder"></div> before the <section class="site-header">
  6. Save the changes

Step 4: Add CTB Part II

  1. Target file: theme.liquid
  2. Find theme.liquid from the left-hand side file list
  3. Open the theme.liquid file
  4. Add the following code right before the </body> tag. And save the changes.
      var ctb_adjusted = false;
      $( "#ctb_placeholder" ).on( "ctb_fully_loaded", function(event, p1) {
        if ((p1=='inserted' || p1=='inserted_sticky') && !ctb_adjusted ){
          ctb_adjusted = true;
          var ctb_height = $("#ctb_background").height();
          var site_main_top = parseInt($(".site-main").css("margin-top"));
          $( ".site-main" ).css("margin-top", ctb_height + site_main_top + "px");

Step 5: Add CSS

  1. Target file: theme.scss.liquid
  2. Find theme.scss.liquid from the left-hand side file list
  3. Open the theme.scss.liquid
  4. Add the following code at the very end of the file: #ctb_background { z-index: 800 !important; }
  5. Save the changes.

Step 6: Enjoy the Countdown Timer Bar

Congratulations. You successfully integrate the Countdown Timer Bar with your Empire theme.
If you cannot see the Countdown Timer Bar yet. Please double check Step 1 and make sure you save the settings.