Shopify themes, liquid, logos, and UX
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
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 😉
But I have to say that's desktop optimized, I'll code it that it also optimizes for mobile, will update then
Where do I put this code ? Do I replace the existing schema in Announcement-bar.liquid or create a new section file ?
Hey @Aaron33aaron , create a new section, call it whatever you want, I'd say custom-announcement-bar
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.
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
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:
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.
Let me know if you can help achieve this would greatly appreciate it !!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025