Dawn Theme: Add a html code area into Image Banner

hannahdossary
Shopify Partner
58 3 4

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 

 

 

Screenshot-2022-06-30-at-16.20.10.jpg

 

 

Designing Happy Websites for Creative Entrepreneurs
Replies 5 (5)
made4Uo
Shopify Partner
3785 710 1096

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

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
hannahdossary
Shopify Partner
58 3 4

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

 

 

 

Designing Happy Websites for Creative Entrepreneurs
made4Uo
Shopify Partner
3785 710 1096

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

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
ajn
Visitor
1 0 0

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
Visitor
1 0 0

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