Integrate the Quick Announcement Bar to Retina Theme with placeholder option 

1. Select the placeholder option (the last option) under the "position" settings in the App and check "Pin the bar to the position". Then save the bar config. 


2. In the theme.liquid file find <body class="{{ template | replace: '.', '-' | handle }} {% if feature_image %}feature_image{% endif %}">


3. Copy and paste the following lines under it

<div id="qab_placeholder">
    <script>
      var qab_adjusted = false;
      $( "#qab_placeholder" ).on( "qab_fully_loaded", function(event, p1) {
        if ((p1=='inserted' || p1=='inserted_sticky') && !qab_adjusted ){
          qab_adjusted = true;
          var qab_height = $("#qab_background").height();
          var menu_top = parseInt($("#header").css("top"));
          $( "#header" ).css("top", qab_height + menu_top + "px");

          var menu_top_2 = parseInt($(".header").css("top"));
          $( ".header" ).css("top", qab_height + menu_top_2 + "px");
        }
     });

  </script>
</div>


4. Click Save



NOTE: Do NOT forget to select the last option under the "position" settings in the bar configuration in the App, and save the change