页面类型

每个页面都有其自己的默认分区和设置。

产品页面

默认情况下,产品页面具有产品信息分区和产品推荐分区。

产品信息分区包含以下默认块:

  • 文本(默认显示 vendor 属性)

  • 标题

  • 文本(默认显示 product subtitle 属性)

  • 价格

  • 多属性选择器

  • 数量选择器

  • Buy Button

  • 描述

  • 分享

您还可以添加以下块:

  • 文本

  • 自定义 liquid

  • 产品评分

  • 可折叠标签

  • 弹出窗口

产品信息分区最多可以包含 16 个块。

产品信息分区设置

设置描述
在台式设备上启用粘性内容向下滚动页面时,在滚动浏览过所有图片之后,产品信息列才会开始滚动。
台式设备上的布局

产品媒体文件在桌面上的显示方式。

  • 缩略图轮播 - 如果产品具有多个媒体文件类型,则剩余的媒体文件将在主产品媒体文件下方的轮播中显示为缩略图。客户可以点击任何缩略图来加载它,或使用轮播导航箭头查看其他媒体文件。

  • 缩略图 - 如果产品具有多个媒体文件类型,则剩余的媒体文件将在主产品媒体文件下方显示为缩略图。客户可以点击任何缩略图来加载它。

  • 堆叠 - 以堆叠的方式显示所有产品媒体文件。点击堆叠的某个媒体文件类型将打开一个弹出窗口,该窗口具有所选媒体文件的较大视图。

台式设备媒体文件大小在小、中或大媒体文件尺寸之间选择。媒体文件会针对移动设备自动优化。
移动设备布局选择在移动设备上隐藏或显示缩略图。
在某个多属性被选中时隐藏其他多属性的媒体文件选择一种多属性后,系统会隐藏其他多属性的图片。取消选择该多属性后,其他图片将重新出现。
启用视频循环将视频设定为循环播放,以便视频在播放完毕后自动重放。
分区填充将间距添加到“产品信息”分区的顶部或底部。使用范围滑块在“产品信息”上方或下方添加 0px 到 100px 之间的空间。

产品信息块

可以将以下块添加到产品信息分区。

文本块

文本块可用于使用动态源显示静态文本或变量数据。例如,您可以添加相关文本来显示营销消息(如“满 100 美元免运费),使每件产品上都显示相同的文本内容。您还可以添加动态源,如产品的厂商字段,该字段将随查看的产品而变化。

设置描述
文本向产品页面添加信息。支持文本或动态源。
文本样式

更改文本的样式:


  • 正文 - 将文本更改为段落样式的文本。

  • 副标题 - 将文本更改为副标题文本,该文本略大于段落样式的文本。

  • 大写 - 将文本更改为字体小于段落样式的文本,并将所有字符大写。

标题块

此块显示产品的标题。它不具有可调整的设置。

价格块

此块显示产品的定价信息,例如价格和原价。它不具有可调整的设置。

多属性选择器块

此块显示产品的所有多属性选项。

设置描述
类型

更改向客户展示多属性的方式:

  • 按钮 - 以按钮(可点击)的形式显示多属性。

  • 下拉菜单 - 在可展开的下拉菜单中显示多属性。

Buy Button 块

此块会显示“添加到购物车”按钮和所有门店自提信息。此块还可以显示任何动态结账按钮。

设置描述
显示动态结账按钮显示您已在支付设置中启用的任何动态结账选项。

描述块

此块显示产品的描述。它不具有可调整设置。

产品评分块

此块用星星图形显示平均产品评分,并在括号里注明评论次数,例如 ★★★★★ (8)。

显示产品评分需要产品评论应用(例如 Shopify Product Reviews)以及元字段定义(用于 reviews.rating_count 和 reviews.rating)。

分享块

此块显示一个可点击的链接,客户可使用此链接在其社交媒体上分享产品。

设置描述
文本可点击文本,客户点击此文本即可将产品分享到其社交媒体

数量选择器块

此块会显示数量选择器,让客户可更改要购买的产品件数。此块中没有可调整的设置。默认数量为 1。

自定义 Liquid 块

此块显示您可以添加到块中的自定义 Liquid 或 HTML 代码。

设置描述
自定义 liquid显示您可以输入为 Liquid 或 HTML 代码的内容。

可折叠标签块

此块会显示带标题的可折叠标签。当客户点击标题时,该标签将展开,以显示更多内容。

