如何解决Shopify Narrative Theme - 如何将产品页面从 1 列布局更改为 2 列布局
我正在尝试更改 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,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>
非常感谢您的帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。