在线商店功能
您可以使用分区向在线商店的任何页面添加功能。您可以选择、添加和配置包含图片、文本、品牌颜色等内容的分区。
某些页面将具有默认分区，例如公告栏、标头和页脚。这些分区会在每个页面上显示。
公告栏
您可以使用公告栏从任何页面向您的客户传达重要信息。该分区没有自己的设置，但您可以自定义多达 12 个不同的公告块，以便显示重要信息。您可以添加公告栏的链接，使其可点击并将客户引导至特定页面。
公告块
| 设置 | 描述 |
|---|---|
| 文本 | 要向您的客户显示的公告。 |
| 配色方案 | 用于公告栏的配色方案。 |
| 链接 | 您希望客户在点击公告栏时要导航到的链接。 |
标头
标头会显示在在线商店的所有页面上。
分区设置
| 设置 | 描述 |
|---|---|
| 配色方案 | 选择商店标头的背景。使用下拉菜单在“主题色 1”、“主题色 2”、“背景色 1”、“背景色 2”或“反转色”之间选择。 |
| Logo 图片 | 分区的图片。点击选择图片以查看媒体文件库，或点击更改按钮以更改或移除图片。 |
| 编辑替代文本 | 添加简短的描述以改进 SEO，还可为使用屏幕阅读器的客户描述媒体文件。 |
| 自定义 logo 宽度 | logo 的宽度。可以是 10 的任何倍数 - 从 50 px 到 250 px。默认值为 100 px。 |
| 台式设备上的 logo 位置 | 当客户在大屏幕上查看网站时，logo 在标头中显示的位置。logo 的位置会自动针对移动设备进行优化。
|
| 菜单 | 要用作主菜单的菜单。点击更改以选择其他菜单。 |
| 显示分隔线 | 显示一条线，用于直观地将标头与页面内容进行分隔。 |
| 启用粘性标头 | 在客户向上滚动时重新显示标头。在客户向下滚动时消失。 |
| 间距 | 在标头下方添加间距。使用范围滑块向下边距添加 0px 到 100px 之间的空间。 |
页脚
页脚会在您模板中的所有页面上显示。
分区设置
| 设置 | 描述 |
|---|---|
| 配色方案 | 可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择页脚的背景色。 |
| 显示电子邮件注册信息 | 包含电子邮件注册信息表单，客户可使用此表单订阅您的新闻通讯和营销信息。 |
| 标题 | 显示电子邮件注册信息表单的标题。如果未启用显示电子邮件注册信息，则不会显示此内容。 |
| 社交媒体图标 | 显示您在模板设置中输入了个人资料链接的所有社交媒体平台的图标。 |
| 启用国家/地区选择器 | 添加一个选择器，供客户选择您在付款设置中启用的国家和地区，以便客户可以使用他们所选的货币查看您的产品价格。 |
| 启用语言选择器 | 添加一个选择器，供客户选择您在语言设置中启用的国家和地区，以便客户可以使用他们所选的语言浏览您的商店。 |
| 显示付款图标 | 显示商店中已启用的付款方式的图标。当客户访问您的商店时，系统会筛选这些图标，以便仅显示可用于当前客户的所在地区和所用货币的付款方式。 |
| 间距 | 在页脚上方添加空间。使用范围滑块向上边距添加 0px 到 100px 之间的空间。 |
| 分区填充 | 向页脚的顶部或底部添加空间。使用范围滑块将 0px 到 100px 的空间添加到页脚的顶部或底部。 |
菜单块
| 设置 | 描述 |
|---|---|
| 标题 | 块的标题。 |
| 菜单 | 要在块中显示的菜单。 |
文本块
文本块可用于突出显示重要信息，例如商店详情、促销或联系信息。
| 设置 | 描述 |
|---|---|
| 标题 | 块的标题。 |
| 子文本 | 要在块中显示的文本。 |
图片块
| 设置 | 描述 |
|---|---|
| 图片 | 要在块中显示的图片。 |
| 图片宽度 | 设置图片的宽度。可以是 5 的任何倍数 - 从 50 px 到 200 px。默认值为 100 px。 |
| 较大屏幕上的图片对齐方式 | 对齐块中的图片：
|
博客文章
如果您的 Shopify 商店中有博客，则可以使用博客文章分区突出显示该博客中的文章。博客文章分区中的每篇博客文章都会显示文章摘录的前 55 个词。如果一篇博客文章没有摘录，则改为显示这篇文章的前 30 个词。
分区设置
| 设置 | 描述 |
|---|---|
| 标题 | 分区的标题。 |
| 博客 | 要用于显示博客文章的博客。默认为您的博客页面上按字母顺序显示的第一个博客。 |
| 博客文章 | 要显示在该分区中的博客文章数。最大值：4 篇。 |
| 配色方案 | 博客分区的背景颜色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。 |
| 显示配图 | 显示博客文章的配图。建议的图片纵横比：3:2。 |
| 显示日期 | 显示博客文章的创建日期。 |
| 显示作者 | 显示博客文章的作者。 |
| 如果博客中的博客文章未全部显示，请启用“查看全部”按钮 | 如果博客中的博客文章数量超出了博客文章字段中设置的值，则会显示“查看全部”按钮，该按钮可将客户定向到博客的页面。 |
| 分区填充 | 将间距添加到博客文章分区的顶部或底部。使用范围滑块在博客文章分区上方或下方添加 0px 到 100px 之间的空间。 |
选择博客
在模板编辑器中，点击博客文章分区的标题。
在博客分区中，点击更改。
选择博客。
点击选择，然后点击保存
拼贴
您可以创建视频、图片、产品和产品系列的拼贴。每个拼贴分区都包含三个块。默认情况下，该分区各包含一个视频、产品和产品系列块。
若要创建包含超过三个块的拼贴，请在第一个拼贴分区下方添加其他拼贴分区，并且请勿在靠下的拼贴分区中包含标题值。所有拼贴分区将合并显示为一个分区。
分区设置
| 设置 | 描述 |
|---|---|
| 标题 | 分区的标题。 |
| 台式设备上的布局 | 拼贴媒体在桌面上的显示模式。
|
| 移动设备布局 | 块在移动设备上的显示方式。
|
| 配色方案 | 拼贴的背景颜色。在“主题色 1”、“主题色 2”、“背景色 1”、“背景色 2”或“反转色”之间选择。 |
| 分区填充 | 将间距添加到拼贴分区的顶部或底部。使用范围滑块将 0px 到 100px 的空间添加到分区的顶部或底部。 |
视频块
| 设置 | 描述 |
|---|---|
| 封面图片 | 客户播放视频之前显示的图片。 |
| URL | 指向视频的 YouTube 或 Vimeo 链接。视频必须公开提供。视频将在弹出窗口中播放。 |
| 视频替代文本 | 视频替代文本。为使用屏幕阅读器的客户描述视频。 |
| 使用原始图片比 | 如果您不想图片被裁剪，请选择此选项。 |
产品块
| 设置 | 描述 |
|---|---|
| 产品 | 要显示的产品。 |
| 在悬停时显示第二张图片 | 在客户将光标悬停在产品图片上时，显示第二张产品图像（如果产品有第二张图片）。 |
产品系列块
| 设置 | 描述 |
|---|---|
| 收藏 | 要显示的产品系列。 |
图片块
| 设置 | 描述 |
|---|---|
| 图片 | 分区的图片。点击选择图片以选择图片，或点击更改按钮以更改或移除图片。 |
| 编辑替代文本 | 添加简短的图片描述以改进 SEO，还可为使用屏幕阅读器的客户描述图片。 |
| 使用原始图片比 | 如果您不想图片被裁剪，请选择此选项。 |
可折叠内容
可折叠内容分区支持可折叠或展开以查看其中内容的行，还支持可放置在可折叠内容左侧或右侧的图片。
分区设置
| 设置 | 描述 |
|---|---|
| 大标题 | 可折叠内容分区的可选大标题。显示在分区标题上方。 |
| 标题 | 可折叠内容分区的标题。 |
| 标题对齐方式 | 选择分区标题的对齐方式。选项包含左对齐、居中（默认）或右对齐。 |
| 布局 | 为可折叠内容选择布局：
|
| 配色方案 | 可折叠内容分区的背景颜色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。 |
| 容器配色方案 | 可折叠内容容器的背景色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。只有将布局选项设置为行或分区容器时，所选配色方案才可见。 |
| 打开第一个可折叠行 | 选中后，可折叠内容的第一行将默认展开。 |
| 图片 | 分区的图片。点击选择图片以选择图片，或点击更改按钮以更改或移除图片。 |
| 编辑替代文本 | 添加简短的图片描述以改进 SEO，还可为使用屏幕阅读器的客户描述图片。 |
| 图片比 | 分区图片的图片比：
|
| 台式设备上的布局 | 选择首先显示图片还是可折叠行。默认设置为文本优先。在移动设备上，始终首先显示图片。 |
| 分区填充 | 将间距添加到可折叠内容的顶部或底部。使用范围滑块在可折叠内容分区上方或下方添加 0px 到 100px 之间的空间。 |
可折叠行块
| 设置 | 描述 |
|---|---|
| 标题 | 可折叠行的标题。 |
| 图标 | 从下拉列表中选择要在可折叠内容标题之前显示的图标。复选标记图标默认处于选中状态。 |
| 行内容 | 可折叠行的内容。内容可以格式化或包含 URL 链接。此功能可以与页面中的行内容结合使用。 |
| 页面中的行内容 | 您可以将其他页面的现有内容插入可折叠行。点击更改可选择或删除页面。此功能可以与行内容结合使用。 |
Shopify商户官网原文详情：
Online store features
You can add features to any page of your online store, using sections. You can choose, add, and configure sections with images, text, brand colors, and more.
Some pages will have default sections, such as the announcement bar, the header, and the footer. These sections appear on every page.
Announcement bar
The announcement bar lets you communicate important information to your customers from any page. The section has no settings on its own, but you can customize up to 12 different announcement blocks to display. You can add a link to an announcement bar to make it clickable and take customers to a specific page.
Announcement block
Setting Description Text The announcement that you want to display to your customers. Color scheme The color scheme to use for the announcement bar. Link The link that you want customers to navigate to if they click the announcement bar. Header
The header displays on all pages in your online store.
Section settings
Setting Description Color scheme Choose the background of your store header. Use the dropdown menu to select between Accent 1, Accent 2, Background 1, Background 2, or Inverse. Logo image The image for the section. Click Select Image to view your media library, or click the Change button to change or remove the image. Edit alt text Add a brief description to improve SEO and to describe the media for customers using screen readers. Custom logo width The width of the logo. Can be any multiple of 10, from 50 px to 250 px. The default is 100 px. Desktop logo position Where the logo displays in the header when a customer views the site on a large screen. The position of the logo is automatically optimized for mobile.
Middle left - Displays the logo inline with the main menu, centered vertically and aligned to the left.
Top left - Displays the logo above the main menu, and aligns the logo and menu items to the left.
Top center (default) - Displays the logo above the main menu, and aligns the logo and menu items in the center.
Menu The menu to use as your main menu. Click Change to select a different menu. Show separator line Displays a line to visually separate the header from the page's content. Enable sticky header Redisplays the header when the customer scrolls back up. Disappears when the customer scrolls down. Spacing Add spacing below your header. Use the range slider to add between 0px and 100px of space to the bottom margin. Footer
The footer displays on all pages in your theme.
Section settings
Setting Description Color scheme The background of the footer can be selected between Accent 1, Accent 2, Background 1, Background 2, or Inverse. Show email signup Includes an email signup form where customers can subscribe to your newsletter and marketing. Heading The title for the Show email signup form. If Show email signup isn't enabled, then this doesn't display. Social media icons Displays icons for any social media platforms that you've entered a profile link for in your theme settings. Enable country/region selector Adds a selector where a customer can choose the countries and regions that you've enabled in your payment settings, so that customers can view your product prices in the currency of their choice. Enable language selector Adds a selector where a customer can choose the countries and regions that you've enabled in your language settings, so that customers can browse your store in the language of their choice. Show payment icons Displays the icons for payment methods that are enabled on your store. When a customer visits your store, these icons are filtered so that only the payment methods that are supported in the current customer's region and currency are displayed. Spacing Add space above your footer. Use the range slider to add between 0px and 100px of space to the top margin. Section padding Add space to the top or bottom of the footer. Use the range slider to add between 0px and 100px of space to the top or the bottom of your footer. Menu block
Setting Description Heading The title for the block. Menu The menu to display in the block. Text block
The Text block can be used to highlight important information, such as store details, promotions, or contact information.
Setting Description Heading The title for the block. Subtext The text to display in the block. Image block
Setting Description Image The image to display in the block. Image width Sets the width of the image. Can be any multiple of 5, from 50 px to 200 px. Default is 100 px. Image alignment on large screen Aligns the image within the block:
Left - Aligns the image to the left of the block.
Center (default) - Aligns the image to the center of the block.
Right - Aligns the image to the right of the block.
Blog posts
If you have a blog on your Shopify store, then you can use a Blog post section to highlight posts from that blog. Each blog post in the Blog posts section shows the first 55 words of a post's excerpt. If the blog post doesn't have an excerpt, then the first 30 words of the post are displayed instead.
Section settings
Setting Description Heading The title of the section. Blog Which blog you want to display blog posts from. Defaults to the first blog alphabetically on your Blogs page. Blog posts The number of blog posts that you want to display in the section. Maximum: 4 posts. Color scheme The background color of the blog section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse. Show featured image Displays the featured image for the blog post. Suggested image aspect ratio: 3:2. Show date Displays the date the blog post was created. Show author Displays the author for the blog post. Enable "View all" button if blog includes more blog posts than shown If the blog has more blog posts than set in the Blog post field, then this displays a "View all" button that takes the customers to the blog's page. Section padding Add spacing to the top or bottom of the blog post section. Use the range slider to add between 0px and 100px of space above or below the blog post section. Select a blog
In your theme editor, click the title of the blog posts section.
In the Blog section, click Change.
Select the blog.
Click Select, and then click Save
Collage
You can create a collage of videos, images, products, and collections. Each Collage section contains three blocks. By default, the section contains a video, product, and collection block.
To create a collage of more than three blocks, add additional collage sections below the first and don't include a Heading value to the lower collage sections. The collage sections will appear to flow together as a single section.
Section settings
Setting Description Heading The title of the section. Desktop layout How the collage media displays on desktop.
Left large block (default) - The first block in the section displays on the left and larger than any other blocks.
Right large block - The last block in the section displays on the right and larger than any other block.
Mobile layout How the blocks display on mobile.
Collage - Displays the images in a collage layout:
If Left large block is enabled in Desktop layout, then the first block in the section displays on the top and larger than any other block.
If Right large block is enabled in Desktop layout, then the last block in the section displays on the bottom and larger than any other block.
Column - Displays all media the same size and in a column.
Color scheme The background color of the collage. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse. Section padding Add spacing to the top or bottom of the collage section. Use the range slider to add between 0px and 100px of space to the top or the bottom of the section. Video block
Setting Description Cover image The image that displays before a customer plays the video. URL The YouTube or Vimeo link to the video. The video must be publicly available. The video will play in a pop-up window. Video alt text The alt text for the video. Describes the video for customers using screen readers. Use original image ratio Select this option if you don't want your image to be cropped. Product block
Setting Description Product The product that you want to display. Show second image on hover When a customer hovers their cursor over the product image, displays the second product image if the product has one. Collection block
Setting Description Collection The collection that you want to display. Image block
Setting Description Image The image for the section. Click Select Image to choose an image, or click the Change button to change or remove the image. Edit alt text Add a brief image description to improve SEO and to describe the image for customers using screen readers. Use original image ratio Select this option if you don't want your image to be cropped. Collapsible content
The collapsible content section supports rows that can be collapsed or expanded to view the content within, and an image that can be placed to the left or the right of the collapsible content.
Section settings
Setting Description Caption An optional caption for the collapsible content section. Displays above the section heading. Heading The heading of the collapsible content section. Heading alignment Choose the alignment of the section heading. Options are left, center (default), or right. Layout Select a layout for your collapsible content:
No container (default)
Row container - Each collapsible row is contained in a shaded box
Section container - Contains the entire collapsible content section in a shaded box
Color scheme The background color of the collapsible content section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse. Container color scheme The background color of the collapsible content container. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse. The color scheme selected is visible only when the Layout option is set to Row or Section container. Open first collapsible row When checked, the first row of your collapsible content will be expanded by default. Image The image for the section. Click Select Image to choose an image, or click the Change button to change or remove the image. Edit alt text Add a brief image description to improve SEO and to describe the image for customers using screen readers. Image ratio The image ratio for the section image:
Adapt to image (default)- Uses the aspect ratio of the images. This prevents the images from being cropped.
Small
Large
Desktop layout Choose whether the image or the collapsible rows appear first. Default setting is text first. On mobile, the image always appears first. Section padding Add spacing to the top or bottom of the collapsible content. Use the range slider to add between 0px and 100px of space above or below the collapsible content section. Collapsible row block
Setting Description Heading A heading for the collapsible row. Icon Choose an icon from the drop-down list to display in front of the collapsible content heading. The check mark icon is selected by default. Row content Content for the collapsible row. Content can be formatted or include URL links. This feature can be used in conjunction with Row content from page. Row content from page You can insert existing content from another page into a collapsible row. Click Change to select or remove a page. This feature can be used in conjunction with Row content.
文章内容来源：Shopify商户官方网站
