Shopify Narrative Theme - 如何将产品页面从 1 列布局更改为 2 列布局

Question

我正在尝试更改 Narrative Shopify 主题上产品页面的布局，使其为 2 列并排而不是一列。

我尝试编辑 product-template.liquid 文件来实现这一点，但不幸的是没有运气。

这是演示产品页面的链接，其代码与我的相同：https://themes.shopify.com/themes/narrative/styles/warm/preview

下面是我正在尝试编辑的 product-template.liquid 文件的顶部部分（为了便于故障排除，我已恢复到旧版本）

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign current_variant_sale = false -%}
{% if current_variant.compare_at_price > current_variant.price %}
  {%- assign current_variant_sale = true -%}
{% endif %}
{% assign featured_media = current_variant.featured_media | default: product.featured_media %}

<div class="product-template" data-section-id="{{ section.id }}" data-section-type="product-template" data-variant-id="{{ current_variant.id }}" itemscope itemtype="http://schema.org/Product">
  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ featured_media | img_url: 'grande' }}">

  {% comment %}
  ------------------------------------------------------------------------------
  Product Featured Media
  ------------------------------------------------------------------------------
  {% endcomment %}
  <div class="product-template__media page-width page-width--no-gutter">
    {% assign variant_media_ids = '' %}

    {%- unless product.has_only_default_variant -%}

      {% for variant in product.variants %}
        {% assign variant_media = variant.featured_media %}

        {%- if variant_media -%}

          {%- if variant_media_ids contains variant_media.id -%}
            {% continue %}
          {%- endif -%}

          {% assign variant_media_ids = variant_media_ids | append: variant_media.id | append: ' ' %}
          {% assign featured = false %}
          {%- if featured_media == variant_media -%}
            {% assign featured = true %}
          {%- endif -%}

          {% include 'product-preview-image' with media: variant_media, featured_media: featured, gallery_type: 'media', data_image: 'data-variant-media-image' %}
        {%- endif -%}

      {% endfor %}
    {%- endunless -%}

    {% unless featured_media and variant_media_ids contains featured_media.id %}
      {% include 'product-preview-image' with media: featured_media, featured_media: true, gallery_type: 'media', data_image: 'data-variant-media-image' %}
    {%- endunless -%}

    {% include 'shopify-xr-button' %}
  </div>

  {% comment %}
  ------------------------------------------------------------------------------
  Product Form & Description
  ------------------------------------------------------------------------------
  {% endcomment %}
  <div class="product__content page-width">
    <div class="grid">
      <div class="grid__item medium-up--push-one-twelfth medium-up--ten-twelfths">
        <div class="product__content-header">

          {% if section.settings.show_vendor %}
            <span class="product__vendor text-small text-center" itemprop="brand">{{ product.vendor }}</span>
          {% endif %}

          <h1 class="product__title h2 text-center" itemprop="name">{{ product.title }}</h1>
          <p class="product__price text-center{% if current_variant_sale %} product__price--sale{% endif %}" data-product-price aria-live="polite">

            <span class="product__sale-price-label visually-hidden">{{ 'products.product.sale_price' | t }}</span>
            <span class="product__regular-price-label visually-hidden">{{ 'products.product.price' | t }}</span>
            <span class="product__current-price" data-regular-price>{{ current_variant.price | money }}</span>

            <span class="product__compare-price-label visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            <s class="product__compare-price" data-compare-price>{{ current_variant.compare_at_price | money }}</s>

            {% include 'product-unit-price', variant: current_variant %}
          </p>

          {%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
            <div class="product__policies rte">
              {%- if cart.taxes_included -%}
                {{ 'products.product.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            </div>
          {%- endif -%}

        </div>

        <div class="product__content-main">
          <div class="product__description rte" itemprop="description" class="rte">
            {{ product.description }}
          </div>

          <div class="product__form-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <div class="product__form-wrapper">
              <meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
              <meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
              <link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">

              {% include 'product-form' %}

              {% if section.settings.show_share_buttons %}
                {% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
                  <div class="product__share-wrapper small--hide">
                    <div class="product__share">
                        {% include 'social-sharing', type: "product", links: 'bottom' share_title: product.title, share_permalink: product.url, share_image: featured_media %}
                    </div>
                  </div>
                {% endif %}
              {% endif %}
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

非常感谢您的帮助！