Liquid, JavaScript, themes, sales channels
Hello everyone,
I want to add custom liquid to the Announcement bar.
I added this code to the announcement-bar.liquid, but it looks like it's not enough.
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
What else is missing?
Can you help me?
Thank you
Hi @King-Kang
Use section.settings.custom_liquid to access the object, then add .label or .info to access the required content.
Let me know if that works out for you!
Hello @JHKCreate ,
Thank you for helping me with this survey,
I maybe understand what you are saying, but where should I add it?
{%- 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 -%}
<p class="announcement-bar__message h5">
{{ block.settings.text | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
"name": "t:sections.announcement-bar.name",
"max_blocks": 12,
"blocks": [
{
"type": "announcement",
"name": "t:sections.announcement-bar.blocks.announcement.name",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
},
{
"type": "text",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "background-1",
"label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__1.label"
},
{
"value": "background-2",
"label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__2.label"
},
{
"value": "inverse",
"label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__3.label"
},
{
"value": "accent-1",
"label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__4.label"
},
{
"value": "accent-2",
"label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__5.label"
}
],
"default": "accent-1",
"label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"default": {
"blocks": [
{
"type": "announcement"
}
]
}
}
{% endschema %}
Thank you
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024