Shopify元素-产品图片

在本文中,您将了解另一个名为产品图片的Shopify元素。 此元素是PageFly 2.10.0版中的新元素。 基本上,这个新的产品图片元素与旧的产品图片元素具有许多公共参数,但这个新元素有更多选项。 检查本文以了解更改。

关于产品图片元素

产品图片元素将在页面上显示Shopify产品的图片以提高转化率。 您可以使用“产品图片”元素在任何非产品页面上促销您的产品,或在产品页面上使用它。

请注意,您可以使用搜索功能来找到该元素,而不是在侧栏中找到它。

pagefly product image element
产品图片元素具有三种常见的变体,我们将继续添加更多变体,以帮助您节省时间。
将变体拖动到布局,然后查看如何配置它。

产品图片元素配置

产品图片元素有大量参数,您可通过这些参数微调内容外观以实现最佳转化率。

选择布局中的元素以查看其参数。

将“产品图片”元素拖放到编辑器页面时,“产品来源”选项有2个选项::

  • 自动
  • 自定义产品

请注意,如果您在“产品页面”中使用“产品图片”元素,则可选择“产品来源”选项。 但是,如果您在“常规页面”中使用此元素,则默认禁用“产品来源”选项,并默认为“自定义产品”。

在“产品页面”中,如果选择“自动”,则通过“页面分配”分配给该页面的产品将显示在页面编辑器中。

您可以选择“自定义产品”,然后选择所需的产品。

常规选项参数
1. 内容
  • 默认图像来源: 有2个选项可以选择显示产品图像: 
    • 精选图片
    • 图片第一变体

您可去到Shopify后台管理界面来查看这些产品。

  • 设置固定高度: 如果要调整主产品图像的高度,请启用此选项。 最大高度为2000px。 
  • 图像悬停操作:有3种选项供您选择
    • 无: 如果您不想将产品图片悬停,请选择此选项

 

    • 启用图像放大镜:将鼠标悬停在产品图片上时,产品图片列表上的的每个图片都会被放大。 您可以在下面查看演示

    • 显示悬停图像:将鼠标悬停在产品图像上时,悬停图片将在0.3s延迟后替换该默认图像。 有4种悬停类型可供选择
      • 下一张图片:显示精选图片的下一张图片
      • 最后一张图像:显示精选图片的最后一个图片
      • 随机图片:随机显示精选图片集合中的图片
      • 所有图片:在产品图片上移动鼠标光标时显示多个图片。

 

请注意,图像悬停操作不适用于平板电脑或智能手机等触屏设备。

  • 图像单击操作:单击产品图像时,有3个可选项
    • 无:如果您不想在单击图像时做任何更改,请选择此选项。
    • 链接到产品:如果要将图像链接到相应的产品,请选择此选项。
    • 显示全屏图像:如果要通过点击/单击图像全屏查看,请选择该选项。

您可看下方在笔记本上的演示

在移动设备上,您可以双击以放大产品图像,然后再次双击以缩小。

当显示图像未放大时,用户可在图像中滑动。

图像放大镜:如果要呈现将鼠标悬停在上方时放大图像的效果,请启用此选项。

  • 图像列表: 有2个可选项,显示隐藏图像列表。 如果选择显示图像列表
    • 列表位置: 您可将其放在4个位置:顶部,右侧,底部和左侧。
    • 列表布局:您可选图像列表的布局,2个可选项:滑块网格
    • 每张滑页项目数: 您可在此处设置一列中显示的项目数。 最多12个项目。
    • 项目间距:您可在此处调整项目之间的间距。 最大为100像素。

如果您选择隐藏图像列表,则该图像列表没有您需要的选项。

  • 显示徽章:如果要在产品图片上显示徽章,请启用此选项
    • 徽章位置:有4个可选位置:左上角,右上角,左下角和右下角。
2. 追踪
  • 将Google Analytics(谷歌分析)事件添加到您的总帐户。 您可以在此处了解如何进行设置。
  • 客户点击元素时的Facebook Pixel(脸书像素)活动。 你可以在这里阅读更多。
3. 属性  你可以在这里阅读更多。
4. 能见度  你可以在这里阅读更多。
5. 动画效果  你可以在这里阅读更多。
样式选项参数
1. 边距 您可以在此处了解所有这些参数。
2. 背景 您可以在此处了解所有这些参数。
3. 边框 您可以在此处了解所有这些参数。
4. 显示 您可以在此处了解所有这些参数。
5. 自定义CSS 您可以在此处了解所有这些参数。

嵌套元素配置

产品徽章配置

选择徽章为其设置选项

product badge element

常规选项参数
1. 内容
  • 文本: 文本框显示产品变体的定价折扣(如:20%折扣)或剩余库存数量(如:库存300个)。 您也可以为该徽章添加自定义内容。

注意,“折扣”和“库存”是根据所选产品变体的具体值计算的。

  • 产品状态: 有2种状态:
    • 属于产品系列: 
      • 所有产品系列
      • 自定义产品系列: 仅当产品属于所选集合时才显示徽章。
    • 包含标签: 仅当产品包含所定义的标签之一时,才会显示此徽章。
2. 属性  你可以在这里阅读更多。
3. 能见度  你可以在这里阅读更多。
样式选项参数
1. 整体 您可以在此处了解所有这些参数。
2. 边距 您可以在此处了解所有这些参数。
3. 排版印刷 您可以在此处了解所有这些参数。
4. 背景 您可以在此处了解所有这些参数。
5. 边框 您可以在此处了解所有这些参数。
6. 显示 您可以在此处了解所有这些参数。
7. 自定义CSS 您可以在此处了解所有这些参数。

图片列表项

选择图像列表项以设置选项。

图片列表项元素的样式选项参数:

  • 标题状态: 您可以设置标题的3种状态的样式,例如“正常”,“悬停”和“选定”。
  • 边框样式: 您可以为每个区块选择这4种边框样式中的一种。 单击更多设置按钮以设置边框宽度和边框半径。
PreviousPrevious article

Do you want to get more sales from the same amount of traffic?

PageFly can help you. We are the best page builder app to give you the freedom to customize your page, build trust and gain more sales.

Explore PageFly
PageFly Languagues

PageFly Help Center is now available in French, Portuguese and Chinese. Please check the flags on the page header.

I got it!