Steps to Create a New Section

1. Access Your Shopify Admin:
   • Go to your Shopify admin panel.
2. Navigate to Online Store:
   • From the Shopify admin, click on Online Store.
3. Open Theme Code Editor:
   • Click on Themes.
   • Find the theme you’re currently using and click on Actions.
   • Select Edit code from the dropdown menu.
4. Add a New Section:
   • In the left sidebar, look for the Sections directory.
   • Click on Add a new section.
5. Name Your New Section:
   • In the dialog box that appears, name the new section bc-announcement. Shopify will automatically add the .liquid file extension. Click Create section.
6. Paste the Code:
   • Your new section file (bc-announcement.liquid) will open in the code editor.
   • Replace the existing code with the following code:

Section Code (bc-announcement.liquid):

<style>
  .section-{{ section.id }}.custom-bc-announcement {
    display: flex;
    align-items: center;
    height: {{section.settings.bc-announcement_height}}px;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
    background:{{section.settings.colorBackground}};
    color:{{section.settings.colorText}};
  }
  .section-{{ section.id }}.custom-bc-announcement a {
    color:{{section.settings.colorText}};
    text-decoration: none;
  }
  .section-{{ section.id }}.custom-bc-announcement .track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: bc-announcement 12s linear infinite;
  }
  .section-{{ section.id }}.custom-bc-announcement .content {
    margin-right: 40px;
    padding-left: 5px;
    font-size: {{section.settings.font_size}}px;
  }
  .section-{{ section.id }}.custom-bc-announcement svg {
    fill: {{section.settings.colorText}};
  }
  @keyframes bc-announcement {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="section-{{ section.id }} custom-bc-announcement " role="region" {{ block.shopify_attributes }}>
      {%- if section.settings.link != blank -%}
        <a href="{{ section.settings.link }}" class="">
      {%- endif -%}
          <div class="track ">
            {%- for block in section.blocks -%}
            {% render 'icon-accordion', icon: block.settings.icon %}
            <span class="content bc-announcement-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {% render 'icon-accordion', icon: block.settings.icon %}
              <span class="content bc-announcement-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {% render 'icon-accordion', icon: block.settings.icon %}
              <span class="content bc-announcement-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {% render 'icon-accordion', icon: block.settings.icon %}
              <span class="content bc-announcement-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {% render 'icon-accordion', icon: block.settings.icon %}
              <span class="content bc-announcement-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {% render 'icon-accordion', icon: block.settings.icon %}
              <span class="content bc-announcement-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {% render 'icon-accordion', icon: block.settings.icon %}
              <span class="content bc-announcement-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {% render 'icon-accordion', icon: block.settings.icon %}
              <span class="content bc-announcement-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {% render 'icon-accordion', icon: block.settings.icon %}
              <span class="content bc-announcement-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {% render 'icon-accordion', icon: block.settings.icon %}
              <span class="content bc-announcement-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </div>
          {%- if section.settings.link != blank -%}
        </a>
    {%- endif -%}
  </div>
{% schema %}
{
  "name": "bc-announcement Text",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#000"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "range",
      "id": "bc-announcement_height",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 46,
      "label": "bc-announcement height"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 8,
      "max": 100,
      "step": 2,
      "default": 24,
      "label": "Font size"
    }
  ],
    "blocks": [
    {
      "type": "text",
      "name": "Text",
      "limit": 20,
      "settings": [
         {
          "type": "text",
          "id": "new_text",
          "default": "Welcome to store",
          "label": "Text"
        },
        {
          "type": "select",
          "id": "icon",
          "options": [
            {
              "value": "none",
              "label": "none"
            },
            {
              "value": "apple",
              "label": "apple"
            },
            {
              "value": "banana",
              "label": "banana"
            },
            {
              "value": "bottle",
              "label": "bottle"
            },
            {
              "value": "box",
              "label": "box"
            },
            {
              "value": "carrot",
              "label": "carrot"
            },
            {
              "value": "chat_bubble",
              "label": "chat_bubble"
            },
            {
              "value": "check_mark",
              "label": "check_mark"
            },
            {
              "value": "clipboard",
              "label": "clipboard"
            },
            {
              "value": "dairy",
              "label": "dairy"
            },
            {
              "value": "dairy_free",
              "label": "dairy_free"
            },
            {
              "value": "dryer",
              "label": "dryer"
            },
            {
              "value": "eye",
              "label": "eye"
            },
            {
              "value": "fire",
              "label": "fire"
            },
            {
              "value": "gluten_free",
              "label": "gluten_free"
            },
            {
              "value": "heart",
              "label": "heart"
            },
            {
              "value": "iron",
              "label": "iron"
            },
            {
              "value": "leaf",
              "label": "leaf"
            },
            {
              "value": "leather",
              "label": "leather"
            },
            {
              "value": "lightning_bolt",
              "label": "lightning_bolt"
            },
            {
              "value": "lipstick",
              "label": "lipstick"
            },
            {
              "value": "lock",
              "label": "lock"
            },
            {
              "value": "map_pin",
              "label": "map_pin"
            },
            {
              "value": "nut_free",
              "label": "nut_free"
            },
            {
              "value": "pants",
              "label": "pants"
            },
            {
              "value": "paw_print",
              "label": "paw_print"
            },
            {
              "value": "pepper",
              "label": "pepper"
            },
            {
              "value": "perfume",
              "label": "perfume"
            },
            {
              "value": "plane",
              "label": "plane"
            },
            {
              "value": "plant",
              "label": "plant"
            },
            {
              "value": "price_tag",
              "label": "price_tag"
            },
            {
              "value": "question_mark",
              "label": "question_mark"
            },
            {
              "value": "recycle",
              "label": "recycle"
            },
            {
              "value": "return",
              "label": "return"
            },
            {
              "value": "ruler",
              "label": "ruler"
            },
            {
              "value": "serving_dish",
              "label": "serving_dish"
            },
            {
              "value": "shirt",
              "label": "shirt"
            },
            {
              "value": "shoe",
              "label": "shoe"
            },
            {
              "value": "silhouette",
              "label": "silhouette"
            },
            {
              "value": "snowflake",
              "label": "snowflake"
            },
            {
              "value": "star",
              "label": "star"
            },
            {
              "value": "stopwatch",
              "label": "stopwatch"
            },
            {
              "value": "truck",
              "label": "truck"
            },
            {
              "value": "washing",
              "label": "washing"
            }
          ],
          "default": "check_mark",
          "label": "check_mark"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "bc-announcement",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}

Steps to Include section is sticky above the header and moves with it when the header is scrolled

1. Access Your Shopify Admin:

   • Go to your Shopify admin panel.

2. Navigate to Online Store:

   • Click on Online Store.

3. Open Theme Code Editor:

   • Click on Themes.
   • Find the theme you’re currently using and click on Actions.
   • Select Edit code from the dropdown menu.

4. Find the Layout File:

   • In the left sidebar, locate and click on the Layout directory.
   • Open the file named theme.liquid or similar (the file that contains the HTML structure of your theme).

5. Add the Section Above the Header:

   • Find the opening <body> tag in the theme.liquid file.

   • Add the following line of code immediately after the opening <body> tag to include your BC-Announcement section:

     {% section 'bc-announcement' %} <!-- Your new BC-Announcement section -->
     
     

   This should look something like this:

   <body>
     {% section 'bc-announcement' %} <!-- Your new BC-Announcement section -->
     <!-- The rest of your header and content -->
   
   

6. Save Changes:

   • Click Save to apply the changes.

Example of Layout File Changes

Here is an example of what the relevant part of your theme.liquid file might look like after the change:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Head content, including meta tags, CSS links, etc. -->
</head>
<body>
  {% section 'bc-announcement' %} <!-- Your new BC-Announcement section -->

  <header>
    <!-- Your header content -->
  </header>

  <!-- Rest of your content -->
</body>
</html>