连连国际官网-LianLianGlobal

幻灯片

您可以将图片的幻灯片添加到您的主页。在幻灯片分区中，您可以设置幻灯片的高度、添加文本和按钮，以及选择是否自动播放幻灯片。

幻灯片分区包括以下设置：

• 图片幻灯片 - 选择要包含在幻灯片中的图片。您可以上传图片、使用先前上传的图片或从 Burst 中选择免费的库存图片。您可以设置每张幻灯片的以下设置：

• 图片位置 - 在幻灯片框架中选择图片的对齐方式。您可以通过下面的指南详细了解图片位置。

• 标题 - 添加与图片配对的主要文本。

• 子标题 - 添加与图片配对的辅助文本。此文本显示在标题文本下方。

• 按钮标签 - 添加您希望在按钮上显示的文本。

• 按钮链接 - 设置您希望按钮链接到的 URL 或页面。粘贴 URL 或从菜单中选择一个页面。如果您不想在分区中包含按钮，请将此字段留空。

• 幻灯片高度 - 设置幻灯片的高度。详细了解幻灯片高度将对幻灯片产生怎样的影响。

• 文本大小 - 在幻灯片上设定标题的大小。

• 文本对齐方式 - 选择幻灯片上文本的位置。

• 显示叠加 - 在图片与放置在图片上的任何文本之间添加一层颜色。叠加有助于提高颜色对比度和文本可读性。您可以在颜色设置中设置叠加的颜色和不透明度。

• 自动循环播放幻灯片 - 将幻灯片设置为自动播放。

• 幻灯片更改时间间隔 - 选择更改幻灯片的频率。

要了解幻灯片图片裁剪和推荐图片尺寸的信息，请参阅幻灯片指南。

在主页中添加幻灯片

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 点击 的分区 旁边的自定义。

1. 点击添加分区。

2. 点击幻灯片，然后点击选择。

3. 若要添加图片幻灯片，请执行以下步骤：

1. 在内容区域中，点击添加图片幻灯片。

2. 在图片下，点击选择图片。若要从计算机上传图片，请点击上传。若要使用 Burst 中的免费图库图片，请点击免费图片。

3. 若要选择图片在幻灯片中的对齐方式，请在 Image position（图片位置）下拉菜单中选择一个位置。您可以在以下指导中的图片位置中了解详细信息。

4. 若要向图片幻灯片添加文本，请在标题字段、副标题字段或这两个字段中输入文本。

5. 通过在按钮标签字段中输入文本，将按钮添加到图片中。在按钮链接字段中，为此按钮选择要链接到的您的在线商店的部分：

4. 使用设置来自定义幻灯片分区。

5. 点击保存。

苹果系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 在 的分区 旁边，轻触自定义。

5. 轻触编辑。

1. 点击添加分区。

2. 点击幻灯片，然后点击选择。

3. 若要添加图片幻灯片，请执行以下步骤：

1. 在内容区域中，点击添加图片幻灯片。

2. 在图片下，点击选择图片。若要从计算机上传图片，请点击上传。若要使用 Burst 中的免费图库图片，请点击免费图片。

3. 若要选择图片在幻灯片中的对齐方式，请在 Image position（图片位置）下拉菜单中选择一个位置。您可以在以下指导中的图片位置中了解详细信息。

4. 若要向图片幻灯片添加文本，请在标题字段、副标题字段或这两个字段中输入文本。

5. 通过在按钮标签字段中输入文本，将按钮添加到图片中。在按钮链接字段中，为此按钮选择要链接到的您的在线商店的部分：

4. 使用设置来自定义幻灯片分区。

5. 点击保存。

安卓系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分，轻触在线商店。

3. 轻触 Manage themes（管理模板）。

4. 在 的分区 旁边，轻触自定义。

5. 轻触编辑。

1. 点击添加分区。

2. 点击幻灯片，然后点击选择。

3. 若要添加图片幻灯片，请执行以下步骤：

1. 在内容区域中，点击添加图片幻灯片。

2. 在图片下，点击选择图片。若要从计算机上传图片，请点击上传。若要使用 Burst 中的免费图库图片，请点击免费图片。

3. 若要选择图片在幻灯片中的对齐方式，请在 Image position（图片位置）下拉菜单中选择一个位置。您可以在以下指导中的图片位置中了解详细信息。

4. 若要向图片幻灯片添加文本，请在标题字段、副标题字段或这两个字段中输入文本。

5. 通过在按钮标签字段中输入文本，将按钮添加到图片中。在按钮链接字段中，为此按钮选择要链接到的您的在线商店的部分：

4. 使用设置来自定义幻灯片分区。

5. 点击保存。

幻灯片指导

您可以使用下面的设置和图片建议来控制幻灯片在您在线商店中的外观。幻灯片的显示方式取决于以下因素：

