[Custom HTML in Shopify] How To Create Custom Section For Raw HTML

In this video, you will learn how to create a New Section for your Shopify Theme for adding Raw HTML or Custom HTML. Most of the Shopify themes have Richtext section but you can't add HTML elements on those so for e.g if you want to add DIV or any other HTML element in Shopify section you can't do it without creating a new custom section taught in this video tutorial.
00:00 Intro
01:00 Adding Raw HTML in Shopify Debut Theme
Background Music Credit:
Title: Tech House vibes - Alejandro Magaña (A. M.)
Genre: Electronic/Techno
Mood: Mellow/Smooth
Download link: mixkit.co/free-stock-music/
#rawhtml #htmlsection #debuttheme
If you want help with Shopify Customization, store development, or any other web development help. Contact us at websensepro.com/contact-us/

[@painandinjurydoctor]

Thank you very much for making this video; it worked.

[@WebSensePro]

Your welcome, please like and subscribe

[@David-so6kv]

thank you so much!
was stuck on this for hours

[@WebSensePro]

Your welcome, don't forget to share the video on your network 😊😊

[@nicogomezmarketing]

Excellent!! thanks very much buddy!! 👍

[@WebSensePro]

Your welcome

[@BEATRIXKIDDO14]

Thank you, you’re brilliant 🙇🏼‍♀️🙇🏼‍♀️🙇🏼‍♀️

[@WebSensePro]

Your welcome, don't foget to subscribe

[@ArmandCerna]

Thanks very much. It helped me a lot

[@WebSensePro]

Your welcome

[@thomaskoch3788]

GREAT VIDEO*****

[@WebSensePro]

Thank you! Cheers!

[@MissRaccoon3]

Thank you for the freat tutorial. Eberything works for text but no image appears on that raw html,by example,

Black Goose Bistro
The Restaurant : THE BEST
I put the image into the file assets , with the same name,I don’t see any image loading?

[@WebSensePro]

Screen of where you are adding it?

[@d.d.7879]

thank you for your wonderful tutorial!
Can you explain how to add custom css and js (including CDN) file, when I import raw html into shopify theme just like your method?
Thank you in advance

[@WebSensePro]

Your welcome

[@WebSensePro]

You can add code in raw html

[@MrAlesoreus]

Hi, this is great. I'd like to this in the footer, do you have a vid where you show how to do this?

[@WebSensePro]

Not yet, please subscribe our channel and put the bell icon as lots of video's are on the way

[@jamievdj2824]

I already may ask this question... I'm creating my website inside adobe xd and wanted to know how to place them on shopify? I'm stuck with this part.

[@Sprenklefish]

Great video! How can I add css directly here to style the html? I'm using Turbo, so I already have a Custom HTML section.

[@WebSensePro]

By adding following code:
.class {
Property: value;
}

[@Sprenklefish]

@@WebSensePro thanks!!!!!!

[@AC-qk5lk]

How can I add a .png to a textbox on the Shopify banner? Basically, all I want to do is add a small verification badge next to text on the banner. I would really appreciate your help. Thanks !

[@WebSensePro]

What do you mean by Shopify banner?

[@AntonioNunnally]

Hi can you do a tutorial on how to add a dynamic hero image section to other pages?

[@WebSensePro]

Sure, thanks for the idea

[@jelenavuletic3737]

Hi, thanks a lot for the video. What I didn't find, and I need to add HTML in the shopify template. I need to add the code for the price - unit of measures. Such as anything liquid to write the price / measure of the unit; 50euro / 100ml. If you can help me I'd be very grateful.

[@WebSensePro]

You can email [e-mail] with more details for premium support

[@fash2314]

Hi,
thank you for the video, where should I add css for this section?
for example, in html, i designed free shipping, now through css i want to make box and shadow etc.

[@WebSensePro]

Goto Customize > Edit Code > .css fiile and add your CSS code on the bottom

[@fash2314]

@@WebSensePro I am using dawn theme, which .css should i add?

[@WebSensePro]

@@fash2314 base.css

[@fash2314]

@@WebSensePro perfectly worked. thank you so much

[@the_cali_trainer]

Hey, amazing video !! But here is what comes for me :
This file contains the following errors:
Error: Invalid schema: setting with id="text" type is invalid
Error: Invalid schema: setting with id="text" 'id' is not a valid attribute
Error: Invalid schema: setting with id="text" 'label' is not a valid attribute
Error: Invalid schema: setting with id="text" 'default' is not a valid attribute
Do you know what to do ?
Thanks

[@WebSensePro]

It seems like you placed the code on wrong line. Can you share screen recording of how you did so we can help you?

[@oliviaillescas9542]

Hello! Can i add this raw html section in a product page?

[@WebSensePro]

Yes you can in product page as well

[@thomaskoch3788]

This is Great - but why can i show it only on the botttom and not move the section higher?

[@WebSensePro]

You will have to move via code

[@ernestofelix6734]

would this work on Dawn theme?

[@WebSensePro]

You dont need it in Dawn theme, use Liquid block

