如何在自定义Shopify主题上使用产品媒体

产品页面可能是客户商店最重要的接触点，特别是在传达产品价值时。视觉效果在讲故事和吸引买家的过程中发挥着关键作用，现在您可以使用产品的媒体。

随着最近为Liquid添加了媒体过滤器和属性，Shopify扩展了对产品页面的支持，以显示产品视频和3D模型。这些增强功能可用于所有Shopify商店，您现在就可以开始在客户端的店面或自定义主题上实现产品媒体。OB欧宝娱乐APP

这个新功能允许商家以新的和令人兴奋的方式展示产品，无论是展示产品如何使用的视频，还是让3D模型为买家提供更真实的产品视图。这使得产品媒体成为您可以提供给客户的有价值的定制，以改善其产品页面的视觉外观，并且它也是您可以添加到自定义主题的有用功能。

在本文中，我们将探索允许视频和3D模型渲染的新的Liquid变量和过滤器，并实际了解如何在主题中实现产品媒体。我们还将介绍在页面上布局这些元素时应该注意的一些事项。

商家媒体

对于您的客户来说，将视频或3D模型上传到他们的产品的过程与他们之前将图像与产品关联的过程完全相同。现在，您的客户机可以上传图像文件，而不仅仅是接受图像文件mp4和。mov视频文件，或者.glb通过Shopify管理的产品部分的3D模型文件。

当产品视频直接上传到Shopify时，我们的服务器将使用默认HTML5视频播放器。或者，您的客户端可以链接到一个YouTube视频URL，该视频URL可以作为一个嵌入式iFrame显示在产品页面上。对于3D模型，我们使用谷歌的模型-视图组件将客户的产品呈现为交互式3D图像。

您可以向视频中添加一个单独的缩略图，该缩略图将在产品页面加载时显示，而不是使用自动生成的图像。还可以通过管理员将Alt-text添加到每个视频、模型和图像。

虽然现在可以在管理中添加视频和3D模型文件，但您需要更新客户端的主题，以便这些功能出现在他们的商店前端。目前每一个付费主题Shopify主题商店已经实现了这个产品的媒体功能，以及shopify建立首次亮相，布鲁克林,叙述主题。

让我们来看看如何开始将其构建到客户的商店和自己的自定义主题中。OB欧宝娱乐APP

你可能还会喜欢:Shopify应用程序开发的基本资源列表。

使用product.media液体属性

的product.media属性是允许您在产品页面上显示视频、图像和3D模型的构建块。

主题之前在哪里迭代product.images属性，开发人员现在可以使用product.media因为这包括支持产品的图像，以及产品的相关视频和3D模型。这样，你就可以想到product.media类似于product.images但是被赋予了新的超能力!

如果完全单独使用，而不应用液体介质过滤器，则product.media属性将返回图像文件路径的混合，视频和3D模型的Liquid drops。举个例子，如果我们加上{{产品。媒体}}到一个product.liquid文件，我们会在页面上看到这样的东西:

产品/ boat-shoes.jpgVideoDropExternalVideoDrop

这向我们展示了一个与这个产品相关联的图像，叫做boat-shows.jpg以及一个通过管理员上传的视频，以及一个外部托管的视频。但是，要在页面上以图像或视频的形式显示媒体，我们需要使用媒体过滤器来应用适当的HTML标记，从而正确地呈现媒体项。

设置Liquid标签

在我们了解媒体Liquid过滤器是如何操作的之前，有必要概述一下需要设置哪些Liquid标签来输出不同类型的媒体。类似于主题如何与product.images对象，我们需要建立一个为循环遍历产品的每个相关媒体项。这为循环看起来像这样:

在为循环，我们将使用情况下和当Control-flow标记来创建条件，并为每种不同的媒体类型添加类名。对于视频来说，一个非常简单的例子是:

我们在这里看到的是情况下标记正在根据可用的媒体类型初始化switch语句，而当标签定义将执行代码的条件——在这种情况下，当视频与产品关联时。如果满足条件，一个视频(如果有多个视频)将在一个类为“product-video”的容器中输出。

