3-column Announcement Bar

Let's start with a straightforward process: duplicate our theme. This will ensure we're not changing the currently published theme and give you peace of mind as you work.

Select the three-dot menu of the duplicated theme and edit the code. 

Open the sections tab and click "Add a new section" just below the sections tab. Then, name your new section here. I am going to use "3-col-announcement-bar."

We will start by setting up the schema with our newly created section. The schema will allow us to add all the section settings, including the Shopify admin options. Please copy the code below, replace the default schema settings, and click the save button.

{% schema %}
{
  "name": "3 Column Announcement Bar",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "column_one",
      "label": "Column One Text",
      "default": "Column One"
    },
    {
      "type": "text",
      "id": "column_two",
      "label": "Column Two Text",
      "default": "Column Two"
    },
    {
      "type": "text",
      "id": "column_three",
      "label": "Column Three Text",
      "default": "Column Three"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#121212"
    }
  ],
  "presets": [
    {
      "name": "3 Column Announcement Bar"
    }
  ],
  "enabled_on": {
    "groups": ["header"]
  }
}
{% endschema %}

Looking at the bottom of the schema, you will see an option called "enabled_on."  This option only allows you to add this section to the theme header. You can remove this setting to use this section anywhere within the theme.

‍

Your new section should look like this:

Now, we will add the main body of the section with HTML and Liquid. Please copy the code below and paste it above the schema code. Then, save what we just added.

A span with liquid code in each div will allow us to change the text in each column from the admin console.

Next, we will add the CSS to style the main content of this section. Please copy the code below and paste it above the HTML code. Then we can save everything again.

{%- style -%}
  .announcement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    background: {{ section.settings.background_color }};
    color: white;
    padding: 15px;
  }

  .announcement-grid > * {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
  }

  .announcement-grid p {
    margin: 0;
  }

  .announcement-grid .announcement-container {
    padding-left: 10px;
    padding-right: 10px;
    border-right: 1px solid white;
    border-left: 1px solid white;
  }
{%- endstyle -%}

The liquid code inside the background option in the CSS allows us to use the color picker in the Shopify admin.

Now, we can return to the themes option in our online store and select the customize button. In the header, we can choose the "Add section option" and add the new "3-Column Announcement Bar" section we just created. Again, save your changes.

Looking to the right, you can see the available admin options for this newly created section. You can change the text in each column and the background color for the entire section.

Lastly, we will rename the copy of our old theme and set it as our currently published theme in our store.

Thanks for visiting. I hope I have helped you solve your problem. Feel free to challenge yourself and change the styling of your new section.