Shopify themes, liquid, logos, and UX
Hey, can someone please help?
Im using the Dawn theme and am trying to add in a HTML code (signup form from Klaviyo) into the Image banner on the following page; https://straight-narrow-drinks.myshopify.com/pages/offer (password zeropercent)
I tried editing the image-banner.liquid file so it includes the following edits:
For HTML
{%- when 'html' -%}
<div class="banner__html {{ block.settings.html_style }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.html | escape }}</span>
</div>
For Schema
{
"type": "html",
"name": "t:sections.image-banner.blocks.html.name",
"limit": 1,
"settings": [
{
"type": "html",
"id": "text",
"default": "enter code",
"label": "t:sections.image-banner.blocks.text.settings.html.label"
}
]
},
I added these so that I could hopefully add in some HTML code into the image banner directly. It shows up on the Theme Customiser but when i view the page, there is no signup form in place.
Have i done something wrong? is there another way to do this at all? I've attached a screenshot of how it should look.
Thanks, Hannah
Hi @hannahdossary,
Try editing your html code like so
{%- when 'html' -%}
<div class="banner__html {{ block.settings.html_style }}" {{ block.shopify_attributes }}>
{{ block.settings.html}}
</div>
Try changing the schema code like so
{
"type": "html",
"name": "t:sections.image-banner.blocks.html.name",
"limit": 1,
"settings": [
{
"type": "liquid",
"id": "html",
"label": "t:sections.image-banner.blocks.text.settings.html.label"
}
]
},
hey @made4Uo thanks so much for getting back to me!
I tried it but it doesn't seem to make it work. I wonder if we can use the custom_liquid section as a guidance?
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="section-{{ section.id }}-padding">
{{ section.settings.custom_liquid }}
</div>
</div>
and schema
{
"name": "t:sections.custom-liquid.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
},
Hi @hannahdossary,
If you want guidance, the better option is the main-product.liquid, since they have a custom liquid that is in a block not a section. I believe what you are trying to achieve is block of code
HTML
{%- when 'custom_liquid' -%}
{{ block.settings.custom_liquid }}
SCHEMA
{
"type": "custom_liquid",
"name": "t:sections.main-product.blocks.custom_liquid.name",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.label",
"info": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.info"
}
]
},
Made4Uo, you beautiful thing! Thank you. Works perfectly, minus some translation errors, pasted the first block on line 102 and the second on line 380.
User | RANK |
---|---|
133 | |
91 | |
76 | |
64 | |
52 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022