从ThemeKit升级到Shopify 2.0，如何实现多栏布局及section文件适配？

你只需要把原section对应内容拆分到独立文件，再在模板里按布局需求包裹即可，以下是两种可行方案：

方案一：保留原有Bootstrap结构（适配原ThemeKit使用习惯） #

1. 在主题的sections目录下新建两个文件：
   • blog-home-most-recent.liquid：把原{% section 'blog-home-most-recent' %}对应的内容完整移至该文件
   • blog-home-most-popular.liquid：把原{% section 'blog-home-most-popular' %}对应的内容完整移至该文件
2. 在需要展示多栏的模板文件（如blog.liquid或index.liquid）中，保留原布局结构调用独立section：

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            {% section 'blog-home-most-recent' %}
        </div>
        <div class="col-lg-4">
            {% section 'blog-home-most-popular' %}
        </div>
    </div>
</div>

确保主题已引入Bootstrap CSS文件，移动端会自动堆叠布局。

方案二：使用Shopify 2.0原生响应式布局（推荐） #

如果想脱离Bootstrap依赖，用Shopify内置网格类实现：

1. 同样先创建两个独立的section文件（步骤同上）
2. 模板中替换为原生网格结构：

<div class="grid grid--gap">
    <!-- 桌面端占2/3宽度，移动端自动占满 -->
    <div class="grid__item medium-up--two-thirds">
        {% section 'blog-home-most-recent' %}
    </div>
    <!-- 桌面端占1/3宽度，移动端自动占满 -->
    <div class="grid__item medium-up--one-third">
        {% section 'blog-home-most-popular' %}
    </div>
</div>

大部分Shopify 2.0主题自带这套网格样式（如Dawn系列），无需额外引入CSS。

额外优化：让Section支持后台编辑 #

在每个独立section文件顶部添加schema配置，这样可以在Shopify主题编辑器中管理这些section：

{% schema %}
{
  "name": "博客 - 最新文章",
  "settings": []
}
{% endschema %}

（对应blog-home-most-recent.liquid，另一个section可将name修改为"博客 - 热门文章"）

内容的提问来源于stack exchange，提问作者Justin Handley