专注出海运营平台,解决跨境电商问题
当前位置:跨境智通山 > 其他跨境 > 跨境问答 > 正文

shopify在线商店功能添加(一)

2022-03-22 17:32:31 跨境问答

在线商店功能您可以使用分区向在线商店的任何页面添加功能。您可以选择、添加和配置包含图片、文本、品牌颜色等内容的分区。某些页面将具有默认分区,例如公告栏、标头和页脚。这些分区会在每个页面上显示。公告栏您

目录

菜单块

设置描述
标题块的标题。
菜单要在块中显示的菜单。

文本块

文本块可用于突出显示重要信息,例如商店详情、促销或联系信息。

设置描述
标题块的标题。
子文本要在块中显示的文本。

图片块

设置描述
图片要在块中显示的图片。
图片宽度设置图片的宽度。可以是 5 的任何倍数 - 从 50 px 到 200 px。默认值为 100 px。
较大屏幕上的图片对齐方式

对齐块中的图片:

  • 左对齐 - 将图片向块的左侧对齐。

  • 居中(默认) - 将图片在块中居中对齐。

  • 右对齐 - 将图片向块的右侧对齐。

博客文章

如果您的 Shopify 商店中有博客,则可以使用博客文章分区突出显示该博客中的文章。博客文章分区中的每篇博客文章都会显示文章摘录的前 55 个词。如果一篇博客文章没有摘录,则改为显示这篇文章的前 30 个词。

分区设置

设置描述
标题分区的标题。
博客要用于显示博客文章的博客。默认为您的博客页面上按字母顺序显示的第一个博客。
博客文章要显示在该分区中的博客文章数。最大值:4 篇。
配色方案博客分区的背景颜色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。
显示配图显示博客文章的配图。建议的图片纵横比:3:2。
显示日期显示博客文章的创建日期。
显示作者显示博客文章的作者。
如果博客中的博客文章未全部显示,请启用“查看全部”按钮如果博客中的博客文章数量超出了博客文章字段中设置的值,则会显示“查看全部”按钮,该按钮可将客户定向到博客的页面。
分区填充将间距添加到博客文章分区的顶部或底部。使用范围滑块在博客文章分区上方或下方添加 0px 到 100px 之间的空间。

选择博客

  1. 在模板编辑器中,点击博客文章分区的标题。

  2. 博客分区中,点击更改

  3. 选择博客。

  4. 点击选择,然后点击保存" target="_self">中间居左 - 将 logo 与主菜单内联显示,在垂直方向上居中并向左侧对齐。

  5. 左上方 - 在主菜单上方显示 logo,并将 logo 和菜单项向左侧对齐。

  6. 顶部居中(默认) - 在主菜单上方显示 logo,并将 logo 和菜单项居中对齐。

  7. 菜单要用作主菜单的菜单。点击更改以选择其他菜单。显示分隔线显示一条线,用于直观地将标头与页面内容进行分隔。启用粘性标头在客户向上滚动时重新显示标头。在客户向下滚动时消失。间距在标头下方添加间距。使用范围滑块向下边距添加 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. 博客分区中,点击更改

  3. 选择博客。

  4. 点击选择,然后点击保存

  5. 拼贴 - 在拼贴布局中显示图片:

  6.  - 在一列中显示所有大小相同的媒体文件。

  7. 配色方案拼贴的背景颜色。在“主题色 1”、“主题色 2”、“背景色 1”、“背景色 2”或“反转色”之间选择。分区填充将间距添加到拼贴分区的顶部或底部。使用范围滑块将 0px 到 100px 的空间添加到分区的顶部或底部。

视频块

设置描述
封面图片客户播放视频之前显示的图片。
URL指向视频的 YouTube 或 Vimeo 链接。视频必须公开提供。视频将在弹出窗口中播放。
视频替代文本视频替代文本。为使用屏幕阅读器的客户描述视频。
使用原始图片比如果您不想图片被裁剪,请选择此选项。

产品块

设置描述
产品要显示的产品。
在悬停时显示第二张图片在客户将光标悬停在产品图片上时,显示第二张产品图像(如果产品有第二张图片)。

产品系列块

设置描述
收藏要显示的产品系列。

图片块

设置描述
图片分区的图片。点击选择图片以选择图片,或点击更改按钮以更改或移除图片。
编辑替代文本添加简短的图片描述以改进 SEO,还可为使用屏幕阅读器的客户描述图片。
使用原始图片比如果您不想图片被裁剪,请选择此选项。

可折叠内容

可折叠内容分区支持可折叠或展开以查看其中内容的行,还支持可放置在可折叠内容左侧或右侧的图片。

分区设置

