Dawn Theme: Add a html code area into Image Banner

[hannahdossary]

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 

[made4Uo]

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"
        }
      ]
    },

[hannahdossary]

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"
    },

[made4Uo]

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"
        }
      ]
    },

[ajn]

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.

[DavidLee]

Hi, can i get a full code on this? I still couldn't add klaviyo app embedded into the image banner...