[@mohamedamine0az]

thanks bro but i do not have a rich text neither html in my theme what to do ?

[@mohamedamine0az]

i found it thaaanks mate u save me

[@WebSensePro]

github.com/bilalnaseer/youtubetutorials/blob/master/rich-text.liquid Just added this for you too :) let me know if you need more help

[@mohamedamine0az]

thanks brother
@@WebSensePro

[@MotivationNYou]

@@WebSensePro this code isn't working for me, can you suggest any other way please, also i want to know if i've to make any change in above given code on github.com

[@WebSensePro]

Please share screenshot of the code which you added.

[@direxroberto61]

rich text does exist!

[@afrozanjum5086]

Can I add JavaScript in that same coloum
Inside script tag?

[@WebSensePro]

Yes you can but Raw Javascript have other issues so it's better you add it in liquid files

[@zubairjawed3191]

@@WebSensePro can we added a ready-made HTML bootstrap template in the shopify store ? how to use these HTML templates in our store

[@WebSensePro]

Unfortunately it's not possible to add Bootstrap template directly in shopify. You will have to read Shopify documentation to learn theme development which involves extensive knowledge of Liquid HTML

[@zubairjawed3191]

@@WebSensePro and the only CSS and HTML template is addable in theme means you see the very beautiful templates is not any trick to edit these files in Shopify code I hope you understand my incomplete question

[@WebSensePro]

@@zubairjawed3191 You can add CSS in theme files that's not a problem

[@justame7638]

why won't mine work? I have a section for the footer area.. sections for that is Guarantee, newsletter. those sections are unmovable like default main area sections. i tried the newsletter and that works fine, but I need the guarantee section so I can move it anywhere and not glued to the top of the footer. anyways, I tried the same way you did but does not work for the guaranteed section... getting frustrated LOL. I even tried other sections and they ALL work. here the whole code, maybe you can see something that preventing it to work: {%- capture column_width -%}
{%- render 'block-width' -%}
{%- endcapture -%}
{%- if section.blocks.size > 0 and section.settings.show_guarantee -%}





{%- for block in section.blocks -%}


{%- if block.settings.image != blank -%}



{%- elsif block.settings.guarantee_icon != blank -%}

{{ block.settings.guarantee_icon }}

{%- endif -%}
{%- unless block.settings.title == blank -%}
{{ block.settings.title }}
{%- endunless -%}
{%- unless block.settings.text == blank -%}
{{ block.settings.text }}
{%- endunless -%}
{%- unless block.settings.button_label == blank -%}

{{ block.settings.button_label | escape }}

{%- endunless -%}


{%- endfor -%}
{%- if section.blocks.size == 0 -%}
{%- render 'no-blocks' -%}
{%- endif -%}




{%- endif -%}
{% schema %}
{
"name": "Guarantee",
"class": "guarantee-section",
"max_blocks": 4,
"settings": [
{
"type": "checkbox",
"id": "show_guarantee",
"label": "Show section",
"default": true
},
{
"type": "select",
"id": "guarantee_size",
"label": "Media size",
"default": "xl",
"options": [
{
"value": "xs",
"label": "Extra small"
},
{
"value": "sm",
"label": "Small"
},
{
"value": "md",
"label": "Medium"
},
{
"value": "lg",
"label": "Large"
},
{
"value": "xl",
"label": "Extra large"
}
]
},
{
"type": "select",
"id": "section_style",
"label": "Section style",
"default": "section-border",
"options": [
{
"value": "section-blank",
"label": "Blank background"
},
{
"value": "section-default",
"label": "Accent background"
},
{
"value": "section-border",
"label": "Border top"
}
]
}
],
"blocks" : [
{
"type": "text",
"name": "Guarantee",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "guarantee_icon",
"label": "Icon",
"info": "[View all available icons](material.io/resources/icons)",
"default": "loyalty",
"placeholder": "loyalty"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Our Guarantee"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default":"Share your guarantees with your customers."
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "btn-outline-primary",
"options": [
{
"value": "",
"label": "Default"
},
{
"value": "btn--primary",
"label": "Full"
},
{
"value": "btn-outline-primary",
"label": "Outline"
}
]
},
{
"type": "text",
"id": "button_label",
"label": "Button label"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
]
}
],
"default": {
"blocks": [
{
"type": "text"
},
{
"type": "text"
},
{
"type": "text"
}
]
}
}
{% endschema %}

[@WebSensePro]

Are you still looking for help, you can contact us here websensepro.com/contact-us

[@boxboysla9646]

why is my codes different from yours ?

[@WebSensePro]

They keep updating Theme version for improvement

[@maximustermann6488]

@@WebSensePro So it doesn't work with a different code ?

[@WebSensePro]

@@maximustermann6488 no it does not

[@subhanamiri3076]

dient work brooo

[@WebSensePro]

Thanks

[@sumeetdeshmukh1245]

DUDEEE...KILL THE MUSIC. AND THE ACCENT

[@WebSensePro]

Hahaha cant fix my accent