Dawn Theme: Add a html code area into Image Banner

Store Design

Topic summary

A user seeks help embedding a Klaviyo signup form (HTML code) directly into the Dawn theme’s Image Banner section. The form displays in the Theme Customizer but doesn’t appear on the actual page.

Initial Approach:

  • User attempted to modify image-banner.liquid by adding HTML and schema blocks
  • Code appeared in customizer but failed to render on live page

Solution Provided:
Another user recommended using custom_liquid instead of html as the block type, referencing main-product.liquid as a template:

HTML block:

{%- when 'custom_liquid' -%}
  {{ block.settings.custom_liquid }}

Schema:

"type": "custom_liquid"
"id": "custom_liquid"

Outcome:

  • Solution confirmed working with minor translation errors on lines 102 and 380
  • One user still requests full code for embedding Klaviyo app into image banner

Status: Partially resolved - main issue solved, but additional clarification requested by later participant.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

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' -%}
            
              {{ block.settings.html | escape }}

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

Screenshot-2022-06-30-at-16.20.10.jpg
Screenshot-2022-06-30-at-16.20.10.jpg1000Ă—271 26.4 KB

2

Hi @hannahdossary ,

Try editing your html code like so

{%- when 'html' -%}
            
            {{ block.settings.html}}

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

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?


  

    {{ section.settings.custom_liquid }}

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

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

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.

6

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