Edit a theme in five minutes
Change a section of Sahil in the code editor and see it live. Quick start
Sooquna theme docs
A Sooquna theme is a folder of Liquid templates, sections, blocks, CSS and JavaScript that draws a store’s storefront. If you’ve built a Shopify Online Store 2.0 theme, you already know most of it: the same folders, the same JSON templates, the same Liquid objects and filters. The differences that matter are listed in Migrating from Shopify.
Every store starts with Sahil, our first-party theme. It’s Arabic-first, right-to-left ready and fast, so it’s the best place to see how things fit together.
How a page is drawn
Request, layout, template, sections, blocks. How rendering works
Liquid reference
Every tag, filter and object, with examples that are tested against the renderer. Filters
Arabic and RTL
One theme for both directions: logical CSS, bidi-safe text, Arabic plurals. RTL guide
What’s in a theme
Section titled “What’s in a theme”| Folder | What it holds |
|---|---|
layout/ |
The page frame: <html>, <head>, header and footer groups. |
templates/ |
One per page type (product, collection…), usually JSON listing sections. |
sections/ |
Reusable, merchant-arrangeable parts of a page, each with a schema. |
blocks/ |
Theme blocks that sections (and other blocks) can hold. |
snippets/ |
Liquid partials you render. |
custom_pages/ |
Standalone pages such as a size guide, at /custom/<name>. |
assets/ |
CSS, JavaScript, fonts and images. |
config/ |
Theme settings and their current values. |
locales/ |
Storefront and editor translations. |
Read Directory structure for the rules of each folder.
Where to go next
Section titled “Where to go next”Create your first sectionA section with settings, blocks and a preset, arranged in the visual editor.
Create a custom pageA landing page with its own URL, attached to a page and linked from the menu.
Auto-escapingSooquna escapes every output by default. Read this before you port a theme.
Was this page helpful?