图片横幅
图片横幅分区支持一张或两张图片，以及一个带按钮的文本框。如果使用了两张图片，它们将在台式设备上并排显示。在移动设备上，您可以选择图片是并排显示还是在列中显示。
在台式设备中，文本框会覆盖部分图片。在移动设备上，文本框在图片下方显示。您可以更改台式设备和移动设备上的文本对齐方式 - 右对齐、左对齐或居中。
分区设置
| 设置 | 描述 |
|---|---|
| 第一张图片 | 横幅的主图片。如果向分区中添加了两张图片，则该图片将显示在左侧或顶部，具体取决于客户是使用台式设备还是移动设备。 |
| 编辑替代文本 | 点击后可设置用于搜索引擎优化的图片替换文本，还可用于为使用屏幕阅读器的客户描述图片。 |
| 第二张图片 | 横幅的辅助图片。如果向分区中添加了两张图片，则该图片将显示在右侧或底部，具体取决于客户是使用台式设备还是移动设备。 |
| 图片叠加不透明度 | 向横幅图片添加叠加。可使用滑块设置叠加的不透明度。默认为 0%。 |
| 横幅高度 | 使用下拉菜单设置横幅图片的高度。
|
| 使分区高度适应第一张图片大小 | 将分区的高度设置为第一张图片的高度。在移动设备上，两张图片均适应第一张图片的高度。选中此框会覆盖图片横幅高度设置。 |
| 台式设备内容位置 | 设置桌面图片横幅的位置。可在“顶部”、“中间”或“底部”以及“右”、“左”或“居中”之间选择。 |
| 在台式设备上显示容器 | 对于使用台式电脑进行购物的客户，将横幅图片文本放置在横幅图片上方的文本框中。 |
| 台式设备内容对齐方式 | 设置台式电脑上图片横幅文本的对齐方式。可在右对齐、左对齐或居中之间选择。 |
| 配色方案 | 图片横幅分区的背景色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。只有选中在台式设备上显示文本框选项时，所选配色方案才可见。 |
| 移动设备内容对齐方式 | 设置移动设备上的图片横幅文本的对齐方式。可在右对齐、左对齐或居中之间选择。 |
| 在移动设备上堆叠图片 | 如果向分区中添加了两张图片，则图片将按列显示，而不是并排显示。 |
| 在移动设备上显示容器 | 对于使用移动设备进行购物的客户，将横幅图片文本放置在横幅图片上方的文本框中。 |
标题块
| 设置 | 描述 |
|---|---|
| 标题 | 文本框标题的较大文本。 |
| 标题大小 | 更改标题文本的大小。在中号（台式机：40 px，移动设备：30 px）和大号（台式机：52 px，移动设备：40 px）之间选择。 |
文本块
| 设置 | 描述 |
|---|---|
| 描述 | 显示段落样式文本。 |
| 文本样式 | 更改图片横幅中的文本样式。可在“正文”、“副标题”和“大写”之间选择。 |
按钮块
| 设置 | 描述 |
|---|---|
| 第一个按钮标签 | 第一个按钮上显示的文本。 |
| 第一个按钮链接 | 您要将第一个按钮链接到的 URL。 |
| 使用轮廓按钮样式 | 将按钮样式调整为轮廓式，而不是使用实心背景。 |
| 第二个按钮标签 | 第二个按钮上显示的文本。 |
| 第二个按钮链接 | 您要将第二个按钮链接到的 URL。 |
| 使用轮廓按钮样式 | 将按钮样式调整为轮廓式，而不是使用实心背景。 |
带文本的图片
您可以添加一个分区并在其中包含一张图片和一个具有可选按钮的文本块，以将客户链接到新页面。选择与图片配对的文本，以将重点放在所选产品、产品系列或博客文章上。添加有关是否有货和样式的详细信息，还可以提供评论。
分区设置
| 设置 | 描述 |
|---|---|
| 图片 | 点击选择图片以选择分区的图片。点击更改按钮以更改或移除图片。 |
| 编辑替代文本 | 点击后可设置用于搜索引擎优化的图片替换文本，还可用于为使用屏幕阅读器的客户描述图片。 |
| 图片高度 | 选择图片的高度：
|
| 台式设备图片宽度 | 图片的宽度：
|
| 台式设备图片放置 | 选择首先显示图片还是文本。移动设备布局中默认为图片优先：
|
| 台式设备内容位置 | 内容在容器中的垂直位置：
|
| 台式设备内容对齐方式 | 文本在容器中的对齐方式：
|
| 内容布局 | 允许图片和文本框相互重叠。如果选中无重叠，内容将调整为适应文本和图片。
|
| 配色方案 | 带文本图片的背景颜色。在“主题色 1”、“主题色 2”、“背景色 1”、“背景色 2”或“反转色”之间选择。 |
| 移动设备布局 | 选择移动设备上的内容对齐方式：
|
| 分区填充 | 向带文本图片分区的顶部或底部添加间距。使用范围滑块在带文本图片分区上方或下方添加 0px 到 100px 之间的空间。 |
标题块
| 设置 | 描述 |
|---|---|
| 标题 | 分区的标题文本。 |
| 标题大小 | 标题文本的大小：
|
文本块
| 设置 | 描述 |
|---|---|
| 内容 | 在文本分区中显示段落样式文本。 |
| 文本样式 | 内容文本的样式：
|
按钮块
| 设置 | 描述 |
|---|---|
| 按钮标签 | 按钮上显示的文本。 |
| 按钮链接 | 您要将按钮链接到的 URL。 |
大标题块
| 设置 | 描述 |
|---|---|
| 文本 | 向图片中添加标语或大标题。文本将显示在带文本图片分区的底部。 |
| 文本样式 | 内容文本的样式：
|
| 文本大小 | 内容文本的大小：
|
多列
您可以使用多列分区在列布局中显示内容，并在列下方添加按钮以将客户定向至新页面。选择与图片配对的文本，以将重点放在所选产品、产品系列或博客文章上。添加有关是否有货和样式的详细信息或提供评论。
分区设置
| 设置 | 描述 |
|---|---|
| 标题 | 分区的标题。 |
| 图片宽度 | 添加到列中的图片的宽度。
|
| 图片比 | 该图片的图片比：
|
| 列对齐方式 | 列中图片和文本的对齐方式：
|
| 辅助背景 | 选择无以隐藏辅助背景，或选择显示为列背景以更改列容器颜色。 |
| 按钮标签 | 按钮上显示的文本。 |
| 按钮链接 | 您要将按钮链接到的 URL。 |
| 在移动设备上启用滑动功能 | 将移动设备上的显示方式从列更改为行，使客户可以横向滑动以查看更多列块。 |
| 配色方案 | 多列分区的背景颜色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。 |
| 分区填充 | 将间距添加到多页面分区的顶部或底部。使用范围滑块在多页面分区上方或下方添加 0px 到 100px 之间的空间。 |
列块
一个分区中最多可包含 12 列。如果您有一个、两个或三个列块，它们会在台式设备上在一行中显示。如果您有四个或以上的列块，它们将以两列的布局显示。在移动设备上，除非启用在移动设备上启用滑动功能，否则列块会在一列中显示。
| 设置 | 描述 |
|---|---|
| 图片 | 您要显示的图片。 |
| 标题 | 列的标题。 |
| 描述 | 列中的段落文本。 |
| 链接标签 [可选] | 添加到列块下方的链接的文本。如果未添加链接，请留空。 |
| 链接 | 链接的 URL。没有链接则留空。 |
页面
您可以选择在分区中显示自定义页面的内容。这会将页面的整个内容引入分区，但不会从任何模板引入任何 Liquid 代码。
分区设置
| 设置 | 描述 |
|---|---|
| 页面 | 您要显示的在线商店页面。 |
| 配色方案 | 产品系列块分区的背景色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。 |
| 分区填充 | 将间距添加到页面分区的顶部或底部。使用范围滑块在页面分区上方或下方添加 0px 到 100px 之间的空间。 |
富文本
您可以添加包含标头、段落内容和按钮的富文本分区，以将客户链接到新页面。
分区设置
| 设置 | 描述 |
|---|---|
| 配色方案 | 富文本分区的背景颜色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。 |
| 使分区展示全宽 | 分区默认为全宽。 |
| 分区填充 | 将间距添加到富文本分区的顶部或底部。使用范围滑块在富文本分区上方或下方添加 0px 到 100px 之间的空间。 |
标题块
| 设置 | 描述 |
|---|---|
| 标题 | 分区的标题。 |
| 标题大小 | 标题文本的大小：
|
文本块
文本块适合用于与客户分享有关您品牌的信息。您可以介绍产品的优点、发布公告、欢迎客户访问您的商店或介绍您的品牌价值。
| 设置 | 描述 |
|---|---|
| 描述 | 分区主要内容的段落样式文本。 |
按钮块
| 设置 | 描述 |
|---|---|
| 按钮标签 | 按钮上显示的文本。 |
| 按钮链接 | 您要将按钮链接到的 URL。 |
| 使用轮廓按钮样式 | 将按钮样式调整为轮廓式，而不是使用实心背景。 |
幻灯片
您可以添加幻灯片分区，以在商店的页面中显示最多包含 5 张图片的轮播。
分区设置
| 设置 | 描述 |
|---|---|
| 布局 | 可在全宽（默认）或网格之间选择。全宽布局可按分区的完整宽度显示幻灯片，而网格布局可在一侧以填充方式显示幻灯片。 |
| 幻灯片高度 | 幻灯片的高度：
|
| 分页样式 | 图片下方显示的幻灯片导航的样式。
|
| 自动旋转幻灯片 | 选中此框可自动旋转幻灯片中的图片。如果未选中此框，则幻灯片会显示静态图片，直到客户手动推进幻灯片。 |
| 更改幻灯片计时器 | 使用条形来设置幻灯片的自动旋转时间。最小值：3 秒，最大值：9 秒。 |
| 移动设备布局 | 选中此框可在移动设备上的图片下方显示内容。 |
| 辅助功能 | 为视觉障碍客户添加幻灯片描述。 |
图片幻灯片设置
| 设置 | 描述 |
|---|---|
| 图片 | 幻灯片的静态图片。点击选择图片以查看媒体文件库，或点击更改按钮以更改或移除图片。 |
| 编辑替代文本 | 为使用屏幕阅读器的客户描述幻灯片。 |
| 标题 | 图片的可选标题文本。文本将单独添加到每张图片上。 |
| 标题大小 | 可在小标题、中标题（默认）或大标题之间选择。 |
| 副标题 | 图片的可选副标题文本。文本将单独添加到每张图片上。 |
| 按钮标签 | 输入按钮的文本，或留空以完全隐藏按钮。 |
| 按钮链接 | 您要将按钮链接到的 URL。 |
| 使用轮廓按钮样式 | 点击复选框可在实心或轮廓样式的按钮之间进行切换。 |
| 台式设备内容位置 | 内容框在图片上的位置。可在“顶部”、“中间”或“底部”以及“左”、“居中”或“右”之间选择。“中间居中”是默认设置。 |
| 在台式设备上显示容器 | 选中此框可显示内容框。 |
| 台式设备内容对齐方式 | 对齐容器中的文本。在居左、居中（默认）或居右之间选择。 |
| 图片叠加不透明度 | 使用滑块可调整图片叠加的不透明度。 |
| 配色方案 | 更改内容框的背景色。可在“强调色 1”、“强调色 2”、“背景 1”（默认）、“背景 2”或“反转色”之间选择。此设置要求显示容器，这样才能影响幻灯片图片。 |
| 移动设备布局 | 选择内容在移动设备上的显示方式。可在“左”、“居中”（默认）或“右”之间选择。 |
视频
您可以在商店的页面中添加视频分区，以嵌入 YouTube 或 Vimeo 中的视频。
分区设置
| 设置 | 描述 |
|---|---|
| 标题 | 分区的标题。 |
| 封面图片 | 客户播放视频之前显示的图片。 |
| URL | 视频的 YouTube 或 Vimeo 链接。视频必须公开提供。 |
| 视频替代文本 | 视频替代文本。 |
| 使分区展示全宽 | 删除默认填充，并使分区按页面的全宽显示。 |
| 配色方案 | 产品系列块分区的背景色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。 |
| 分区填充 | 将间距添加到视频的顶部或底部。使用范围滑块在视频分区上方或下方添加 0px 到 100px 之间的空间。 |
Shopify商户官网原文详情：
Image banner
The image banner section supports one or two images, and a text box with buttons. If two images are used, then they are displayed side by side on desktop. On mobile, you can choose whether the images display side by side or in a column.
On desktop, the text box partially covers the image. On mobile, the text box displays below the image. You can change the text alignment between right, left, or center for both desktop and mobile.
Section settings
Setting Description First image The main image for the banner. If two images are added to the section, then this image displays on either the left or the top, depending on whether the customer is on desktop or mobile. Edit alt text Click to set image alt text for search engine optimization and to describe the image for customers using screen readers. Second image The secondary image for the banner. If two images are added to the section, then this image displays on either the right or the bottom, depending on whether the customer is on desktop or mobile. Image overlay opacity Adds an overlay to the banner images. Use the slider to set the opacity of the overlay. Defaults to 0%. Banner height Set the height of your banner images using the drop-down menu.
Small - Desktop: 420 px, mobile: 280 px
Medium (default) - Desktop: 560 px, mobile: 340 px
Large - Desktop: 720 px, mobile: 390 px
Adapt section height to first image size Sets the height of the section to the height of the first image. On mobile, both images adjust to the height of the first image. Checking this box overwrites the image banner height setting. Desktop content position Set the position of the desktop image banner. Choose between top, middle, or bottom, and right, left, or center. Show container on desktop Places your banner image text in a text box over the banner image for customers shopping from a desktop computer. Desktop content alignment Set the alignment of the image banner text for desktop computers. Choose between right, left, or center. Color scheme The background color of the image banner section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse. The color scheme selected is visible only when the Show text box on desktop option is selected. Mobile content alignment Set the alignment of the image banner text for mobile devices. Choose between right, left, or center. Stack images on mobile If two images are added to the section, then displays the images in a column instead of side by side. Show container on mobile Places your banner image text in a text box over the banner image for customers shopping from a mobile device. Heading block
Setting Description Heading Large text for the title of the text box. Heading size Changes the size of the heading text. Choose between medium (desktop: 40px, mobile: 30px) and large (desktop: 52px, mobile: 40px). Text block
Setting Description Description Displays paragraph-style text. Text style Changes the style of text in the image banner. Choose between Body, Subtitle, and Uppercase. Button block
Setting Description First button label The text that displays on the first button. First button link The URL that you want the first button to link to. Use outline button style Adjusts the button styling to be an outline of a button instead of having a solid background. Second button label The text that displays on the second button. Second button link The URL that you want the second button to link to. Use outline button style Adjusts the button styling to be an outline of a button instead of having a solid background. Image with text
You can add a section that contains an image and a text block with an optional button to link customers to a new page. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
Section settings
Setting Description Image Click Select image to choose an image for the section. Click the Change button to change or remove the image. Edit alt text Click to set image alt text for search engine optimization and to describe the image for customers using screen readers. Image height Choose the height for the image:
Adapt to image (default)
Small
Large
Desktop image width The width for the image:
Small
Medium (default)
Large
Desktop image placement Choose whether the image or the text appears first. Image first is default for mobile layouts:
Image first (default for mobile)
Image second
Desktop content position The vertical position of the content in the container:
Top (default)
Middle
Bottom
Desktop content alignment The alignment of the text in the container:
Left (default)
Center
Right
Content layout Allows the image and text boxes to overlap with one another. If No overlap is selected, the content will adjust to accommodate the text and image.
Overlap
No overlap (default)
Color scheme The background color of the image with text. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse. Mobile layout Choose the alignment of content for mobile devices:
Left (default)
Right
Center
Section padding Add spacing to the top or bottom of the image with text section. Use the range slider to add between 0px and 100px of space above or below the image with text section. Heading block
Setting Description Heading Title text for the section. Heading size Size of heading text:
Small
Medium (default)
Large
Text block
Setting Description Content Displays paragraph-style text in the text section. Text style Style for the content text:
Body (default)
Subtitle
Button block
Setting Description Button label The text that displays on the button. Button link The URL that you want the button to link to. Caption block
Setting Description Text Add a tagline or caption to your image. Text will appear at the bottom of your image with text section. Text style Style of the content text:
Uppercase (default)
Subtitle
Text size Size of the content text:
Small
Medium (default)
Large
Multicolumn
You can use the mulitcolumn section to display content in a column layout, and add a button below the columns to take the customer to a new page. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or provide a review.
Section settings
Setting Description Heading The title of the section. Image width The width of images added to the columns.
Full width of column - The width of the image is the full size of the column.
Half width of column - The width of the image is half the size of the column.
One-third width of column - The width of the image is a third of the size of the column.
Image ratio The image ratio for the image:
Adapt to image - Uses the aspect ratio of the image. This prevents the image from being croppped.
Portrait - Crops the image to use a 2:3 ratio.
Square - Crops the image to use a 1:1 ratio.
Circle - Crops the image to display in a circle
Column alignment The alignment of the images and text within the columns:
Left (default) - Aligns the images and text to the left.
Center - Aligns the images and text in the center.
Secondary background Choose None to hide the secondary background, or Show as column background to change the column container colors. Button label The text that displays on the button. Button link The URL that you want the button to link to. Enable swipe on mobile Changes the mobile display from a column to a row, where customers can swipe sideways to see more column blocks. Color scheme The background color of the multicolumn section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse. Section padding Add spacing to the top or bottom of the multicolumn section. Use the range slider to add between 0px and 100px of space above or below the multicolumn section. Column block
You can have a maximum of 12 columns in one section. If you have one, two, or three column blocks, then they display in one row on desktop. If you have four or more column blocks, then they display in a layout of two columns. On mobile, the column blocks dislpay in a single column, unless Enable swipe on mobile is enabled.
Setting Description Image The image that you want to display. Heading The title of the column. Description The paragraph text in the column. Link label [optional] The text of a link added below the column block. Leave blank if you don't have a link added. Link URL for the link. Leave empty for no link. Page
You can choose to display the content of a custom page in a section. This brings the entire content of the page into the section, but doesn't bring any Liquid code from any template.
Section settings
Setting Description Page The page from your online store that you want to display. Color scheme The background color of the collection block section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse. Section padding Add spacing to the top or bottom of the page section. Use the range slider to add between 0px and 100px of space above or below the page section. Rich text
You can add a rich text section with a header, paragraph content, and a button to link customers to a new page.
Section settings
Setting Description Color scheme The background of the rich text section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse. Make section full width Sections are full width by default. Section padding Add spacing to the top or bottom of the rich text section. Use the range slider to add between 0px and 100px of space above or below the rich text section. Heading block
Setting Description Heading The title of the section. Heading size The size of the heading text:
Small - Desktop: 24 px, mobile: 20 px
Medium - Desktop: 40 px, mobile: 30 px
Large - Desktop: 52 px, mobile: 40 px
Text block
The Text block is a good way to share information about your brand with your customers. You can describe the benefits of your products, make announcements, welcome customers to your store, or talk about your brand values.
Setting Description Description Paragraph-style text for the main content of the section. Button block
Setting Description Button label The text that displays on the button. Button link The URL that you want the button to link to. Use outline button style Adjusts the button styling to be an outline of a button instead of having a solid background. Slideshow
You can add a slideshow section to display a carousel of up to 5 images on a page in your store.
Section settings
Setting Description Layout Choose between Full width (default) or Grid. Full width displays the slideshow the full width of the section, whereas Grid displays the slideshow with padding on either side. Slide height The height of the slideshow:
Adapt to first image (default) - all images will be the same height as the first image in the carousel.
Small
Medium
Large
Pagination style The style of the slideshow navigation that appears below the images.
Dots
Counter (default)
Numbers
Auto-rotate slides Check this box to automatically rotate through the images in the slideshow. If this box is not checked, then the slideshow displays a static image until the customer manually advances the slideshow.
Change slides timer Use the bar to set the auto-rotate time of the slideshow. Minimum: 3 seconds, maximum: 9 seconds. Mobile layout Check the box to show content below images on mobile. Accessibility Add a description for your slideshow for visually impaired customers. Image slide settings
Setting Description Image Static image for your slideshow. Click Select Image to view your media library, or click the Change button to change or remove the image. Edit alt text Describe the slideshow for customers using screen readers.
Heading Optional heading text for the image. Text is added to each image individually.
Heading size Choose between a small, medium (default), or large heading.
Subheading Optional subheading text for the image. Text is added to each image individually. Button label Enter text for a button, or leave blank to hide the button entirely. Button link The URL that you want the button to link to. Use outline button style Click the checkbox to toggle between a solid or outlined button. Desktop content position The position of the content box over the image. Choose between top, middle, or bottom, and left, center, or right. Middle center is the default setting. Show container on desktop Check the box to show the content box. Desktop content alignment Aligns the text in the container. Choose between left, center (default), or right. Image overlay opacity Use the slider to adjust the opacity of the image overlay. Color scheme Change the background color of the content box. Choose between Accent 1, Accent 2, Background 1 (default), Background 2, or Inverse. This setting requires the container to be displayed in order to affect the slideshow image. Mobile layout Choose how the content will appear on a mobile device. Choose between left, center (default), or right. Video
You can add a video section to embed a video from YouTube or Vimeo on a page in your store.
Section settings
Setting Description Heading The title of the section. 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. Video alt text The alt text for the video. Make section full width Removes the default padding and makes the section the full width of the page. Color scheme The background color of the collection block section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse. Section padding Add spacing to the top or bottom of the video. Use the range slider to add between 0px and 100px of space above or below the video section.
文章内容来源：Shopify商户官方网站