设置描述
标题标签的标题。在折叠和展开标签时显示。
标签内容标签的内容。仅在展开标签时显示。
页面中的标签内容在标签中显示页面内容。仅显示页面编辑器中的页面内容,此块中不会显示页面模板中的 Liquid 样式。在标签内容中输入的任何内容都将显示在页面内容上方。

弹出窗口块

此块会显示可点击的文本,点击这些文本即可打开一个弹出窗口。该弹出窗口会显示您某一个页面所含的内容。

设置描述
链接标签可点击文本,客户点击此文本即可显示弹出窗口。
页面您要在弹出窗口中显示其内容的页面。仅显示页面编辑器中的页面内容。该弹出窗口不会显示页面模板中任何 Liquid 样式。


产品推荐分区设置

根据当前查看的产品,此分区会显示类似产品或经常与此产品一起购买的产品。

设置描述
标题分区的标题。
图片比推荐产品的图片的图片比:
  • 适应图片 - 使用图片的纵横比。这可以防止图片被裁剪。

  • 纵向 - 将图片裁剪为使用 2:3 比例。

  • 方形 - 将图片裁剪为使用 1:1 比例。

在悬停时显示第二张图片在客户将光标悬停在图片上时,显示产品的第二张图片(如果有)。
添加图片填充在产品图片周围增加额外的空间。
显示图片边框在图片周围显示边框。
显示厂商显示每款产品的厂商。
显示产品评分用星星图形显示平均产品评分,并在括号里注明评论次数,例如 ★★★★★ (8)。还需要产品评论应用(例如 Shopify Product Reviews)以及元字段定义(用于 reviews.rating_count和 reviews.rating)。

若要详细了解产品推荐,请参阅了解产品推荐。

产品系列页面

默认情况下,产品系列页面具有产品系列横幅产品网格分区。

产品系列横幅分区设置

设置描述
显示产品系列描述显示产品系列的描述。
显示产品系列图片显示产品系列图片。


产品网格分区设置


设置描述
每页产品数您要在每页上显示的产品数量。可以是 4 的任何倍数 - 从 8 到 24。默认为 16。
图片比产品图片的图片比:
  • 适应图片(默认)- 使用图片的纵横比。这可以防止图片被裁剪。

  • 纵向 - 将图片裁剪为使用 2:3 比例。

  • 方形 - 将图片裁剪为使用 1:1 比例。

在悬停时显示第二张图片在客户将光标悬停在产品图片上时,显示第二张产品图像(如果产品有第二张图片)。
添加图片填充在产品图片周围增加额外的空间。
显示图片边框在图片周围显示边框。
显示厂商显示每款产品的厂商。
显示产品评分用星星图形显示平均产品评分,并在括号里注明评论次数,例如 ★★★★★ (8)。还需要产品评论应用(例如 Shopify Product Reviews)以及元字段定义(用于 reviews.rating_count和 reviews.rating)。
启用筛选使客户可根据您的导航设置中的筛选条件来筛选产品系列中的产品。
启用排序

使客户可基于以下内容对产品系列中的产品进行排序:

  • 特色 - 最畅销的产品,基于包含该产品的所有订单数。如果您还未销售任何产品,则此选项会按从最新到最早的顺序为您的产品排序。

  • 畅销 - 根据每款产品的订购次数按降序显示产品。

  • 字母顺序,A-Z - 按字母顺序显示产品。

  • 字母顺序,Z-A - 按倒序字母顺序显示产品。

  • 价格,低到高 - 按从最低价格到最高价格的顺序显示产品。

  • 价格,高到低 - 按从最高价格到最低价格的顺序显示产品。

  • 日期,早到新 - 基于在商店中添加每款产品的时间,按从最早到最新的顺序显示产品。

  • 日期,新到早 - 基于向商店中添加每款产品的时间,按从最新到最早的顺序显示产品。

在较大屏幕上折叠

客户必须点击“筛选和排序”标题才能显示任何筛选或排序选项。必须至少启用启用筛选启用排序中的一个选项才能显示“筛选和排序”标题。


产品系列列表页面

产品系列列表页面显示在线商店销售渠道中供应的所有产品系列。

设置描述
标题页面标题。
产品系列排序依据

确定产品系列的显示顺序:

  • 字母顺序,A-Z - 按字母顺序显示产品系列。

  • 字母顺序,Z-A - 按倒序字母顺序显示产品系列。

  • 日期,新到早 - 基于在商店中创建每个产品系列的时间,按从最新到最早的顺序显示产品系列。

  • 日期,早到新 - 基于在商店中创建每个产品系列的时间,按从最早到最新的顺序显示产品系列。

  • 产品计数,高到低 - 基于产品系列中包含的产品数,按从最高数量到最低数量的顺序显示产品系列。

  • 产品计数,低到高 - 基于产品系列中包含的产品数,按从最低数量到最高数量的顺序显示产品系列。

