Omnikyo/Help Center
Guide

Custom sections, CSS and HTML

You can write sections in Liquid code, add custom CSS to any section, and embed HTML, video or third-party code safely on your storefront.

বাংলায়: ডিজাইনারে থিম মেনু খোলার পর Custom sections-এ যেকোনো সেকশন Liquid দিয়ে লিখে ফেলতে পারেন। এর পর তা picker-এ আপনার custom section সেকশনে দেখা যাবে, যেকোনো landing page বা সাধারণ page-এ যুক্ত করতে পারবেন। প্রতিটা block বা section-এ custom CSS যোগ করতেও পারেন, এবং HTML ট্যাগ embed করতে পারেন (sanitizer কিছু ট্যাগ ছেড়ে দেয় না)।

Where to find it: Theme menu › Custom sections

What it is

Custom sections are pieces of your storefront you write yourself in Liquid code. Once you save one, it appears in the section picker under Custom, and you can add it to any landing page or page the same way you add built-in sections. The code you write defines how it looks and what settings a merchant can change in the inspector.

Store-saved custom sections are yours only — they live on your store and do not appear in another store's picker. You can also disable one without deleting it, so it no longer appears in the picker but stays on any page that already uses it.

Platform custom sections are read-only examples you cannot edit or delete — they are supplied by your Omnikyo installation.

Write a custom section

  1. Open the Theme menu (top-centre, under the theme label).
  2. Select Custom sections — the editor opens full-screen with the sections list on the left.
  3. In the left rail, choose New section or New block toggle (the section radio is the default).
  4. Type the section name in the input — e.g. "Stock countdown" or "Feature row". The type field below shows the code name that will appear in the source (auto-derived from the name as you type, lowercase-hyphenated). Press Enter or click Create.
  5. The centre panel now shows the Liquid editor. Type or paste your code.
  6. The right panel shows a live render of the first preset (if the schema defines one) and a summary card with the parsed fields.
  7. Click Save to validate and save the code. The save itself runs the validation server-side — there is no client-side preview before you hit Save.
  8. After save, the section appears in the section picker under Custom, and you can insert it like any built-in section.

The section schema

Every section needs a {% schema %} JSON block at the end to define its settings and presets. The schema tells the inspector what controls to show — fields for the merchant to change — and it tells the picker what preview to display.

The most basic schema looks like this:

{% schema %}
{
  "name": "My section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading"
    }
  ],
  "presets": [
    {
      "name": "Default"
    }
  ]
}
{% endschema %}

Field types include text, textarea, richtext, color, toggle, select, image, url, number, product, collection and others. The full field vocabulary is not documented here — consult the Omnikyo Liquid reference or study an existing section's schema.

Every section must have at least one preset; the first preset is rendered live in the right panel. A preset is a named starting state — the default values for all settings, so a merchant sees a realistic preview before choosing to insert the section.

Enable and disable sections

Disabling a custom section hides it from the section picker, but it stays on any page that already uses it — the storefront still renders it.

To disable a section:

  1. Open Custom sections from the theme menu.
  2. Select the section in the left list.
  3. Click Disable. The label changes to Enable.

To bring it back into the picker, click Enable.

Delete a custom section

Deleting removes the section from your store permanently. Pages that use it will keep rendering it until you edit the page and remove it, but the code no longer exists.

  1. Open Custom sections.
  2. Select the section.
  3. Click Delete (or the delete icon).
  4. A confirmation appears: 'Delete "<label>"? Order forms that show it will drop this tier. Undo brings it back until you close the editor.'
  5. Click Delete for good or Cancel.

Undo works only until you close the custom sections editor or refresh the page.

Add custom CSS to a section or block

Every section and block has a Custom CSS field in the inspector, under the Advanced capability group.

To add CSS:

  1. Select the section or block in the outline or on the canvas.
  2. Open the inspector panel on the right (it opens automatically when you select).
  3. Scroll to Advanced and click to expand it.
  4. Find the Custom CSS field (a code editor).
  5. Type or paste your CSS. It applies to this node only — the CSS does not affect other sections, even if they have the same type.
  6. The CSS is scoped: selectors like .my-class target elements inside this section only, never the rest of the page.