• 您的图片尺寸

• 您的图片位置设置

• 幻灯片高度设置

• 图片的宽高比

由于屏幕尺寸和形状有差异，您的幻灯片在移动设备和桌面设备上可能会有所不同。

图片尺寸建议

幻灯片图片的建议尺寸取决于您的幻灯片高度设置。请遵循以下准则：

若要查看或更改幻灯片高度设置，请参阅创建幻灯片说明中的步骤 5。

图片裁剪

您可以采取步骤来控制图片的裁剪方式或完全避免裁剪图片。

控制图片的裁剪方式

在以下情况下，您可看到部分屏幕尺寸上出现图片裁剪：

• 图片的宽高比不同。

• 幻灯片高度可设置为小、中或大。

• 您的幻灯片高度设置为适应第一张图片，并且您的图片高于设备屏幕或浏览器窗口的高度。

您可以使用图片位置设置来控制图片的裁剪方式。

对于每张图片，您可以选择裁剪时要保留的图片部分。在以下示例中，您可以看到如何针对某些屏幕尺寸裁剪同一图片。左侧的幻灯片将图片位置设置为正中。右侧的幻灯片将图片位置设置为左上角。

若要查看或更改您的图片位置设置，请参阅创建幻灯片说明中的步骤 10。

避免图片裁剪

若要避免裁剪幻灯片图片，请尝试以下步骤：

• 将幻灯片高度设置为适应第一张图片。

• 使用宽度为高度两倍的图片。这些图片的宽高比为 2:1。建议的尺寸为 1200 px × 600 px。

• 确保所有幻灯片的宽高比都相同。相对于幻灯片的尺寸（以像素为单位），幻灯片的比例要更加重要。

在以下示例中，桌面和移动设备上显示了一张比例为 2:1 的幻灯片图片：

幻灯片高度

幻灯片分区的宽度始终为浏览器窗口的 100%。幻灯片的高度与宽度是相对的。由于屏幕大小存在差异，因此，幻灯片的宽度和高度因不同的设备而异。幻灯片的高度也会受到幻灯片高度设置的影响。

您可以使用幻灯片高度设置 Adapt to first image（适应第一张图片），基于第一张图片的高度设置幻灯片的高度。当所有图片尺寸相同或宽高比相同时，此设置效果最佳。如果您的图片尺寸不同或比例不同，则可以更改幻灯片的顺序，查看它们在不同高度的显示效果。

在以下示例中，后弦放置了一个最短的幻灯片：

在下一个示例中，首先放置了一个较高的幻灯片：

如果您改为使用小、中或大高度设置，则请参阅幻灯片的图片尺寸建议。

图片比

如果想要避免幻灯片中出现图片裁剪，我们建议您的图片采用 2:1 的宽高比

如果您不担心图片会在桌面显示器上被裁剪，并且想要使图片在移动设备上的显示效果良好，请使用方形的图片或高度大于宽度的图片。以下示例幻灯片显示了一张方形图片，宽高比为 1:1。

下一个示例幻灯片显示了宽高比为 2:3 的肖像图片。

Shopify商户官网原文详情：

Slideshow

You can add a slideshow of images to your home page. In the slideshow section, you can set the height of the slides, add text and buttons, and choose whether your slideshow plays automatically.

The Slideshow section includes the following settings:

• Image slide - Choose an image to include in the slideshow. You can upload an image, use a previously-uploaded image, or select a free stock image from Burst. You can set the following settings for each slide:

• Image position - Choose the alignment of the image in the slideshow frame. You can learn more about image position in the guidelines below.

• Heading - Add the primary text to pair with the image.

• Subheading - Add the secondary text to pair with the image. This text appears below the heading text.

• Button label - Add the text that you want to appear on the button.

• 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.

• Slide height - Set the height of the slideshow. Learn more about how slide height affects your slideshow.

• Text size - Set the size of your headings on the slideshow.

• Text alignment - Choose the position of the text on your slides.

• Show overlay - Add a layer of color between an image and any text that is placed over the image. Overlays can help with color contrast and readability. You can set the color and opacity of the overlay in the color settings.

• Auto-rotate slides - Set the slideshow to play automatically.

• Change slides every - Choose how often to change slides.

To learn about slideshow image cropping and recommended image sizes, refer to the slideshow guidelines.

Add a slideshow to your home page

PC：

1. From your Shopify admin, go to Online Store > Themes.

2. Next to Debut, click Customize.

1. Click Add section.

2. Click Slideshow, and then click Select.

3. To add an image slide, do the following steps:

1. In the Content area, click Add image slide.

2. Under Image, click Select image. To upload an image from your computer, click Upload. To use a free stock image from Burst, click Free images.

