Question

我本质上是Liquid引擎的新手。但是，我用几种语言编程，所以我想我可以用一些指针来征服Liquid。

我希望我的收藏页面能够布置像这里列出的产品： http://www.boombycindyjoseph.com/pages/store

这是一个3列布局，左侧是产品图片，中间是产品视频，右侧是文字+添加到购物车。我没有为每个产品制作视频，因此我需要在中间设置某种形式的默认占位符。

请注意，产品图像与产品页面中的产品图像不同。虽然是可选的，但这也很不错。

我的谷歌搜索引出了简单的答案，例如如何将视频添加到您的产品页面。

所以我可以使用一些帮助来开始编辑它。我的猜测是它将在collections-template.liquid，collections-grid-item.liquid或collections-grid-collage.liquid文件中。

从那里，我是否需要将收藏页面的产品图像和产品视频添加到资产列表中，或者（更好）以某种方式向product.liquid文件添加几个字段，这样我就可以输入它们了它们。

Answer 1

如果你正在使用Timber，那么代码片段中的product-grid-item.liquid就是集合将循环生成每个列表的内容。根据您列出的内容，它看起来像是collections-grid-item.liquid。

您可以从上传的图片中提取的产品图片，例如循环中的<img src="{{ product.featured_image.src | img_url: 'large' }}" >。

要获得不是第一张的图片，请尝试<img src="{{ product.images[1] | product_img_url: 'large' }}">

视频可以上传到资源或设置＆gt;然后，您可以使用命名约定从循环中获取它。即假设您有一款名为“蓝色T恤”的产品，该视频可称为“blue-tshirt.mp4”，然后在循环中抓取视频，它将类似于：<video src="{{ product.title | handleize | append: '.mp4' }}"></video>

木材将是一个很好的起点，因为你可能会通过它而不是预制主题学习最快。

https://shopify.github.io/Timber/

这也是获取不同Shopify对象句柄的好资源：

http://cheat.markdunkley.com/

编辑：

如果您的资产不存在，请点击以下链接：

https://ecommerce.shopify.com/c/ecommerce-design/t/testing-if-a-file-exists-29624

Answer 2

在我的网站上，Snippets文件夹中名为product-grid-item.liquid的文件控制着“收藏”页面或包含收藏的部分中的布局。以下是控制预览中显示哪些图像的代码，通常默认情况下是第一张和最后一张图像（product.images.last）。我更改了我的图像以显示主（第一张）图像和第二张图像。为简单起见，上传新产品时，请先放置主要产品图片。如果您希望收藏页面仅显示一个预览图像，则可以注释掉“显示”类和下面的第一个跨度。

<div class="ImageOverlayCa"></div>
        {% if product.images.size > 1 %}
        <div class="reveal"> 
          <span class="product-additional">      
            <img class="" src="{{ product.images[1] | product_img_url: 'master' }}" alt="{{ product.images[1].alt | escape }}" />
          </span>
         <img src="{{ product.featured_image.src | img_url: 'master' }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
        </div>      
        {% else %}
        <img src="{{ product.featured_image.src | img_url: 'master' }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
        {% endif %}

Shopify系列页面布局 - 图像，视频，然后文字+添加到购物车按钮

2 个答案: