shopify商店Narrative分区自定义图片步骤-ESG跨境

shopify商店Narrative分区自定义图片步骤

shopify新闻

2022-03-28

700

Narrative 包含带文本图片分区，可让您向客户显示带有自定义消息的图片。

带文本的图片

Narrative 包含带文本图片分区，可让您向客户显示带有自定义消息的图片。

您可以选择图片对齐，确保从移动设备查看时图片的重要部分不会被裁剪。例如，如果您不希望裁剪图片的底部，因为该部分显示的是您正在销售的产品，那么您可以选择底部居中对齐方式，确保图片的该部分不会被裁剪。

带文本图片分区包括以下设置：

设置

分区高度 - 选择此分区的大小。
背景色 - 为分区设置背景色。

图片

图片 - 添加要在分区中显示的图片。
图片样式 - 选择图片的裁剪样式。选择无则不用裁剪图片。
图片位置 - 选择框架内图片的对齐方式。

文本

标题 - 为分区添加标题。
文本 - 将文本添加到此分区。
使用辅助按钮样式 - 以带有实线轮廓的透明状显示按钮。
按钮标签 - 向分区添加带文本的按钮。
按钮链接 - 设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在分区中包含按钮，请将此字段留空。

图片对齐方式

桌面 - 在从台式机查看时，选择分区中的图片显示在左侧还是右侧。
移动 - 选择从移动设备查看时，分区中的图片是首先显示还是第二显示。

将带文本图片添加到主页

PC:

在 Shopify 后台中，转到在线商店 > 模板。
点击 的分区 旁边的自定义。

点击添加分区。
点击带文本图片，然后点击选择。
在图片区域中，点击选择图片，然后执行以下操作之一：

若要选择已上传到 Shopify 后台的图片，请点击库选项卡。
若要从 Burst 中选择库存图片，请点击免费图片选项卡。您可在此处输入，或浏览图片类别。
若要从本地计算机选择图片，请点击库选项卡，然后点击上传。

使用设置来对带文本图片分区进行自定义。
点击保存。

苹果系统：

在 Shopify 应用中，轻触商店。
在销售渠道部分，轻触在线商店。
轻触 Manage themes（管理模板）。
在 的分区 旁边，轻触自定义。
轻触编辑。

点击添加分区。
点击带文本图片，然后点击选择。
在图片区域中，点击选择图片，然后执行以下操作之一：

若要选择已上传到 Shopify 后台的图片，请点击库选项卡。
若要从 Burst 中选择库存图片，请点击免费图片选项卡。您可在此处输入搜索词，或浏览图片类别。
若要从本地计算机选择图片，请点击库选项卡，然后点击上传。

使用设置来对带文本图片分区进行自定义。
点击保存。

安卓系统：

在应用中，轻触商店。
在销售渠道部分，轻触在线商店。
轻触 Manage themes（管理模板）。
在 的分区 旁边，轻触自定义。
轻触编辑。

点击添加分区。
点击带文本图片，然后点击选择。
在图片区域中，点击选择图片，然后执行以下操作之一：

若要选择已上传到 Shopify 后台的图片，请点击库选项卡。
若要从 Burst 中选择库存图片，请点击免费图片选项卡。您可在此处输入，或浏览图片类别。
若要从本地计算机选择图片，请点击库选项卡，然后点击上传。

使用设置来对带文本图片分区进行自定义。
点击保存。

带文本叠加的图片

您可以在主页上使用带文本图片叠加分区向客户显示自定义消息。您的消息可以介绍产品、分享公告或欢迎客户访问您的商店。

带文本叠加的图片分区包括以下设置：

设置

分区间距 - 选择此分区的大小，无论是小、中、大，还是特大均可。
图片 - 添加要在分区中显示的图片。
图片对齐方式 - 选择要在分区中对齐图片的方式。

文本