3. To choose how you want to align the image in the slideshow, select a position from the Image position drop-down menu. You can learn more about image position in the guidelines below.

4. To add text to the image slide, enter text in the Heading field, the Subheading field, or both.

5. Add a button to your image slide by entering text in the Button label field. Select a part of your online store for the button to link to in the Button link field.

4. Use the settings to customize your slideshow section.

5. Click Save.

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Next to Debut, tap Customize.

5. Tap Edit.

1. Click Add section.

2. Click Slideshow, and then click Select.

3. To add an image slide, do the following steps:

1. In the Content area, click Add image slide.

2. Under Image, click Select image. To upload an image from your computer, click Upload. To use a free stock image from Burst, click Free images.

3. To choose how you want to align the image in the slideshow, select a position from the Image position drop-down menu. You can learn more about image position in the guidelines below.

4. To add text to the image slide, enter text in the Heading field, the Subheading field, or both.

5. Add a button to your image slide by entering text in the Button label field. Select a part of your online store for the button to link to in the Button link field.

4. Use the settings to customize your slideshow section.

5. Click Save.

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Next to Debut, tap Customize.

5. Tap Edit.

1. Click Add section.

2. Click Slideshow, and then click Select.

3. To add an image slide, do the following steps:

1. In the Content area, click Add image slide.

2. Under Image, click Select image. To upload an image from your computer, click Upload. To use a free stock image from Burst, click Free images.

3. To choose how you want to align the image in the slideshow, select a position from the Image position drop-down menu. You can learn more about image position in the guidelines below.

4. To add text to the image slide, enter text in the Heading field, the Subheading field, or both.

5. Add a button to your image slide by entering text in the Button label field. Select a part of your online store for the button to link to in the Button link field.

4. Use the settings to customize your slideshow section.

5. Click Save.

Slideshow guidelines

You can use the settings and image recommendations below to control the way that your slideshow looks on your online store. The way that your slides appear is determined by the following factors:

• The dimensions of your images

• Your image position settings

• Your slide height settings

• The width-to-height ratio of your images

Because of differences in screen size and shape, your slides might look different on mobile and desktop devices.

Image size recommendations

The recommended dimensions for slideshow images depend on your slide height settings. Use the following guidelines:

Slide height setting	Recommended width	Recommended height
Adapt to first image	1200 px	600 px
Small	1200 px	475 px
Medium	1200 px	489 px
Large	1200 px	775 px

To view or change your slide height settings, see step 5 of the instructions to create a slideshow.

Image cropping

You can take steps to control how your images are cropped or to avoid image cropping altogether.

CONTROL HOW YOUR IMAGES ARE CROPPED

You can expect image cropping on some screen sizes in the following situations:

• Your images don't have the same width-to-height ratio.

• Your slide height is set to Small, Medium, or Large.

• Your slide height is set to Adapt to first image and your images are taller than the device screen or browser window.

You can control how your images are cropped by using the Image position setting.

For each image, you can choose which part you want to keep in view when cropping occurs. In the following example, you can see how the same image might be cropped for some screen sizes. The slide on the left has the image position set to Middle center. The slide on the right has the image position set to Top left

To view or change your image position settings, refer to step 10 of the instructions to create a slideshow.

AVOID IMAGE CROPPING

To avoid image cropping in your slideshow, try the following steps:

• Set your slide height to Adapt to first image.

• Use images that are twice as wide as they are tall. Such images have a width-to-height ratio of 2:1. The recommended dimensions are 1200 px by 600 px.

• Make sure that all of your slides have the same width-to-height ratio. The ratio of your slides is more important than their dimensions in pixels.

In the following example, a slideshow image with a 2:1 ratio is shown on a desktop and a mobile device:

Slide height

The width of the slideshow section is always 100% of the browser window. The height of your slides is relative to the width. Because of differences in screen size, the width and height of your slides varies for different devices. The height of your slides is also influenced by your slide height settings.

You can use the Adapt to first image slide height setting to base the height of your slideshow on the height of your first image. This setting works best when all your images are the same size, or have the same width-to-height ratio. If your images are different sizes or have different ratios, then you can change the order of your slides to see how they look at different heights.

In the following example, the shortest slide is positioned first:

In the next example, a taller slide is positioned first:

If you use the Small, Medium, or Large height settings instead, then refer to the image size recommendations for your slides.

Image ratios

If you want to avoid image cropping in your slideshow, then the recommended width-to-height ratio for your images is 2:1.

If you aren't concerned about cropping on desktop displays and want to make an impact on mobile devices, then use images that are square, or images that are taller than they are wide. The following example slide shows a square image, which has a 1:1 width-to-height ratio.

The next example slide shows a portrait image with a 2:3 width-to-height ratio.

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