Per-node custom CSS is saved in the section's draft and is part of the theme — it publishes with the theme when you hit Publish.

There is no per-page CSS field. To style one section differently on different pages, duplicate the section and customize each copy.

Embed custom HTML safely

The Custom HTML built-in section lets you embed HTML, video embeds, scripts and third-party widgets.

Add it like any section:

  1. In the outline or canvas, click + Add section.
  2. Search for or scroll to Custom HTML.
  3. Click to insert.

What the sanitizer allows

The HTML sanitizer strips some tags and attributes for security. It allows:

  • Safe tags: <p>, <div>, <span>, <a>, <img>, <video>, <iframe>, <h1>–<h6>, <strong>, <em>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <th>, <form>, <input>, <button>, <label> and others for structure and media.
  • Safe attributes: href, src, alt, title, width, height, loading, data-* and common form attributes.
  • Styles: inline style is allowed — the CSS is cleaned but the tag stays.
  • Safe protocols: https://, mailto:, tel:, and relative paths. http:// (insecure) is rejected.

It strips:

  • <script> tags (any inline JavaScript).
  • onclick, onload and other event handlers.
  • <style> tags.
  • http:// URLs (use https:// instead).
  • Attributes that could run code, like formaction.

Iframe hosts that work

Iframes are allowed to certain trusted hosts: YouTube, Vimeo, Google Maps, Spotify, Typeform and a few others. An iframe to an unknown host is stripped. If you need a third-party widget from a host not on the allowed list, ask your Omnikyo team or consult the manual.

Embed ratios and size limits

  • Video embed sizes: YouTube and Vimeo embeds auto-scale to fit the page width — you do not need to specify height.
  • Image sizes: images are responsive by default. Use width/height attributes to lock aspect ratios, or add custom CSS to the Custom HTML section.
  • Character limit: the HTML content is limited to 20,000 characters — enough for most embeds and text, but not for large data.

Common embeds

YouTube video:

<iframe width="100%" height="400" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

Google Map:

<iframe width="100%" height="400" src="https://www.google.com/maps/embed?pb=..." frameborder="0"></iframe>

Plain text or HTML:

<p>Your text or markup here.</p>

Scope — store vs. platform

Custom sections you write are store scope — they live on your store and appear in your picker only.

When you create a new theme or browse the packs, you may see sections marked Platform. These are read-only examples. You cannot edit or delete them. You can study them as examples of the Liquid shape, but to customize one, you have to write your own.

Questions people ask

Why does my section not appear in the picker after I save it?

Check the section is Enabled (not disabled). Then reload the page — sometimes the picker cache needs a refresh. If it still does not appear, re-check the schema for errors. The error message from Save should tell you what went wrong; if it does not, the server may need the syntax checked by hand.

Can I use custom sections on a regular page, or only landing pages?

Custom sections work on any page template — home, about pages, landing pages, collection pages. They appear in the section picker whenever the template accepts a section.

How do I change a custom section's name after I save it?

Click the section name in the editor (the input at the top) and edit it, then click Save. Renaming does not affect pages that use it — they keep using it under the new name.

Can merchants on my team edit custom sections, or only the owner?

Only accounts that can manage the storefront can open and edit custom sections.

What happens if I use custom CSS and custom HTML on the same section?

Custom CSS applies first, then the HTML renders. If the CSS targets HTML elements inside the custom HTML section, it will style them. Use a unique class name on your HTML elements to avoid styling other sections by mistake.

Other ways people ask this

  • custom section likho kivabe
  • liquid section likhi kemon korbo
  • section likho programmer moto
  • custom css lagabo, section e
  • html embed korbo, storefront e
  • যেকোনো HTML embed করতে পারব?
  • নিজের মত করে section বানাব
  • custom liquid code likha
  • third party widget lagabo kothay
  • script tag embed korbo?
  • custom HTML likha geche, keno dikhacche na
  • how to save a custom section
  • liquid coding for sections

Related pages

Related guides

Checked against the product on 2026-10-02.