What if I want to add bulk html & css codes into custom html section in debut theme?

Solved
ShaneBond
Excursionist
15 0 20

is it good to write a lot of html & css codes inside the custom html section during designing the store? I have already tested it and found if I write 20/30 lines of css codes with 20 lines of html code inside the custom html, the lighthouse starts giving the warning to reduce my unused admin style css. although, not a single line of code is unused. can anyone suggest me to do it in the right way?

Thank you.

KetanKumar
Shopify Partner
22541 2281 8387

@ShaneBond 

can you please create custom section and add your html code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ShaneBond
Excursionist
15 0 20

Hi! Thank you for your quick response. but the problem has not fixed yet. I am going to tell you what I have done step by step.

 

1. I have created a section called custom-html.liquid

2. Put the below code inside of it:

<div id="custom-html-section">
{%- if section.settings.title != blank -%}
<div class="custom-html-title"><h2>{{section.settings.title}}</h2></div>
{%- endif -%}
<div class="custom-html-code">{{section.settings.custom_html}}</div>

<style>
#custom-html-section{position:relative;}
.custom-html-title{text-align:center;}
</style>

{% schema %}
{
"name": "html",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type":"textarea",
"id": "custom_html",
"label": "HTML"
}
],
"presets": [
{
"name": "Custom HTML",
"category": "Custom",
"settings": {

}
}
]
}
{% endschema %}

 

3. Then went to the customizer.

4. added the custom-html section to the front end.

5. put my html and css code.

6. let run the lighthouse.

Result: Remove unused css from admin style css file.

 

again, I tried it in a different way. This time I put the below code inside the custom-html.liquid file.

 

<div id="custom-html-section">
{%- if section.settings.title != blank -%}
<div class="custom-html-title"><h2>{{section.settings.title}}</h2></div>
{%- endif -%}
<div class="custom-html-code">
I put all html codes here
</div>

<style>
I put all css rules here
</style>

{% schema %}
{
"name": "html",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type":"textarea",
"id": "custom_html",
"label": "HTML"
}
],
"presets": [
{
"name": "Custom HTML",
"category": "Custom",
"settings": {

}
}
]
}
{% endschema %}

 

Result: Remove unused css from admin style css file.

 

can you suggest me the right way to do it, please?

Thank you.

KetanKumar
Shopify Partner
22541 2281 8387

@ShaneBond 

yes please share issue images?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ShaneBond
Excursionist
15 0 20

sorry to interrupt you again. in both cases, the issue looks like this 

admin style css.PNG 

 

Thank you

0 Likes
ShaneBond
Excursionist
15 0 20

@KetanKumar , sorry my bad. it's probably encountered from the admin area, as I was working on the backup file and testing its performance. if I publish the original file and encounter the same problem, I will let you know here. please don't waste your valuable time solving this problem.

Thank you.

KetanKumar
Shopify Partner
22541 2281 8387

@ShaneBond 

no rush 

thanks for update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ShaneBond
Excursionist
15 0 20

Hi, @KetanKumar . Hope you are doing great!
I wonder if I want to stop loading my theme css file on a specific page, say homepage, how will I do that? I couldn't find any helpful article on that over the internet. I will appreciate if you help me out.

Thank you.

KetanKumar
Shopify Partner
22541 2281 8387

This is an accepted solution.

@ShaneBond 

can you minifiy your css may be help for you

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ShaneBond
Excursionist
15 0 20

Yes, I can. Thank you