Shopify themes, liquid, logos, and UX
Here is the link to my website:
Here is the link to the website I am trying to replicate:
You can try this code by following these steps:
Go to Online Store->Theme->Edit code.
Search file theme.liquid
Paste the below code at the bottom of the file -> Save
Code-
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;600;700;800&family=Poppins:wght@700&disp..." rel="stylesheet">
<style>
.announcement-bar__message {
font-size: 13px;
font-family: poppins medium;
}
</style>
I have added font size as 13px adjust accordingly
To add trucks and emoji just search truck emoji on Google and copy paste
Please share the code of the "announcement-bar.liquid" file.
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}
<div class="announcement-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
{%- if block.settings.text != blank -%}
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
{%- endif -%}
<div class="page-width">
<p class="announcement-bar__message {{ block.settings.text_alignment }} h5">
<span>{{ block.settings.text | escape }}</span>
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
</div>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
"name": "t:sections.announcement-bar.name",
"max_blocks": 12,
"class": "announcement-bar-section",
"blocks": [
{
"type": "announcement",
"name": "t:sections.announcement-bar.blocks.announcement.name",
"settings": [
{
"type": "text",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "accent-1",
"label": "t:sections.all.colors.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"default": {
"blocks": [
{
"type": "announcement"
}
]
}
}
{% endschema %}
@robertbarta ,
Do to Edit Code > sections > add new Section > name it anything like Announcementbar-2
remove default code and add 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": "color",
"id": "banner_background_color",
"label": "Background Color",
"default": "#000000"
},
{
"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",
"banner_background_color": "#000000",
"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 announcement_text_1 = section.settings.announcement_text_1 %}
{% assign announcement_text_2 = section.settings.announcement_text_2 %}
{% 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; margin-bottom: 2px;">
{% 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; margin-bottom: 2px;">
{% endif %}
<p>{{ announcement_text_2 }}</p>
</div>
</div>
then from customizer add this new section to header
select your colors for font and background, enter your text, For addition if images go to : https://remixicon.com/
search for truck image
add images and then good to go
Do give a like and mark it as solution, if I have been helpful
It shows error when I try to save the file
Sorry for the delay, I got cought up in some important work
Just remove comma(,) from end line 19
dawood can you please help me also,
using the debutify theme and we want to put the same style of google icons in the announcement bar as this one below can you please help us
the store below is our current store
we are also having issues with the logo upload off canva it pushes our header bigger when we make the font bigger (as you can see with the surrounding blue rectangle)
if you could help us it would be much appreciated
Hi @cd22 , Please share the store URL for me to check the theme Documentation since you are using and third party theme.
You have issues with logo and the icons right?
BR
Dawood Mirza
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024