Every theme offers a built-in Custom code section, next to the Custom code block. Use it to add your own HTML or Vascula to a page as a section of its own. In the theme editor, choose Add section and find Custom code under Advanced.
Settings
Setting |
What it does |
|---|---|
Code |
Your HTML or Vascula. |
Heading |
Optional. A heading shown above your code. |
Colour scheme |
One of your theme's colour schemes. A colour scheme the theme doesn't have is refused. |
Content width |
Page width keeps the section to your theme's page width; Full width uses the whole width of the screen. |
Top padding and Bottom padding |
The space above and below the section, from 0 to 120 px. If your theme has its own spacing steps, the padding snaps to the nearest step. |
Where you can add it
Add it to the home page, pages, collections, categories, brands, vendors, products, the blog, blog posts, blog categories, search and the page templates you created. It can go anywhere on the page, above or below the page's main section.
It can't be added to the header or footer, overlays, the password, 404, unavailable, coming soon and maintenance pages, the cart and cart drawer, account and login pages, checkout, or gift card and order status pages. These pages must keep working whatever code a section holds.
What your code can do
Your code can show HTML and read your shop's name and details, your store's links, the shopper's language and country, and whether it's being shown in the theme editor.
On a product, collection, page or blog post page, it can also read that page's own item, the one the page's main section shows: product, collection, page or blog_post. On the blog and blog category pages it can read blog. For example, {{ product.title }} on a product page. It can only read these, not change them.
It can't read customers, the cart or any other items, and it can't show other sections or use {% render %}. Its forms can't post to your store: no add to cart, checkout, account, password, newsletter or contact forms, and no form tokens. A form that posts to another site's https address works, and so does a search form that uses GET.
The Custom code block follows the same rules wherever you add it: its code can read the same things and is checked the same way.
Write your styles out, in a