Using Horizon Theme Blocks in Dawn

Adding Horizon’s wrapper section to Dawn

Today I realized you can simply take Horizon’s generic wrapper section, and install it to Dawn.

This will allow you to:

• use Horizon’s AI Block Generator in Dawn
• add global theme blocks to Dawn.

These are abilities that come with all Horizon-era themes, but not on Dawn-era themes.

Theme Compatibility: When I say Horizon I mean ALL of Shopify’s Horizon-era free themes. Likewise with Dawn - ALL of the Dawn-era free themes.

Steps:

1. Go to your themes pages and click ‘Edit Code’
2. Go to the sections folder and click ‘Add new section’. Delete all existing code.
3. Paste in the below code, and save.
4. After that, you can go to the theme customizer and add the new section to your theme. It’s called “Horizon Section”. Look for the lightning bolt ⚡.

Inside the section, you will see the AI Block Generator.

<div class="page-width">
  {% content_for 'blocks' %}
</div>

{% schema %}
{
  "name": "⚡️ Horizon Section",
  "blocks": [
    {
      "type": "@theme"
    },
    {
      "type": "@app"
    }
  ],
  "settings": [
    {
      "type": "header",
      "content": "Horizon wrapper section",
      "info": "This section accepts global theme blocks and lets you use the AI block generator. Tutorial video: [youtube.com/watch]()"
    }
  ],
  "presets": [
    {
      "name": "⚡️ Horizon Section"
    }
  ]
}
{% endschema %}

A theme block for testing

Here’s how you can check that your new section accepts theme blocks.

The block below says “Hello world” and has some simple settings.

You can install it the same way as you added the section above - except in the blocks folder.

After installing, you should be able to add it inside the Horizon Section.

You should be able to nest blocks inside of this block.

{% style %}
  .hello-world-block#{{ block.id }} {
    padding: 40px 20px;
    text-align: center;
    background-color: {{ block.settings.background_color }};
  }

  .hello-world-block#{{ block.id }} h2 {
    font-size: {{ block.settings.font_size }}px;
    color: {{ block.settings.text_color }};
    margin: 0;
  }
{% endstyle %}

<div class="hello-world-block" id="{{ block.id }}" {{ block.shopify_attributes }}>
  <h2>
    {{ block.settings.message }}
  </h2>

  {% content_for 'blocks' %}
</div>

{% schema %}
{
  "name": "⚡️ Hello World",
  "tag": null,
  "settings": [
    {
      "type": "text",
      "id": "message",
      "label": "Message",
      "default": "Hello World"
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#f8f8f8"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#333333"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 16,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Font size",
      "default": 24
    }
  ],
  "blocks": [
    {
      "type": "@theme"
    },
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "⚡️ Hello World"
    }
  ]
}
{% endschema %}