标题 - 向您的分区添加标题。
文本 - 向您的分区添加正文文本。
文本大小 - 设置标题和正文文本的大小。
使用辅助按钮样式 - 以带有实线轮廓的透明状显示按钮。
按钮标签 - 向分区添加带文本标签的按钮。
按钮链接 - 设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在分区中包含按钮，请将此字段留空。

叠加

显示叠加 - 在图片上添加一层颜色。叠加层可以使文本更易于阅读。
叠加颜色 - 设置叠加层的颜色。
文本颜色 - 设置标题和文本的颜色。如果背景图片较暗，选择浅色文本会使文本更易于阅读。
不透明度 - 设置叠加的不透明度。

向主页添加带文本叠加的图片

PC：

在 Shopify 后台中，转到在线商店 > 模板。
点击 的分区 旁边的自定义。

点击添加分区。
点击带文本叠加的图片，然后点击选择。
在图片区域中，点击选择图片，然后执行以下操作之一：

若要选择已上传到 Shopify 后台的图片，请点击库选项卡。
若要从 Burst 中选择库存图片，请点击免费图片选项卡。您可在此处输入搜索词，或浏览图片类别。
若要从本地计算机选择图片，请点击库选项卡，然后点击上传。

使用设置来对您的分区进行自定义。
点击保存。

苹果系统：

在 Shopify 应用中，轻触商店。
在销售渠道部分，轻触在线商店。
轻触 Manage themes（管理模板）。
在 的分区 旁边，轻触自定义。
轻触编辑。

点击添加分区。
点击带文本叠加的图片，然后点击选择。
在图片区域中，点击选择图片，然后执行以下操作之一：

若要选择已上传到 Shopify 的图片，请点击库选项卡。
若要从 Burst 中选择库存图片，请点击免费图片选项卡。您可在此处输入搜索词，或浏览图片类别。
若要从本地计算机选择图片，请点击库选项卡，然后点击上传。

使用设置来对您的分区进行自定义。
点击保存。

安卓系统：

在 Shopify 应用中，轻触商店。
在销售渠道部分，轻触在线商店。
轻触 Manage themes（管理模板）。
在 的分区 旁边，轻触自定义。
轻触编辑。

点击添加分区。
点击带文本叠加的图片，然后点击选择。
在图片区域中，点击选择图片，然后执行以下操作之一：

若要选择已上传到 Shopify 后台的图片，请点击库选项卡。
若要从 Burst 中选择库存图片，请点击免费图片选项卡。您可在此处输入搜索词，或浏览图片类别。
若要从本地计算机选择图片，请点击库选项卡，然后点击上传。

使用设置来对您的分区进行自定义。
点击保存。

