Anyone know how to make an announcement bar like this ? Dawn Theme 13.0

Aaron33aaron
Tourist
6 0 1

Hey I was wondering if anyone knew how to custom code or knew an app that can make announcement bars like this with images embeded ? Any help would be appreciated.

 

Screenshot 2024-05-09 005943.png

 

 

Screenshot 2024-05-08 141304.png

Replies 10 (10)

Dawood_Mirza_
Excursionist
62 12 19

Hi Aaron33aaron,
For a simple answer just add
🚚 Free shipping All signs! --|-- 4.9 Google rathing --|-- 🛡️ 2 year warranty
this or edit accordingly for same look and feel like the first image

 

 

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
dkdipanshu
Visitor
2 0 0

Agree with @Dawood_Mirza_ Dawood 

I have used this on my website 

 

lf-ecom-shops
Tourist
52 1 5

Hey @Aaron33aaron, of course, I am currently coding it for you 🙂

lf-ecom-shops
Tourist
52 1 5

OK, I am back, I gotcha. Just go to edit code on your theme and make a new section, call it for example announcment-bar-2, and insert this code: 

{% schema %}
{
  "name": "Announcement Bar 2",
  "settings": [
    {
      "type": "image_picker",
      "id": "icon_image_1",
      "label": "Icon Image 1"
    },
    {
      "type": "text",
      "id": "announcement_text_1",
      "label": "Announcement Text 1",
      "default": "FREE SHIPPING"
    },
    {
      "type": "image_picker",
      "id": "icon_image_2",
      "label": "Icon Image 2"
    },
    {
      "type": "text",
      "id": "announcement_text_2",
      "label": "Announcement Text 2",
      "default": "4.9 GOOGLE RATING"
    },
    {
      "type": "image_picker",
      "id": "icon_image_3",
      "label": "Icon Image 3"
    },
    {
      "type": "text",
      "id": "announcement_text_3",
      "label": "Announcement Text 3",
      "default": "3 YEAR WARRANTY"
    },
    {
      "type": "color",
      "id": "banner_background_color",
      "label": "Background Color",
      "default": "#007bff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#FFFFFF"
    }
  ],
  "presets": [
    {
      "name": "Announcement Bar 2",
      "category": "Promotional",
      "settings": {
        "icon_image_1": "",
        "announcement_text_1": "FREE SHIPPING",
        "icon_image_2": "",
        "announcement_text_2": "4.9 GOOGLE RATING",
        "icon_image_3": "",
        "announcement_text_3": "3 YEAR WARRANTY",
        "banner_background_color": "#007bff",
        "text_color": "#FFFFFF"
      }
    }
  ]
}
{% endschema %}

{% assign icon_image_1 = section.settings.icon_image_1 | img_url: 'medium' %}
{% assign icon_image_2 = section.settings.icon_image_2 | img_url: 'medium' %}
{% assign icon_image_3 = section.settings.icon_image_3 | img_url: 'medium' %}
{% assign announcement_text_1 = section.settings.announcement_text_1 %}
{% assign announcement_text_2 = section.settings.announcement_text_2 %}
{% assign announcement_text_3 = section.settings.announcement_text_3 %}
{% assign banner_background_color = section.settings.banner_background_color %}
{% assign text_color = section.settings.text_color %}

<div class="announcement-bar" style="background-color: {{ banner_background_color }}; color: {{ text_color }}; padding: 5px 10px; text-align: center; font-size: 14px; display: flex; align-items: center; justify-content: center; height: 40px;">
  <div style="display: flex; align-items: center; margin-right: 10px;">
    {% if icon_image_1 %}
      <img src="{{ icon_image_1 }}" alt="Icon Image 1" style="height: 20px; margin-right: 5px;">
    {% endif %}
    <p>{{ announcement_text_1 }}</p>
  </div>
  <div style="display: flex; align-items: center; margin: 0 10px;">
    {% if icon_image_2 %}
      <img src="{{ icon_image_2 }}" alt="Icon Image 2" style="height: 20px; margin-right: 5px;">
    {% endif %}
    <p>{{ announcement_text_2 }}</p>
  </div>
  <div style="display: flex; align-items: center; margin-left: 10px;">
    {% if icon_image_3 %}
      <img src="{{ icon_image_3 }}" alt="Icon Image 3" style="height: 20px; margin-right: 5px;">
    {% endif %}
    <p>{{ announcement_text_3 }}</p>
  </div>
</div>

Then, just customize the text and download the icons or images you want and upload them. Hope that helped 😉 

lf-ecom-shops
Tourist
52 1 5

But I have to say that's desktop optimized, I'll code it that it also optimizes for mobile, will update then

Aaron33aaron
Tourist
6 0 1

Where do I put this code ? Do I replace the existing schema in Announcement-bar.liquid or create a new section file ?

lf-ecom-shops
Tourist
52 1 5

Hey @Aaron33aaron , create a new section, call it whatever you want, I'd say custom-announcement-bar

Aaron33aaron
Tourist
6 0 1

Thank you so much I really appreciate it, is there any way you could help me with the optimized code for mobile ? For your time I'd be willing to send you some money over paypal for helping me I really appreciate it.

lf-ecom-shops
Tourist
52 1 5

Hey @Aaron33aaron, nice that you like it. I don't need money tbh, trust me, I make enough with my dropshipping stores ;), but I'll try my best to help you, just tell me your prefered layout on mobile and I'll take a look. Only thing you could do is when I officially launch LF Ecom Shops (my Shopify Dropshipping Store Design Agency) is to buy a store, only if you need one then. Could surely make a discount for you:). 

Best Regards,

Florian, CEO of LF Ecom Shops
 

Aaron33aaron
Tourist
6 0 1

Thank you for the reply, will definitely checkout your LF Ecom Shops design agency when it realeases ! I've included a picture of what it looks like on desktop and what I want it to look like on mobile.

 

Desktop:Screenshot 2024-05-10 150451.png

 

 Want I want it to look like on mobile (note the top purple bar I know how to do, I want it to be like the bottom bar where it's seperated into three columns with the dividing line and the exact same wording and 5 star rating on the middle column. 

thumbnail_IMG_0925.jpg

 

Let me know if you can help achieve this would greatly appreciate it !!