Announcement

Collapse
No announcement yet.

How to Add Global Message Banner Above Top Links Site Wide?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to Add Global Message Banner Above Top Links Site Wide?

    Hello,

    I'm using the luxury-living-html5 template for my store, and have searched the forums and knowledgebase, but I can't seem to find a definitive way to add a message banner globally/site-wide at the very top of each page. I need to give information about delayed order fulfillment and shipping due to the current COVID-19 pandemic. I'm sorry--I'm just a soap maker, not a coder or computery person. :)

    Anyone know how I can achieve this simply and quickly to keep my customers informed?

    Hope you're all staying safe and healthy.

    Thanks!
    Jacki

    PS--Oops, I forgot to include my site address: https://www.woodspriteorganicbody.com

  • #2
    You can do this with https://getsitecontrol.com/ which is fairly simple to setup. There is a top banner option for most of their widgets.

    Comment


    • #3
      Hi JoeBTI,

      Thank you for the link--that service looks great for several other features and I will definitely be giving them a try. However, I was just wondering if there's a simple way to add one row above the Top Links (which, in the template I'm using, are at the very top and above my Header area) on my site Frame so that it displays the message on every page? Just a static text sentence, really. I don't need it to slide in or float or anything.

      Unfortunately, my brain just doesn't know how to think in CSS. :-/

      Thanks again!

      Originally posted by JoeBTI View Post
      You can do this with https://getsitecontrol.com/ which is fairly simple to setup. There is a top banner option for most of their widgets.

      Comment


      • #4
        I'm absolutely no expert, but you can try adding the below code and it should give you what you need. Place it in the frame.html right under the opening <body> tag. Make a backup of the frame.html before adding.

        Change colors to whatever...

        HTML Code:
        <div class="frame-msg">
        <span>Message Here</span>
        </div>
        <style>
        .frame-msg {
        background-color:#2677c4;
        padding: 10px 0;
        }
        .frame-msg span {
        color:#ffffff;
        display: block;
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        }
        @media (max-width: 767px) {
        .frame-msg span {
        padding: 0 10px;
        }
        }
        </style>

        Comment


        • #5
          Thank you! I will try this tonight and report back. I really appreciate your help! :)

          Originally posted by JoeBTI View Post
          I'm absolutely no expert, but you can try adding the below code and it should give you what you need. Place it in the frame.html right under the opening <body> tag. Make a backup of the frame.html before adding.

          Change colors to whatever...

          HTML Code:
          <div class="frame-msg">
          <span>Message Here</span>
          </div>
          <style>
          .frame-msg {
          background-color:#2677c4;
          padding: 10px 0;
          }
          .frame-msg span {
          color:#ffffff;
          display: block;
          position: relative;
          max-width: 1200px;
          margin: 0 auto;
          }
          @media (max-width: 767px) {
          .frame-msg span {
          padding: 0 10px;
          }
          }
          </style>

          Comment


          • #6
            Hi JoeBTI,

            I just wanted to thank you again for your help! It worked beautifully! I've been so crazy busy with other business related priorities that I wasn't able to sit down and try the code snippet until this morning. I SO appreciate it!

            Hope you're staying safe and healthy.

            :)

            Originally posted by JoeBTI View Post
            I'm absolutely no expert, but you can try adding the below code and it should give you what you need. Place it in the frame.html right under the opening <body> tag. Make a backup of the frame.html before adding.

            Change colors to whatever...

            HTML Code:
            <div class="frame-msg">
            <span>Message Here</span>
            </div>
            <style>
            .frame-msg {
            background-color:#2677c4;
            padding: 10px 0;
            }
            .frame-msg span {
            color:#ffffff;
            display: block;
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            }
            @media (max-width: 767px) {
            .frame-msg span {
            padding: 0 10px;
            }
            }
            </style>

            Comment

            Working...
            X