Image with text
Narrative includes an Image with text section that lets you show an image with a custom message to your customers.
You can select an image alignment to make sure that important parts of the image don't get cropped when viewed from mobile devices. For example, if you never want the bottom of your image cropped because it shows the product you are selling, then you can choose a bottom center alignment to make sure that part of the image doesn't get cropped.
The image with text section includes the following settings:
Settings
Section height - Choose how big you want this section to be.
Background color - Set a background color for the section.
Image
Image - Add an image to display in the section.
Image style - Choose the crop style for the image. Choose None to leave the image uncropped.
Image position - Choose the alignment of the image within the frame.
Text
Heading - Add a heading to the section.
Text - Add text to the section.
Use secondary button style - Display the button as a transparent button with a solid outline.
Button label - Add a button with a text label to the section.
Button link - Set the URL or page that you want the button to link to. Paste in the URL or select a page from the menu. If you do not want to include a button in the section, then leave this field empty.
Image alignment
Desktop - Choose whether the image in the section appears on the left or right when viewed from a desktop computer.
Mobile - Choose whether the image in the section appears first or second when viewed from a mobile device.
Add an image with text to your home page
PC：
From your Shopify admin, go to Online Store > Themes.
Next to Narrative, click Customize.
Click Add section.
Click Image with text, and then click Select.
In the Image area, click Select image, and then do one of the following:
To select an image that you have already uploaded to your Shopify admin, click the Library tab.
To select a stock image from Burst, click the Free images tab. From here you can enter a search term, or browse the image categories.
To select an image from your local computer, click the Library tab, and then click Upload.
Use the settings to customize your image with text section.
Click Save.
iPhone：
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Next to Narrative, tap Customize.
Tap Edit.
Click Add section.
Click Image with text, and then click Select.
In the Image area, click Select image, and then do one of the following:
To select an image that you have already uploaded to your Shopify admin, click the Library tab.
To select a stock image from Burst, click the Free images tab. From here you can enter a search term, or browse the image categories.
To select an image from your local computer, click the Library tab, and then click Upload.
Use the settings to customize your image with text section.
Click Save.
Android：
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Next to Narrative, tap Customize.
Tap Edit.
Click Add section.
Click Image with text, and then click Select.
In the Image area, click Select image, and then do one of the following:
To select an image that you have already uploaded to your Shopify admin, click the Library tab.
To select a stock image from Burst, click the Free images tab. From here you can enter a search term, or browse the image categories.
To select an image from your local computer, click the Library tab, and then click Upload.
Use the settings to customize your image with text section.
Click Save.
Image with text overlay
You can display a custom message to your customers on your home page using the image with text overlay section. Your message could describe a product, share an announcement, or welcome customers to your store.
The image with text overlay section includes the following settings:
Settings
Section spacing - Choose how big you want this section to be, either Small, Medium, Large, or Extra large.
Image - Add an image to display in the section.
Image alignment - Choose how you want to align the image in the section.
Text
Heading - Add a title to your section.
Text - Add body text to your section.
Text size - Set the size of the heading and body text.
Use secondary button style - Display the button as a transparent button with a solid outline.
Button label - Add a button with a text label to the section.
Button link - Set the URL or page that you want the button to link to. Paste in the URL or select a page from the menu. If you do not want to include a button in the section, then leave this field empty.
Overlay
Show overlay - Add a layer of color over your image. An overlay can make the text easier to read.
Overlay Color - Set the color of the overlay.
Text color - Set the color of your heading and text. If the background image is dark, picking a light text color makes the text easier to read.
Opacity - Set the opacity of your overlay.
Add an image with text overlay to your home page
PC：
From your Shopify admin, go to Online Store > Themes.
Next to Narrative, click Customize.
Click Add section.
Click Image with text overlay then click Select.
In the Image area, click Select image, and then do one of the following:
To select an image that you have already uploaded to your Shopify admin, click the Library tab.
To select a stock image from Burst, click the Free images tab. From here you can enter a search term, or browse the image categories.
To select an image from your local computer, click the Library tab, and then click Upload.
Use the settings to customize your section.
Click Save.
PC：
From your Shopify admin, go to Online Store > Themes.
Next to Narrative, click Customize.
Click Add section.
Click Image with text overlay then click Select.
In the Image area, click Select image, and then do one of the following:
To select an image that you have already uploaded to your Shopify admin, click the Library tab.
To select a stock image from Burst, click the Free images tab. From here you can enter a search term, or browse the image categories.
To select an image from your local computer, click the Library tab, and then click Upload.
Use the settings to customize your section.
Click Save.
iPhone：
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Next to Narrative, tap Customize.
Tap Edit.
Click Add section.
Click Image with text overlay then click Select.
In the Image area, click Select image, and then do one of the following:
To select an image that you have already uploaded to your Shopify admin, click the Library tab.
To select a stock image from Burst, click the Free images tab. From here you can enter a search term, or browse the image categories.
To select an image from your local computer, click the Library tab, and then click Upload.
Use the settings to customize your section.
Click Save.
Android：
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Next to Narrative, tap Customize.
Tap Edit.
Click Add section.
Click Image with text overlay then click Select.
In the Image area, click Select image, and then do one of the following:
To select an image that you have already uploaded to your Shopify admin, click the Library tab.
To select a stock image from Burst, click the Free images tab. From here you can enter a search term, or browse the image categories.
To select an image from your local computer, click the Library tab, and then click Upload.
Use the settings to customize your section.
Click Save.