设置描述
大标题可折叠内容分区的可选大标题。显示在分区标题上方。
标题可折叠内容分区的标题。
标题对齐方式选择分区标题的对齐方式。选项包含左对齐、居中(默认)或右对齐。
布局

为可折叠内容选择布局:

  • 无容器(默认)

  • 行容器 - 每个可折叠行都包含在阴影框中

  • 分区容器 - 在阴影框中包含整个可折叠内容分区

配色方案可折叠内容分区的背景颜色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。
容器配色方案可折叠内容容器的背景色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。只有将布局选项设置为分区容器时,所选配色方案才可见。
打开第一个可折叠行选中后,可折叠内容的第一行将默认展开。
图片分区的图片。点击选择图片以选择图片,或点击更改按钮以更改或移除图片。
编辑替代文本添加简短的图片描述以改进 SEO,还可为使用屏幕阅读器的客户描述图片。
图片比分区图片的图片比:
  • 适应图片(默认)- 使用图片的纵横比。这可以防止图片被裁剪。

  • 小" target="_self">左侧大块(默认) - 分区中的第一个块显示在左侧,且大小大于任何其他块。

  • 右侧大块 - 分区中的最后一个块显示在右侧,并且比其他所有块都大。

移动设备布局

块在移动设备上的显示方式。

  • 拼贴 - 在拼贴布局中显示图片:

    • 如果在台式设备上的布局中启用了左侧大块,那么该分区中的第一个块会显示在顶部,并且比其他所有块都大。

    • 如果在台式设备上的布局中启用了右侧大块,那么该分区中的最后一个块会显示在底部,并且比其他所有块都大。

  •  - 在一列中显示所有大小相同的媒体文件。

配色方案拼贴的背景颜色。在“主题色 1”、“主题色 2”、“背景色 1”、“背景色 2”或“反转色”之间选择。
分区填充将间距添加到拼贴分区的顶部或底部。使用范围滑块将 0px 到 100px 的空间添加到分区的顶部或底部。

视频块

设置描述
封面图片客户播放视频之前显示的图片。
URL指向视频的 YouTube 或 Vimeo 链接。视频必须公开提供。视频将在弹出窗口中播放。
视频替代文本视频替代文本。为使用屏幕阅读器的客户描述视频。
使用原始图片比如果您不想图片被裁剪,请选择此选项。

产品块

设置描述
产品要显示的产品。
在悬停时显示第二张图片在客户将光标悬停在产品图片上时,显示第二张产品图像(如果产品有第二张图片)。

产品系列块

设置描述
收藏要显示的产品系列。

图片块

设置描述
图片分区的图片。点击选择图片以选择图片,或点击更改按钮以更改或移除图片。
编辑替代文本添加简短的图片描述以改进 SEO,还可为使用屏幕阅读器的客户描述图片。
使用原始图片比如果您不想图片被裁剪,请选择此选项。

可折叠内容

可折叠内容分区支持可折叠或展开以查看其中内容的行,还支持可放置在可折叠内容左侧或右侧的图片。

分区设置

设置描述
大标题可折叠内容分区的可选大标题。显示在分区标题上方。
标题可折叠内容分区的标题。
标题对齐方式选择分区标题的对齐方式。选项包含左对齐、居中(默认)或右对齐。
布局

为可折叠内容选择布局:

  • 无容器(默认)

  • 行容器 - 每个可折叠行都包含在阴影框中

  • 分区容器 - 在阴影框中包含整个可折叠内容分区

配色方案可折叠内容分区的背景颜色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。
容器配色方案可折叠内容容器的背景色。可在“强调色 1”、“强调色 2”、“背景 1”、“背景 2”或“反转色”之间选择。只有将布局选项设置为分区容器时,所选配色方案才可见。
打开第一个可折叠行选中后,可折叠内容的第一行将默认展开。
图片分区的图片。点击选择图片以选择图片,或点击更改按钮以更改或移除图片。
编辑替代文本添加简短的图片描述以改进 SEO,还可为使用屏幕阅读器的客户描述图片。
图片比分区图片的图片比:
MenuThe menu to use as your main menu. Click Change to select a different menu.
Show separator lineDisplays a line to visually separate the header from the page's content.
Enable sticky headerRedisplays the header when the customer scrolls back up. Disappears when the customer scrolls down.
SpacingAdd 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

SettingDescription
Color schemeThe background of the footer can be selected between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Show email signupIncludes an email signup form where customers can subscribe to your newsletter and marketing.
HeadingThe title for the Show email signup form. If Show email signup isn't enabled, then this doesn't display.
Social media iconsDisplays icons for any social media platforms that you've entered a profile link for in your theme settings.
Enable country/region selectorAdds 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 selectorAdds 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 iconsDisplays 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.
SpacingAdd space above your footer. Use the range slider to add between 0px and 100px of space to the top margin.
Section paddingAdd 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

