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

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

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

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

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

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

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

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

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

  • 转到PageFly 商品页面,点击创建新商品页面。

product page 1

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

product page 2

  • 选择在页面上显示详细信息的商品,如果不止一个,可以在多个商品商打勾。
  • 单击下一步按钮。

product page 3

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

product page 4

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

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

您可以观看此视频以了解更多详细信息

product page 5

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

product page 6

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

Move the Product Details Placeholder around your page editor

By default, if you want to choose to show the Product Details Placeholder, it will be placed on the top of the page. However, in many cases, you don’t want to display Product Details Placeholder on the top or you want to move this placeholder anywhere you want on the editor.

In the image below, the Product Details Placeholder by default is on the top of the page

Now, you want to move it under the next section which is About us Great coffee, made easy.

Click on the Show page outline icon of the left catalog and move the position like the image below

Hide the Shopify default Product Details Placeholder

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

product page 7

Important note:

You cannot edit the Shopify Product Details Placeholder with PageFly, you need to go to Shopify admin to edit it.

You can see this video to have a better demonstration of how to hide the Shopify Product Details Placeholder 

隐藏Shopify默认商品部分后,您可以使用Shopify商品元素(例如商品详细信息,商品图片,商品变体,商品加入购物车等)自定义商品页面。

product page 8

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

由于图片是传达信息的最佳方法之一,因此在这里我们选择带文本图片部件,以使页面更有吸引力。

product page 9

步骤 3: 商品页面添加Instagram元素

pagefly instagram 鉴于Instagram很流行,将Instagram元素添加到您的页面可能是一个好主意。 Instagram社交元素的变体。

拖放Instagram元素到编辑器后,显示结果是如下所示。

You can read more here to know more about the Instagram element.

步骤 4: 商品页面添加视频

由于视频可以传达更多信息,在页面上利用视频传递商品信息是很好的想法。 您可以在媒体元素下选择HTML5视频或Youtube视频。

product page 12

这是我们在商品页面商添加视频后的结果。

product page 13

步骤5: 商品页面添加推荐部件

还有,让我们再增加一个部分,告知您的访客购买您的商品是一个不错的选择。这时,可以使用推荐部件。转到添加部件>预制部分>推荐>将所需的变体拖放到页面上即可。

product page 14

通过显示社交证明,获得客户信任方面,此部件很有用。

步骤 6: 添加“加入购物车”按钮以增加转化率

默认情况下,商品页面上只有一个行为召唤(CTA),它是商品元素中包含的按钮。 因此,将商品加入购物车元素添加到商品页面上的各个位置(例如,商品视频或推荐下方)将提高您的转化率。

product page 15

将此按钮链接到此商品页面的同一商品,以便在单击该按钮后可以将其添加到您的访客购物车中。

product page 16

结果

添加带文本图片Instagram元素,Youtube元素,推荐部件和商品加入购物车按钮元素后,检查商品页面的实时视图。 您会在顶部看到默认的Shopify内容/自定义商品内容,然后是新添加的PageFly内容。

These Design Converting Shopify Product Pages and Personalize Your Product Page guides indicate how to have an attractive and increase the conversion rate for your product page.

And if you have time to check out how you can optimize your Product Page for maximum conversion rate, check out our Exclusive Content: 12-Chapter Checklist on How Online Merchants Can Optimize Conversion Rate

You can check this article to know how to use the Product Add to Cart element

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