Shopify自定义logo列表区块无法实现多列同行布局问题求助

问题排查与修复方案 #

1. Liquid 结构错误 #

你把{% for block %}循环写在了单个.card容器内部，导致所有卡片内容都被塞进了同一个div里，自然没法分列。同时存在语法错误：<h3>开头的标题用了</h2>闭合，会导致DOM结构解析错乱。

2. CSS 样式错误 #

你给.card加的flex-direction: row没有生效，因为你没给.card设display: flex，同时.logo-link的宽度设置也不对，图文内容属于同一个卡片，应该给每个卡片固定宽度而不是只给链接设宽度。

修改后的 logo-list.liquid 代码

<div class="logo-list">
    <h2 class="heading center">{{ section.settings.title }}</h2>
    <div class="logo-container">
        {% for block in section.blocks %}
        <div class="card">
            <a class="logo-link" href="{{ block.settings.link }}">
                <img loading="lazy" src="{{ block.settings.image | img_url: '1048x1048' }}">
            </a>
            <h3>{{block.settings.title}}</h3>
            <p>{{ block.settings.text }}</p>
        </div>
        {% endfor %}
    </div>
</div>

{% schema %}
{
    "name": "Logo List",
    "max_blocks": 4,
    "settings": [
        {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Logo List"
        }
    ],
    "blocks": [
        {
            "type": "logo_image",
            "name": "Logo",
            "settings": [
                {
                    "type": "image_picker",
                    "id": "image",
                    "label": "Logo image"
                },
                {
                    "type": "text",
                    "id": "title",
                    "label": "Heading",
                    "default": "Section Heading"
                },
                {
                    "type": "richtext",
                    "id": "text",
                    "label": "Description",
                    "default": "<p>Add your description here</p>"
                },
                {
                    "type": "url",
                    "id": "link",
                    "label": "Logo link",
                    "info": "Optional"
                }
            ]
        }
    ],
    "presets": [
        {
           "name": "Logo list",
           "category": "Image",
           "blocks": [
                {"type": "logo_image"},
                {"type": "logo_image"},
                {"type": "logo_image"},
                {"type": "logo_image"}
           ] 
        }
    ]
}
{% endschema %}

修改后的 SCSS 代码

.logo-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 超过3个自动换行 */
    justify-content: space-between;
    gap: 24px; /* 卡片之间的间距，可自行调整 */
    padding-top: 50px;
}

.card {
    flex: 0 0 calc(33.333% - 16px); /* 一行3个，减去间距占比 */
    text-align: center; /* 内容居中对齐，符合设计图 */
}

.logo-link {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    
    img {
        width: 80%;
        max-width: 200px;
        height: auto;
        margin: 0 auto;
        object-fit: contain;
    }
}

/* 移动端适配，可选 */
@media (max-width: 768px) {
    .card {
        flex: 0 0 100%;
    }
}

内容的提问来源于stack exchange，提问作者George Lugo