图片比产品系列图片的图片比:
  • 适应图片(默认)- 使用图片的纵横比。这可以防止图片被裁剪。

  • 纵向 - 将图片裁剪为使用 2:3 比例。

  • 方形 - 将图片裁剪为使用 1:1 比例。

配色方案产品系列标题分区和图片填充的背景色。可从“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”中选择。
添加图片填充在产品系列图片周围添加额外的空间。



Shopify商户官网原文详情:

Page types

Each page has its own default sections and settings.

Product pages

By default, product pages have a Product information section and a Product recommendations section.

The Product information section contains the following default blocks:

  • Text (default displays the vendor attribute)

  • Title

  • Text (default displays the product subtitle attribute)

  • Price

  • Variant picker

  • Quantity selector

  • Buy buttons

  • Description

  • Share

You can also add the following blocks:

  • Text

  • Custom liquid

  • Product rating

  • Collapsible tab

  • Pop-up

The Product information section can contain up to 16 blocks.

Product information section settings

SettingDescription
Enable sticky content on desktopWhen scrolling down a page, the product information column doesn't begin scrolling until all images have been scrolled through.
Desktop layout

How the product media display on desktop.

  • Thumbnail carousel - If the product has more than one media type, the remaining media will appear as thumbnails in a carousel below the main product media. The customer can click on any thumbnail to load it, or use the carousel navigation arrows to see other media.

  • Thumbnails - If the product has more than one media type, the remaining media will appear as thumbnails below the main product media. The customer can click on any thumbnail to load it.

  • Stacked - Displays all product media stacked upon each other. Clicking on a stacked media type will open a pop-up window with a larger view of the selected media.

Desktop media sizeChoose between small, medium, or large media size. The media is automatically optimized for mobile.
Mobile layoutChoose to hide or show thumbnail images on mobile.
Hide other variants' media when a variant is selectedWhen a variant is selected, images of other variants are hidden from view. Images reappear when variant is deselected.
Enable video loopingSets the video to play on a loop, so that the video will replay automatically when it finishes.
Section paddingAdd spacing to the top or bottom of Product Information section. Use the range slider to add between 0px and 100px of space above or below the Product Information.

Product information blocks

The following blocks can be added to the Product information section.

Text block

The text block can be used to display static text or variable data using dynamic sources. For example, you could add text displaying a marketing message, such as "Free shipping over $100 USD", which would display the same on each product. You could also add a dynamic source, such as the product's Vendor field, which would change depending on which product is being viewed.

SettingDescription
TextAdds information to the product page. Supports text or dynamic sources.
Text style

Changes the style of the text:


  • Body - Changes the text to paragraph-style text.

  • Subtitle - Changes the text to subtitle text, which is slightly larger than paragraph-style text.

  • Uppercase - Changes the text to be smaller than paragraph-style text, and puts all characters in caps.

Title block

This block displays the product's title. It has no adjustable settings.

Price block

This block displays the product's pricing information, such as price and compare at price. It has no adjustable settings.

Variant picker block

This block displays any variant options for the product.

SettingDescription
Type

Changes how the variants are displayed to customers:

  • Button - Displays the variants as clickable buttons.

  • Dropdown - Displays the variants in an expandable drop-down menu.

Buy buttons block

This block displays the "Add to cart" button and any in-store pickup information. It can also show any dynamic checkout buttons.

SettingDescription
Show dynamic checkout buttonsDisplays any dynamic checkout options that you have enabled in your Payments settings.

Description block

This block displays the product's description. It has no adjustable settings.

Product rating block

This block displays the average product rating in stars, with the number of reviews in parenthesis, for example: ★★★★★ (8).

Displaying product ratings requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.

Share block

This block displays a clickable link that lets customers share the product on their social media.

SettingDescription
TextThe clickable text that customers click to share the product to their social media.

Quantity selector block

This block displays a quantity selector that customers can use to change how many units of the product that they want to purchase. It has no adjustable settings. The default quantity is 1.

Custom liquid block

This block displays custom Liquid or HTML code that you can add to the block.

SettingDescription
Custom liquidDisplays content that you can enter as Liquid or HTML code.

