FROM CACHE - en_header
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!

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 4 (4)
made4Uo
Shopify Partner
2590 477 720

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

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
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
2590 477 720

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

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
ajn
New Member
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.