您可以將圖片的幻燈片添加到您的主頁。在幻燈片分區中,您可以設置幻燈片的高度、添加文本和按鈕,以及選擇是否自動播放幻燈片。
您可以將圖片的幻燈片添加到您的主頁。在幻燈片分區中,您可以設置幻燈片的高度、添加文本和按鈕,以及選擇是否自動播放幻燈片。
幻燈片分區包括以下設置:
圖片幻燈片 - 選擇要包含在幻燈片中的圖片。您可以、使用先前上傳的圖片或從 Burst 中選擇免費的庫存圖片。您可以設置每張幻燈片的以下設置:
圖片位置 - 在幻燈片框架中選擇圖片的對齊方式。您可以通過下面的指南詳細了解圖片位置。
標題 - 添加與圖片配對的主要文本。
子標題 - 添加與圖片配對的輔助文本。此文本顯示在標題文本下方。
按鈕標簽 - 添加您希望在按鈕上顯示的文本。
按鈕鏈接 - 設置您希望按鈕鏈接到的 URL 或頁面。粘貼 URL 或從菜單中選擇一個頁面。如果您不想在分區中包含按鈕,請將此字段留空。
幻燈片高度 - 設置幻燈片的高度。詳細了解幻燈片高度將對幻燈片產生怎樣的影響。
文本大小 - 在幻燈片上設定標題的大小。
文本對齊方式 - 選擇幻燈片上文本的位置。
顯示疊加 - 在圖片與放置在圖片上的任何文本之間添加一層顏色。疊加有助于提高顏色對比度和文本可讀性。您可以在顏色設置中設置疊加的顏色和不透明度。
自動循環播放幻燈片 - 將幻燈片設置為自動播放。
幻燈片更改時間間隔 - 選擇更改幻燈片的頻率。
要了解幻燈片圖片裁剪和推薦圖片的信息,請參閱幻燈片指南。
PC:
在 后臺中,轉到在線商店 > 模板。
點擊 的分區 旁邊的自定義。
點擊添加分區。
點擊幻燈片,然后點擊選擇。
若要添加圖片幻燈片,請執行以下步驟:
在內容區域中,點擊添加圖片幻燈片。
在圖片下,點擊選擇圖片。若要從計算機上傳圖片,請點擊上傳。若要使用 Burst 中的免費圖庫圖片,請點擊免費圖片。
若要選擇圖片在幻燈片中的對齊方式,請在 Image position(圖片位置)下拉菜單中選擇一個位置。您可以在以下指導中的圖片位置中了解詳細信息。
若要向圖片幻燈片添加文本,請在標題字段、副標題字段或這兩個字段中輸入文本。
通過在按鈕標簽字段中輸入文本,將按鈕添加到圖片中。在按鈕鏈接字段中,為此按鈕選擇要鏈接到的您的在線商店的部分:
使用設置來自定義幻燈片分區。
點擊保存。
蘋果系統:
在 Shopify 應用中,輕觸商店。
在銷售渠道部分,輕觸在線商店。
輕觸 Manage themes(管理模板)。
在 的分區 旁邊,輕觸自定義。
輕觸編輯。
點擊添加分區。
點擊幻燈片,然后點擊選擇。
若要添加圖片幻燈片,請執行以下步驟:
在內容區域中,點擊添加圖片幻燈片。
在圖片下,點擊選擇圖片。若要從計算機上傳圖片,請點擊上傳。若要使用 Burst 中的免費圖庫圖片,請點擊免費圖片。
若要選擇圖片在幻燈片中的對齊方式,請在 Image position(圖片位置)下拉菜單中選擇一個位置。您可以在以下指導中的圖片位置中了解詳細信息。
若要向圖片幻燈片添加文本,請在標題字段、副標題字段或這兩個字段中輸入文本。
通過在按鈕字段中輸入文本,將按鈕添加到圖片中。在按鈕鏈接字段中,為此按鈕選擇要鏈接到的您的在線商店的部分:
使用設置來自定義幻燈片分區。
點擊保存。
安卓系統:
在 Shopify 應用中,輕觸商店。
在銷售渠道部分,輕觸在線商店。
輕觸 Manage themes(管理模板)。
在 的分區 旁邊,輕觸自定義。
輕觸編輯。
點擊添加分區。
點擊幻燈片,然后點擊選擇。
若要添加圖片幻燈片,請執行以下步驟:
在內容區域中,點擊添加圖片幻燈片。
在圖片下,點擊選擇圖片。若要從計算機上傳圖片,請點擊上傳。若要使用 Burst 中的免費圖庫圖片,請點擊免費圖片。
若要選擇圖片在幻燈片中的對齊方式,請在 Image position(圖片位置)下拉菜單中選擇一個位置。您可以在以下指導中的圖片位置中了解詳細信息。
若要向圖片幻燈片添加文本,請在標題字段、副標題字段或這兩個字段中輸入文本。
通過在按鈕標簽字段中輸入文本,將按鈕添加到圖片中。在按鈕鏈接字段中,為此按鈕選擇要鏈接到的您的在線商店的部分:
使用設置來自定義幻燈片分區。
點擊保存。
您可以使用下面的設置和圖片建議來控制幻燈片在您在線商店中的外觀。幻燈片的顯示方式取決于以下因素:
您的圖片尺寸
您的圖片位置設置
幻燈片高度設置
圖片的寬高比
由于屏幕尺寸和形狀有差異,您的幻燈片在移動設備和桌面設備上可能會有所不同。
幻燈片圖片的建議尺寸取決于您的幻燈片高度設置。請遵循以下準則:
若要查看或更改幻燈片高度設置,請參閱創建幻燈片說明中的步驟 5。
您可以采取步驟來控制圖片的裁剪方式或完全避免裁剪圖片。
在以下情況下,您可看到部分屏幕尺寸上出現圖片裁剪:
圖片的寬高比不同。
幻燈片高度可設置為小、中或大。
您的幻燈片高度設置為適應第一張圖片,并且您的圖片高于設備屏幕或窗口的高度。
您可以使用圖片位置設置來控制圖片的裁剪方式。
對于每張圖片,您可以選擇裁剪時要保留的圖片部分。在以下示例中,您可以看到如何針對某些屏幕尺寸裁剪同一圖片。左側的幻燈片將圖片位置設置為正中。右側的幻燈片將圖片位置設置為左上角。
若要查看或更改您的圖片位置設置,請參閱創建幻燈片說明中的步驟 10。
若要避免裁剪幻燈片圖片,請嘗試以下步驟:
將幻燈片高度設置為適應第一張圖片。
使用寬度為高度兩倍的圖片。這些圖片的寬高比為 2:1。建議的尺寸為 1200 px × 600 px。
確保所有幻燈片的寬高比都相同。相對于幻燈片的尺寸(以像素為單位),幻燈片的比例要更加重要。
在以下示例中,桌面和移動設備上顯示了一張比例為 2:1 的幻燈片圖片:
幻燈片分區的寬度始終為瀏覽器窗口的 100%。幻燈片的高度與寬度是相對的。由于屏幕大小存在差異,因此,幻燈片的寬度和高度因不同的設備而異。幻燈片的高度也會受到幻燈片高度設置的影響。
您可以使用幻燈片高度設置 Adapt to first image(適應第一張圖片),基于第一張圖片的高度設置幻燈片的高度。當所有圖片尺寸相同或寬高比相同時,此設置效果最佳。如果您的圖片尺寸不同或比例不同,則可以更改幻燈片的順序,查看它們在不同高度的顯示效果。
在以下示例中,后弦放置了一個最短的幻燈片:
在下一個示例中,首先放置了一個較高的幻燈片:
如果您改為使用小、中或大高度設置,則請參閱幻燈片的圖片尺寸建議。
如果想要避免幻燈片中出現圖片裁剪,我們建議您的圖片采用 2:1 的寬高比
如果您不擔心圖片會在桌面顯示器上被裁剪,并且想要使圖片在移動設備上的顯示效果良好,請使用方形的圖片或高度大于寬度的圖片。以下示例幻燈片顯示了一張方形圖片,寬高比為 1:1。
下一個示例幻燈片顯示了寬高比為 2:3 的肖像圖片。
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:
From your Shopify admin, go to Online Store > Themes.
Next to Debut, click Customize.
Click Add section.
Click Slideshow, and then click Select.
To add an image slide, do the following steps:
In the Content area, click Add image slide.
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.
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.
To add text to the image slide, enter text in the Heading field, the Subheading field, or both.
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.
Use the settings to customize your slideshow section.
Click Save.
iPhone:
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Next to Debut, tap Customize.
Tap Edit.
Click Add section.
Click Slideshow, and then click Select.
To add an image slide, do the following steps:
In the Content area, click Add image slide.
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.
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.
To add text to the image slide, enter text in the Heading field, the Subheading field, or both.
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.
Use the settings to customize your slideshow section.
Click Save.
Android:
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Next to Debut, tap Customize.
Tap Edit.
Click Add section.
Click Slideshow, and then click Select.
To add an image slide, do the following steps:
In the Content area, click Add image slide.
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.
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.
To add text to the image slide, enter text in the Heading field, the Subheading field, or both.
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.
Use the settings to customize your slideshow section.
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:
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.
特別聲明:以上文章內容僅代表作者本人觀點,不代表ESG跨境電商觀點或立場。如有關于作品內容、版權或其它問題請于作品發表后的30日內與ESG跨境電商聯系。
二維碼加載中...
使用微信掃一掃登錄
使用賬號密碼登錄
平臺顧問
微信掃一掃
馬上聯系在線顧問
小程序
ESG跨境小程序
手機入駐更便捷
返回頂部