Injecting your own HTML snippets into Shopify hands you pixel-level control and integration freedom, letting you extend the platform far beyond default theme options unlocking several strategic advantages:
Design Control
• Builds bespoke layouts and micro-components that standard sections can’t replicate
• Embeds hand coded grids, tables, or icon sets for ultra precise brand consistency
• Enables interactive effects tooltips, accordions, custom loaders without waiting for theme updates
• Adapts quickly to campaign creatives by pasting purpose-built markup right where it’s needed
Feature Flexibility
• Integrates third party widgets such as dynamic forms, video players, or booking calendars via native embed tags
• Adds conditional logic or A/B test blocks to iterate on CTAs without extra apps
• Supports advanced product configurators or calculators that rely on bespoke markup hooks
• Facilitates rapid prototyping drop code, preview changes, and iterate in minutes
Performance Optimization
• Eliminates heavy, all in one apps by replacing them with lean, purpose built HTML + CSS + vanilla JS
• Loads only the assets you need, preserving Core Web Vitals and improving page speed scores
• Enables inline critical CSS and deferred non critical scripts, optimizing first paint and time to interactive
• Reduces dependency on external CDNs when you host lightweight assets directly in theme files
SEO Advantages
• Implements semantic markup (FAQPage, HowTo, Review snippets) to win rich result real estate
• Adds alt text, lazy-loading attributes, and responsive image srcset for better crawlability
• Embeds breadcrumb lists or secondary navigation links that boost internal linking structure
• Facilitates inline schema updates faster than relying on theme wide adjustments
CODE :
{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}
<div class="onhow-html-handler"
style="
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
">
<div class="page-width">
<style>
.onhow-html-header {
text-align: {{ section.settings.heading_alignment }};
}
.onhow-html-title {
font-family: var(--font-heading-family);
font-weight: var(--font-heading-weight);
font-size: {{ section.settings.heading_font_size }}px;
line-height: 1.3;
margin-bottom: {{ section.settings.title_spacing }}px;
color: {{ section.settings.heading_color }};
background-color: {{ section.settings.heading_bg_color }};
display: inline-block;
padding: 0.5rem 1rem;
clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%);
}
.onhow-html-subtitle {
font-family: var(--font-body-family);
font-weight: var(--font-body-weight);
font-size: {{ section.settings.subtitle_font_size }}px;
line-height: 1.5;
color: {{ section.settings.subtitle_color }};
margin-bottom: {{ section.settings.subtitle_spacing }}px;
max-width: 90%;
display: block;
}
.onhow-html-content {
background: {{ section.settings.content_bg_color }};
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 4px 25px rgba(0,0,0,0.08);
}
.onhow-custom-html-container {
position: relative;
z-index: 1;
}
</style>
{% if section.settings.show_heading or section.settings.show_subtitle %}
<div class="onhow-html-header">
{% if section.settings.heading != blank and section.settings.show_heading %}
<h2 class="onhow-html-title">{{ section.settings.heading }}</h2>
{% endif %}
{% if section.settings.subtitle != blank and section.settings.show_subtitle %}
<div class="onhow-html-subtitle">{{ section.settings.subtitle }}</div>
{% endif %}
</div>
{% endif %}
<div class="onhow-html-content">
<div class="onhow-custom-html-container">
{% if section.settings.html_code != blank %}
<div class="onhow-scoped-content" id="onhow-content-{{ section.id }}">
{{ section.settings.html_code }}
</div>
<script>
(function() {
const container = document.getElementById('onhow-content-{{ section.id }}');
if (!container) return;
let html = container.innerHTML;
// Extract CSS from style tags and scope it
const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
let scopedCSS = '';
let match;
while ((match = styleRegex.exec(html)) !== null) {
let css = match[1];
// Scope all selectors to the container
css = css.replace(/([^{}]+){/g, function(match, selector) {
// Skip @rules like @media, @keyframes
if (selector.trim().startsWith('@')) return match;
// Clean and scope the selector
const cleanSelector = selector.trim();
if (cleanSelector === 'body' || cleanSelector === 'html') {
return '#onhow-content-{{ section.id }} {';
}
return '#onhow-content-{{ section.id }} ' + cleanSelector + ' {';
});
scopedCSS += css;
}
// Remove all style tags from HTML
html = html.replace(styleRegex, '');
// Remove document structure tags
html = html.replace(/<!DOCTYPE[^>]*>/gi, '');
html = html.replace(/<html[^>]*>/gi, '');
html = html.replace(/<\/html>/gi, '');
html = html.replace(/<head[^>]*>[\s\S]*?<\/head>/gi, '');
html = html.replace(/<body[^>]*>/gi, '');
html = html.replace(/<\/body>/gi, '');
// Clean up extra whitespace
html = html.trim();
// Update container with cleaned HTML
container.innerHTML = html;
// Add scoped CSS
if (scopedCSS) {
const styleElement = document.createElement('style');
styleElement.textContent = scopedCSS;
container.parentNode.insertBefore(styleElement, container);
}
})();
</script>
{% else %}
<div style="text-align: center; padding: 2rem; color: #777;">
<p>No HTML content has been added yet. Please add HTML code in the section settings.</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "HTML Handler - OnHOW",
"settings": [
{
"type": "header",
"content": "Heading Settings"
},
{
"type": "checkbox",
"id": "show_heading",
"label": "Show Heading",
"default": true
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Custom HTML Content"
},
{
"type": "range",
"id": "heading_font_size",
"min": 16,
"max": 64,
"step": 1,
"unit": "px",
"label": "Heading Font Size",
"default": 32
},
{
"type": "color",
"id": "heading_color",
"label": "Heading Text Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "heading_bg_color",
"label": "Heading Background Color",
"default": "#3a3a3a"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Heading Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
}
],
"default": "left"
},
{
"type": "header",
"content": "Subtitle Settings"
},
{
"type": "checkbox",
"id": "show_subtitle",
"label": "Show Subtitle",
"default": true
},
{
"type": "textarea",
"id": "subtitle",
"label": "Subtitle",
"default": "Display any custom HTML code in this section. Perfect for embedding forms, widgets, or custom markup."
},
{
"type": "range",
"id": "subtitle_font_size",
"min": 12,
"max": 32,
"step": 1,
"unit": "px",
"label": "Subtitle Font Size",
"default": 16
},
{
"type": "color",
"id": "subtitle_color",
"label": "Subtitle Text Color",
"default": "#6b7280"
},
{
"type": "color",
"id": "content_bg_color",
"label": "Content Background Color",
"default": "#ffffff"
},
{
"type": "html",
"id": "html_code",
"label": "HTML Code",
"info": "Paste your HTML code here"
},
{
"type": "header",
"content": "Section Padding"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Top Padding",
"default": 32
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Bottom Padding",
"default": 32
},
{
"type": "header",
"content": "Spacing Controls"
},
{
"type": "range",
"id": "title_spacing",
"min": 0,
"max": 80,
"step": 4,
"unit": "px",
"label": "Space After Title",
"default": 8
},
{
"type": "range",
"id": "subtitle_spacing",
"min": 0,
"max": 80,
"step": 4,
"unit": "px",
"label": "Space After Subtitle",
"default": 24
}
],
"presets": [
{
"name": "HTML Handler - OnHOW",
"category": "Custom Content"
}
]
}
{% endschema %}