在上面的简单演示中，我们只运行一个情况下为一种类型的媒体创建条件，但你也会为图像、外部视频和3D模型创建条件。在这种情况下，完整的代码看起来像这样:

您可以清楚地看到上面的代码如何在测试我在这里创建的产品页面。

当您构建自己的逻辑来为产品媒体输出不同的条件和容器时，可以考虑将带有控制流标记的主要部分分离为一个代码片段。

Shopify的主题团队在更新我们的网站时采用了这种基于片段的方法首次亮相的主题支持产品媒体。您可以通过下载最新版本的Debut并检查media.liquid类中包含的代码段product.liquid部分。

你可能还会喜欢:30开发人员资源使你的技能集多样化。

使用介质液体过滤器

正如你可能在前一节的代码中注意到的，不同的媒体类型应用特定的过滤器(例如:video_tag)，所以解开这些功能是我们的下一个议程!

Shopify主题的富媒体功能引入了一个新的液体过滤器类别，称为媒体的过滤。这些过滤器应用于产品的媒体，以生成url或HTML标记，并为媒体设置特定的参数。从本质上讲，这些过滤器允许在页面上呈现图像、视频和模型，并允许对它们的显示方式进行一些自定义。

例如，external_video_tag将采取视频下降由产品创建。media对象，并将其包装在包含YouTube视频播放器的IFrame HTML元素中。

这将在页面上以HTML格式输出:

在浏览产品页面时，您应该看到:

每一种媒体类型都有一个相应的媒体过滤器，它生成标签以允许它被呈现。这些都是:

• external_video_tag
• img_tag
• media_tag
• model_viewer_tag
• video_tag

其中一些过滤器可以传递额外的参数。例如，用video_tag过滤器,一个image_size选项可以添加，以改变视频的大小海报图片，以及控制:真选项可以添加显示视频播放器的控制:

{%当'video' %}
{{media | video_tag: controls: true, image_size: "1024x"}}

类似于external_video_tag过滤器，HTML属性，如类名，可以作为选项被添加到IFrame元素:

当'external_video' %}
{{media | external_video_tag: class: "youtube_video"}}

一个有趣的过滤器是media_tag，可以呈现所有媒体类型，并应用必要的HTML来显示图像、视频和3D模型。然而，这应该谨慎使用，因为只使用media_tag在自定义主题上呈现所有媒体类型意味着不可能为特定的媒体类型分配单独的类名。

并非所有的媒体过滤器都是Shopify新推出的。的img_url主题开发人员以前可以访问它来输出图像的URL和定义大小参数。但是，当与媒体对象一起使用时img_urlfilter为媒体的预览图像生成一个图像URL。

你可能还会喜欢:Shopify液体小抄表。

使用产品媒体时的页面布局注意事项

根据客户端使用的主题或自定义主题的构建方式，您可能需要调整产品页面布局，以确保正确显示不同的媒体类型。例如，您可能需要设置各种CSS规则来加载不同的海报图像大小，这取决于产品布局和显示的媒体项目的数量。

如果产品页面在主要特色图片下方使用图库或缩略图，则尤其如此。要定位视频并确保其响应，您可以考虑将视频包含在纵横比框。

在产品页面上实现一个整齐的媒体阵列的关键将是测试。一个很好的方法是用不同的大小和媒体组合测试不同的媒体类型。为了支持页面布局的更改，我们建议查看产品媒体是如何设置的首次亮相，它可以用作您自己实现的模型。当您测试模型时，您可以使用我们的示例模型文件符合3D标准清单中的所有标准。

您可能还需要编辑自定义主题的Javascript文件和事件以适应媒体库，并在切换到不同的特色产品媒体时测试缩略图图像是否正确工作。有关如何为产品媒体使用自定义Javascript的其他建议，您可以查看本教程开发人员文档。

释放媒体的力量

使用产品媒体展示视频和3D模型可以成为转换的强大工具，使买家能够充分体验您的客户正在销售的产品。

通过为客户的店面解锁此功能或在构建自定义主题时添加其他功能，您可以增加项目工作的价值并获得更多收入。希望在本文的帮助下，将产品媒体添加到主题中将变得更快更容易。