Re: Dawn Theme: Add a html code area into Image Banner

Dawn Theme: Add a html code area into Image Banner

hannahdossary
Shopify Partner
58 3 7

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
3839 716 1177

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
hannahdossary
Shopify Partner
58 3 7

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
3839 716 1177

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
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...