Collapsible tab block

This block displays a collapsible tab with a title. When a customer clicks the title, the tab expands to display additional content.

SettingDescription
HeadingThe title of the tab. Displays when collapsed and expanded.
Tab contentThe content of the tab. Displays only when the tab is expanded.
Tab content from pageDisplays content from a page in the tab. Displays only the page content from the page editor, no Liquid styling from the page's template displays in this block. Any content entered in Tab content displays above the page content.

Pop-up block

This block displays clickable text that opens a pop-up window when clicked. This pop-up displays content from one of your pages.

SettingDescription
Link labelThe clickable text that customers click to display the pop-up window.
PageThe page you want to display content from in the pop-up window. Displays only the page content from the page editor. The pop-up doesn't display any Liquid styling from the page template.


Product recommendations section settings

Based on the product currently being viewed, this section displays similar products, or products that are frequently bought together with this product.

SettingDescription
HeadingThe title of the section.
Image ratioThe image ratio for the images of the recommended products:
  • Adapt to image - Uses the aspect ratio of the images. This prevents the image from being cropped.

  • Portrait - Crops the images to use a 2:3 ratio.

  • Square - Crops the images to use a 1:1 ratio.

Show second image on hoverWhen the customer hovers their cursor over the image, displays the second image for the product if the product has one.
Add image paddingAdds extra space around the product images.
Show image borderDisplays a border around the image.
Show vendorDisplays the vendor for each product.
Show product ratingDisplays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.

To learn more about product recommendations, refer to Understanding product recommendations.

Collection pages

By default, collection pages have a Collection banner and a Product grid section.

Collection banner section settings

SettingDescription
Show collection descriptionDisplays the description of the collection.
Show collection imageDisplays the collection image.


Product grid section settings

SettingDescription
Products per pageThe number of products that you want to display on each page. Can be any multiple of 4, from 8 to 24. Defaults to 16.
Image ratioThe image ratio for the product images:
  • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.

  • Portrait - Crops the images to use a 2:3 ratio.

  • Square - Crops the images to use a 1:1 ratio.

Show second image on hoverWhen the customer hovers their cursor over the product image, displays the second product image if the product has one.
Add image paddingAdds extra space around the product images.
Show image borderDisplays a border around the image.
Show vendorDisplays the vendor for each product.
Show product ratingDisplays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.
Enable filteringLets customers filter the products in the collection based on the filters in your Navigation settings.
Enable sorting

Lets customers sort the products in the collection based on the following:

  • Featured - Best selling product, based on the all-time number of orders that include the product. If you haven't sold any products yet, then this option sorts your products from newest to oldest.

  • Best selling - Displays the products in descending order based on how many times each product has been ordered.

  • Alphabetically, A-Z - Displays the products in alphabetical order.

  • Alphabetically, Z-A - Displays the products in reverse alphabetical order.

  • Price, low to high - Displays the products from the lowest price to the highest price.

  • Price, high to low - Displays the products from the highest price to the lowest price.

  • Date, old to new - Displays the products from the oldest to the newest, based on when each product was added to your store.

  • Date, new to old - Displays the products from the newest to the oldest, based on when each product was added to your store.

Collapse on larger screensCustomers must click a "Filter and sort" heading to display any filtering or sorting options. At least one of Enable filtering or Enable sorting must be enabled for the "Filter and sort" heading to display.

Collections list pages

The collections list page displays all your collections that are available on the Online Store sales channel.

SettingDescription
HeadingThe title of the page.
Sort collections by

Determines in what order to display your collections:

  • Alphabetically, A-Z - Displays the collections in alphabetical order.

  • Alphabetically, Z-A - Displays the collections in reverse alphabetical order.

  • Date, new to old - Displays the collections from the newest to the oldest, based on when each collection was created in your store.

  • Date, old to new - Displays the collections from the oldest to the newest, based on when each collection was created in your store.

  • Product count, high to low - Displays the collections based on how many products they contain, from highest to lowest.

  • Product count, low to high - Displays the collections based on how many products they contain, from lowest to highest.

Image ratioThe image ratio for the collection images:
  • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.

  • Portrait - Crops the images to use a 2:3 ratio.

  • Square - Crops the images to use a 1:1 ratio.

Color schemeThe background color of the collection title section and image padding. Can picked from between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Add image paddingAdds extra space around the collection images.

文章内容来源:Shopify商户官方网站


(本文内容根据网络资料整理,出于传递更多信息之目的,不代表连连国际赞同其观点和立场)