Parallax Theme Integration - FSB

Step 1: Select the placeholder option in FSB

  1. Select the last option under the "position" setting in the bar configuration in the App
  2. Select the “Pin the bar to the position” option
  3. Save the change

Step 2: Add FSB

  1. Go to Admin > Online Store > Themes
  2. Click the "Actions" button on the right-hand side, and select "Edit code"
  3. Find theme.liquid from the left-hand side file list and open it
  4. Find <body class="
  5. Add following code right after itSave the changes.
<div id="fsb_placeholder">
  var fsb_adjusted = false;
  $( "#fsb_placeholder" ).on( "fsb_fully_loaded", function(event, p1) {
    if ((p1=='inserted' || p1=='inserted_sticky') && !fsb_adjusted ){
      fsb_adjusted = true;
      var fsb_height = $("#fsb_background").height();
      var menu_top = parseInt($(".mm-fixed-top").css("top"));
      $( ".mm-fixed-top" ).css("top", fsb_height + menu_top + "px");
      $( ".header_bar" ).css("top", fsb_height + menu_top + "px");
      $("#nav").css("z-index", 1000000);

Step 3: Update CSS

  1. Find styles.scss.liquid from the left-hand side file list and open it
  2. Find div.header_bar around line 275 of the file
  3. Remove !important in the line after "top: 0", but keep the semicolon
  4. Save the file 

Before the change:

After the change:

Enjoy the Free Shipping Bar

Congratulations. You successfully integrate the Free Shipping Bar with your Parallax theme.

If you cannot see the Free Shipping Bar yet. Please double check Step 1 and make sure you save the settings.