Hello @HH_2023,
I am sharing the complete code with you. In this implementation, I have created settings for top, bottom, left, and right spacing, along with font size, font weight, and alignment options.
After reviewing the Kids Secret announcement bar, I also created a separate mobile text block. This ensures that on mobile devices, only the mobile-specific text is displayed, and the desktop text is hidden.
You only need to add the code and update the text and images as per your requirements.
{%- style -%}
.announcement-bar-{{ section.id }} {
background-color: {{ section.settings.background_color }};
color: {{ section.settings.text_color }};
padding: {{ section.settings.padding_top }}px {{ section.settings.padding_horizontal }}px {{ section.settings.padding_bottom }}px;
font-size: {{ section.settings.font_size }}px;
font-weight: {{ section.settings.font_weight }};
}
.announcement-bar__wrapper.page-width {
width: 100%;
}
.announcement-bar-{{ section.id }} .announcement-bar__content {
display: flex;
align-items: center;
justify-content: {{ section.settings.alignment }};
gap: {{ section.settings.block_spacing }}px;
overflow: visible;
}
.announcement-bar-{{ section.id }} .announcement-bar__block {
display: flex;
align-items: center;
gap: 15px;
flex-shrink: 0;
white-space: nowrap;
}
.announcement-bar-{{ section.id }} .announcement-bar__text {
font-size: {{ section.settings.font_size }}px;
font-weight: {{ section.settings.font_weight }};
margin: 0;
line-height: 1.4;
}
.announcement-bar-{{ section.id }} .announcement-bar__image-block {
display: flex;
align-items: center;
gap: 10px;
}
.announcement-bar-{{ section.id }} .announcement-bar__image {
height: {{ section.settings.image_height }}px;
width: auto;
object-fit: contain;
}
/\* Mobile visibility \*/
@media screen and (max-width: 749px) {
.announcement-bar-{{ section.id }} .announcement-bar__block--text {
display: none !important;
}
.announcement-bar-{{ section.id }} .announcement-bar__block--mobile-text {
display: flex !important;
}
}
@media screen and (min-width: 750px) {
.announcement-bar-{{ section.id }} .announcement-bar__block--mobile-text {
display: none !important;
}
.announcement-bar-{{ section.id }} .announcement-bar__content {
flex-wrap: wrap;
justify-content: {{ section.settings.alignment }};
}
}
{%- endstyle -%}
<div class="announcement-bar__content">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'text' -%}
<div class="announcement-bar__block announcement-bar__block--text" {{ block.shopify_attributes }}>
<p
class="announcement-bar__text"
style="font-size: {{ block.settings.font_size }}px; font-weight: {{ block.settings.font_weight }};"
>
{{ block.settings.text }}
</p>
</div>
{%- when 'mobile_text' -%}
<div class="announcement-bar__block announcement-bar__block--mobile-text" {{ block.shopify_attributes }}>
<p
class="announcement-bar__text"
style="font-size: {{ block.settings.font_size }}px; font-weight: {{ block.settings.font_weight }};"
>
{{ block.settings.text }}
</p>
</div>
{%- when 'images' -%}
<div class="announcement-bar__block announcement-bar__block--images" {{ block.shopify_attributes }}>
<div class="announcement-bar__image-block">
{%- if block.settings.image_1 != blank -%}
<img
src="{{ block.settings.image_1 | image_url: width: 200 }}"
alt="{{ block.settings.image_1.alt | escape }}"
class="announcement-bar__image"
loading="lazy"
width="{{ block.settings.image_1.width }}"
height="{{ block.settings.image_1.height }}"
>
{%- endif -%}
{%- if block.settings.image_2 != blank -%}
<img
src="{{ block.settings.image_2 | image_url: width: 200 }}"
alt="{{ block.settings.image_2.alt | escape }}"
class="announcement-bar__image"
loading="lazy"
width="{{ block.settings.image_2.width }}"
height="{{ block.settings.image_2.height }}"
>
{%- endif -%}
</div>
</div>
{%- endcase -%}
{%- endfor -%}
</div>
{% schema %}
{
“name”: “Announcement Bar New”,
“tag”: “section”,
“class”: “section-announcement-bar”,
“settings”: [
{
"type": "header",
"content": "Style Settings"
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#2c2c2c"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#ffffff"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding Top",
"default": 12
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Padding Bottom",
"default": 12
},
{
"type": "range",
"id": "padding_horizontal",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Padding Horizontal",
"default": 20
},
{
"type": "range",
"id": "font_size",
"min": 10,
"max": 24,
"step": 1,
"unit": "px",
"label": "Default Font Size",
"default": 14,
"info": "Default font size for all blocks. Can be overridden per block."
},
{
"type": "select",
"id": "font_weight",
"label": "Default Font Weight",
"default": "400",
"options": \[
{
"value": "400",
"label": "Regular"
},
{
"value": "700",
"label": "Bold"
}
\]
},
{
"type": "select",
"id": "alignment",
"label": "Content Alignment",
"default": "space-between",
"options": \[
{
"value": "flex-start",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "flex-end",
"label": "Right"
},
{
"value": "space-between",
"label": "Space Between"
}
\]
},
{
"type": "range",
"id": "block_spacing",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Block Spacing",
"default": 30
},
{
"type": "range",
"id": "image_height",
"min": 16,
"max": 80,
"step": 2,
"unit": "px",
"label": "Image Height",
"default": 24
}
],
“blocks”: [
{
"type": "text",
"name": "Text Block",
"settings": \[
{
"type": "textarea",
"id": "text",
"label": "Text",
"default": "Enter your announcement text here"
},
{
"type": "range",
"id": "font_size",
"min": 10,
"max": 24,
"step": 1,
"unit": "px",
"label": "Font Size",
"default": 14
},
{
"type": "select",
"id": "font_weight",
"label": "Font Weight",
"default": "400",
"options": \[
{
"value": "400",
"label": "Regular"
},
{
"value": "700",
"label": "Bold"
}
\]
}
\]
},
{
"type": "images",
"name": "Images Block",
"settings": \[
{
"type": "image_picker",
"id": "image_1",
"label": "Image 1"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image 2"
}
\]
},
{
"type": "mobile_text",
"name": "Mobile Text Block",
"settings": \[
{
"type": "textarea",
"id": "text",
"label": "Mobile Text",
"default": "Enter your mobile announcement text here",
"info": "This text will only be visible on mobile devices. Regular text and image blocks will be hidden on mobile."
},
{
"type": "range",
"id": "font_size",
"min": 10,
"max": 24,
"step": 1,
"unit": "px",
"label": "Font Size",
"default": 14
},
{
"type": "select",
"id": "font_weight",
"label": "Font Weight",
"default": "400",
"options": \[
{
"value": "400",
"label": "Regular"
},
{
"value": "700",
"label": "Bold"
}
\]
}
\]
}
],
“presets”: [
{
"name": "Announcement Bar New",
"blocks": \[
{
"type": "text",
"settings": {
"text": "30-Day Returns"
}
},
{
"type": "text",
"settings": {
"text": "Free shipping Australia-wide over $150"
}
},
{
"type": "images",
"settings": {}
},
{
"type": "mobile_text",
"settings": {
"text": "Free shipping over $150"
}
}
\]
}
]
}
{% endschema %}
Please review and let me know if any changes are needed.
Thanks.