SettingDescription
HeadingThe title for the block.
MenuThe 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.

SettingDescription
HeadingThe title for the block.
SubtextThe text to display in the block.

Image block

SettingDescription
ImageThe image to display in the block.
Image widthSets 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

SettingDescription
HeadingThe title of the section.
BlogWhich blog you want to display blog posts from. Defaults to the first blog alphabetically on your Blogs page.
Blog postsThe number of blog posts that you want to display in the section. Maximum: 4 posts.
Color schemeThe background color of the blog section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Show featured imageDisplays the featured image for the blog post. Suggested image aspect ratio: 3:2.
Show dateDisplays the date the blog post was created.
Show authorDisplays the author for the blog post.
Enable "View all" button if blog includes more blog posts than shownIf 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 paddingAdd 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

  1. In your theme editor, click the title of the blog posts section.

  2. In the Blog section, click Change.

  3. Select the blog.

  4. Click Select, and then click Save

  5. Collage - Displays the images in a collage layout:

  6. Column - Displays all media the same size and in a column.

  7. Color schemeThe background color of the collage. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.Section paddingAdd 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

SettingDescription
Cover imageThe image that displays before a customer plays the video.
URLThe YouTube or Vimeo link to the video. The video must be publicly available. The video will play in a pop-up window.
Video alt textThe alt text for the video. Describes the video for customers using screen readers.
Use original image ratioSelect this option if you don't want your image to be cropped.

Product block

SettingDescription
ProductThe product that you want to display.
Show second image on hoverWhen a customer hovers their cursor over the product image, displays the second product image if the product has one.

Collection block

SettingDescription
CollectionThe collection that you want to display.

Image block

SettingDescription
ImageThe image for the section. Click Select Image to choose an image, or click the Change button to change or remove the image.
Edit alt textAdd a brief image description to improve SEO and to describe the image for customers using screen readers.
Use original image ratioSelect 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

SettingDescription
CaptionAn optional caption for the collapsible content section. Displays above the section heading.
HeadingThe heading of the collapsible content section.
Heading alignmentChoose 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 schemeThe background color of the collapsible content section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Container color schemeThe 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 rowWhen checked, the first row of your collapsible content will be expanded by default.
ImageThe image for the section. Click Select Image to choose an image, or click the Change button to change or remove the image.
Edit alt textAdd a brief image description to improve SEO and to describe the image for customers using screen readers.
Image ratioThe 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" target="_self">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 schemeThe background color of the collage. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Section paddingAdd 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

SettingDescription
Cover imageThe image that displays before a customer plays the video.
URLThe YouTube or Vimeo link to the video. The video must be publicly available. The video will play in a pop-up window.
Video alt textThe alt text for the video. Describes the video for customers using screen readers.
Use original image ratioSelect this option if you don't want your image to be cropped.

Product block

SettingDescription
ProductThe product that you want to display.
Show second image on hoverWhen a customer hovers their cursor over the product image, displays the second product image if the product has one.

Collection block

SettingDescription
CollectionThe collection that you want to display.

Image block

SettingDescription
ImageThe image for the section. Click Select Image to choose an image, or click the Change button to change or remove the image.
Edit alt textAdd a brief image description to improve SEO and to describe the image for customers using screen readers.
Use original image ratioSelect 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

SettingDescription
CaptionAn optional caption for the collapsible content section. Displays above the section heading.
HeadingThe heading of the collapsible content section.
Heading alignmentChoose 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 schemeThe background color of the collapsible content section. Choose between Accent 1, Accent 2, Background 1, Background 2, or Inverse.
Container color schemeThe 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 rowWhen checked, the first row of your collapsible content will be expanded by default.
ImageThe image for the section. Click Select Image to choose an image, or click the Change button to change or remove the image.
Edit alt textAdd a brief image description to improve SEO and to describe the image for customers using screen readers.
Image ratioThe 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

shopify在线商店功能添加(一)

shopify在线商店功能添加(一)详细回答

在线商店功能

您可以使用分区向在线商店的任何页面添加功能。您可以选择、添加和配置包含图片、文本、品牌颜色等内容的分区。

某些页面将具有默认分区,例如公告栏、标头和页脚。这些分区会在每个页面上显示。

公告栏

您可以使用公告栏从任何页面向您的客户传达重要信息。该分区没有自己的设置,但您可以自定义多达 12 个不同的公告块,以便显示重要信息。您可以添加公告栏的链接,使其可点击并将客户引导至特定页面。

公告块

设置描述
文本要向您的客户显示的公告。
配色方案用于公告栏的配色方案。
链接您希望客户在点击公告栏时要导航到的链接。