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.
Hi, can i get a full code on this? I still couldn't add klaviyo app embedded into the image banner...
User | RANK |
---|---|
228 | |
174 | |
65 | |
52 | |
48 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023