Example: port a Dawn section

This walks through a section in the style of Dawn’s rich-text.liquid. Most of it works unchanged; four things need attention.

The original (abridged)

sections/rich-text.liquid (Shopify)

{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}
<div class="isolate{% unless section.settings.full_width %} page-width{% endunless %}">
  <div class="rich-text content-container color-{{ section.settings.color_scheme }} gradient">
    <div class="rich-text__wrapper rich-text__wrapper--{{ section.settings.desktop_content_position }}">
      <div class="rich-text__blocks {{ section.settings.content_alignment }}">
        {%- for block in section.blocks -%}
          {%- case block.type -%}
            {%- when 'heading' -%}
              <h2 class="rich-text__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
                {{ block.settings.heading | escape }}
              </h2>
            {%- when 'text' -%}
              <div class="rich-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
            {%- when 'button' -%}
              <a{% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %}
                class="button" {{ block.shopify_attributes }}>{{ block.settings.button_label | escape }}</a>
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>
{% schema %}
{
  "name": "t:sections.rich-text.name",
  "class": "section",
  "settings": [
    { "type": "color_scheme", "id": "color_scheme", "label": "t:sections.all.colors.label", "default": "scheme-1" },
    { "type": "select", "id": "desktop_content_position", "options": [
      { "value": "left", "label": "t:sections.rich-text.settings.desktop_content_position.options__1.label" },
      { "value": "center", "label": "t:sections.rich-text.settings.desktop_content_position.options__2.label" },
      { "value": "right", "label": "t:sections.rich-text.settings.desktop_content_position.options__3.label" }
    ], "default": "center", "label": "t:sections.rich-text.settings.desktop_content_position.label" }
  ],
  "blocks": [ … ],
  "presets": [{ "name": "t:sections.rich-text.presets.name", "blocks": [{ "type": "heading" }, { "type": "text" }, { "type": "button" }] }]
}
{% endschema %}

What works unchanged

The loop over section.blocks, block.shopify_attributes, case/when, asset_url | stylesheet_tag, rich text output, blank checks, t: labels and presets.

1. Colour schemes

Dawn’s color_scheme setting reads scheme objects from settings.color_schemes. In Sooquna the setting gives the scheme’s ID, so the class works as written (color-scheme-1) if your CSS defines those classes. Dawn generates them in layout/theme.liquid from the scheme objects; replace that loop with CSS built from your own colour settings, as in Color schemes.

2. left and right positions

desktop_content_position uses left and right. On Arabic pages, “left” should mean the start side. Keep the values (merchants’ saved data uses them) and map them to logical CSS:

.rich-text__wrapper--left  { justify-content: flex-start; }
.rich-text__wrapper--right { justify-content: flex-end; }

flex-start is the right edge in a right-to-left page, so content lines up where Arabic readers expect.

3. Escaping

{{ block.settings.heading | escape }} still works and escapes once. You can drop | escape: Sooquna escapes output anyway.

4. Translations

Copy the section’s keys from Dawn’s locales/en.default.schema.json and add Arabic ones to locales/ar.schema.json, so merchants see the editor in their language. Storefront strings (none in this section) go to locales/ar.json.

Result

The section renders in both directions, merchants arrange its blocks in the visual editor, and the schema is unchanged, so saved templates keep working.