Shopware 6图片画廊缩略图布局调整：垂直左对齐改水平底部

要实现这个调整，你需要修改Shopware 6对应页面的图片画廊Twig模板，以下是具体步骤：

1. 定位目标Twig文件 #

根据使用场景（产品列表页或详情页），找到对应的模板文件：

• 产品详情页：src/Storefront/Resources/views/storefront/page/product-detail/gallery.html.twig
• 产品列表页（卡片画廊）：src/Storefront/Resources/views/storefront/component/product/card/gallery.html.twig

注意：不要直接修改Shopware核心文件，建议通过自定义主题继承重写模板，路径为custom/themes/YourThemeName/Resources/views/storefront/[对应路径]/gallery.html.twig

2. 修改画廊布局结构 #

打开目标Twig文件，调整主图与缩略图的容器结构和样式：

原核心结构示例（垂直缩略图） #

<div class="product-gallery">
    <div class="product-gallery-main">
        {# 主图渲染代码 #}
    </div>
    <div class="product-gallery-thumbnails product-gallery-thumbnails--vertical">
        {% for media in page.product.media %}
            <div class="product-gallery-thumbnail">
                <img src="{{ media.url }}" alt="{{ media.translated.alt }}" class="product-gallery-thumbnail-image">
            </div>
        {% endfor %}
    </div>
</div>

修改后的水平底部对齐结构 #

<div class="product-gallery" style="display: flex; flex-direction: column; gap: 1rem;">
    {# 主图区域：保持在上，调整顺序 #}
    <div class="product-gallery-main" style="order: 1;">
        {# 保留原主图渲染代码 #}
    </div>

    {# 缩略图区域：改为水平排列，底部对齐 #}
    <div class="product-gallery-thumbnails" style="display: flex; flex-direction: row; justify-content: center; align-items: flex-end; gap: 0.5rem; order: 2;">
        {% for media in page.product.media %}
            <div class="product-gallery-thumbnail">
                <img 
                    src="{{ media.url }}" 
                    alt="{{ media.translated.alt }}" 
                    class="product-gallery-thumbnail-image"
                    style="width: 60px; height: 60px; object-fit: cover;"
                >
            </div>
        {% endfor %}
    </div>
</div>

3. 关键调整说明 #

• 给外层product-gallery添加flex-direction: column，让主图和缩略图垂直排列
• 缩略图容器设置flex-direction: row实现水平布局，justify-content: center让缩略图居中（也可根据需求用flex-start/flex-end调整对齐）
• 通过order属性确保主图在上、缩略图在下
• 可选：调整缩略图的width/height和gap控制尺寸与间距

4. 验证效果 #

清理Shopware缓存（后台设置→系统→缓存管理），刷新页面即可看到缩略图改为水平底部对齐的效果。

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