在Shopify商品集合页面上添加更多内容

在本文中,您将了解到如何丰富商品集合页面的内容,传达更多有关商品集合的信息从而提高转化率。

默认Shopify和Pagefly商品集合页面之间的关系

默认的Shopify商品集合页面包含比较少的信息。 考虑到这一点,PageFly帮助您添加有关商品集合的更多信息,以增加将访问者转化为客户的机会。

需要注意的是,PageFly商品集合页面并不能完全取代Shopify商品集合页面,而是附加到默认商品集合页面中,重用原来商品集合页面中的所有部分。 

接下来讲解的是,如何使用PageFly元素来丰富默认Shopify商品集合页面的方法。

您可以观看此视频以了解PageFly Collection页面的基本知识

步骤 1.1 : 把PageFly页面链接到商品集合页面

要将更多内容添加到商品集合页面,需要执行的第一步如下所示:

  • 转到PageFly 集合页面,点击创建新集合页面

collection page 1

  • 页面设置面板中,输入页面标题,选择显示默认集合详细信息,然后点击下一步

collection page 2

  • 选择在页面上显示详细信息的集合,可选择多个集合,这个例子中,选择所有可用的集合。
  • 单击下一步按钮。

collection page 3

应用会显示包含您刚才所选集合的集合页面。此外,出现一个提示,要求您为页面选择一个模版。在本文中,我们开始不采用任何模版。

collection page 4

在新创建的空白集合页面中,点击发布,以便我们在实时视图中查看默认Shopify页面内容。

请注意,如果您选择了多个集合,在实时视图中,随机显示所选集合中的一个。

collection page 5

下面图片是集合页面的实时视图的一个例子,其中仅包含默认的Shopify内容。 您可以看到,由于Shopify的默认设置,实时视图非常简单。 因此,您可以选择隐藏该默认部分,并通过以下步骤自定义商品集合详细信息。

collection page 6

步骤 1.2: 自定义商品集合页面,移除Shopify默认部分(PageFly版本 2.5.0)

要隐藏Shopify默认商品集合部分,请转到页面设置,在页面布局中选择隐藏默认商品集合详细信息。

collection page 7

您可以观看此视频,以更好地演示如何隐藏Shopify集合详细信息占位符

隐藏Shopify默认商品部分后,您可以使用Shopify商品集合元素(例如商品集合详细信息,商品集合图片,商品集合标题等)自定义商品页面。

collection page 8

步骤 2: 商品集合页面添加带文本图片。

由于图片是传达信息的最佳方法之一,因此在这里我们选择带文本覆盖的图片部件,以使页面更有吸引力。转到添加部件 > 带文本覆盖的图片, 选择您喜欢的设计,把它拖放到您的页面中。

collection page 9

将元素拖放到页面上后,就可以通过更改背景,更新文本和图片上的按钮来美化它。

collection page

步骤 3: 商品集合页面添加推荐部件

通常使用客户评论来获得商店访问者的信任。 我们可以使用推荐部件将一些客户评论添加到商品集合页面。转到添加部件>预制部分>推荐>将所需的变体拖放到页面上即可。

testimonial

下一步是自定义元素。 例如,您可以更改文本或上载客户头像。

结果

添加带文本覆盖的图片推荐部件后,检查商品集合页面的实时视图。 您会在顶部看到默认的Shopify内容/自定义商品集合内容,然后是新添加的PageFly内容。

collection page 13

You can add the Product Details element or other elements on the Collection page to promote your store.

With PageFly, your store’s collection page will give you more benefits than you think, this guide will let you know this.

You can check this video to know to assign a product page template and apply the same with the collection page template

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

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

I got it!
Languages