Shopify元素-产品图片

在本文中，您將了解另一個名為产品图片的 Shopify 要素。 該要素是 PageFly 3.8.0 版的新要素。 基本上，這個新的产品图片要素為您的產品展示提供了更多不同的媒體類型。 我們一起來查看這篇文章有什麼變化吧!

关于产品图片元素

产品图片要素旨在在您的頁面上顯示您的 Shopify 產品，以提高您的轉化率。 您可以使用产品图片要素在任何非產品頁面上推銷您的產品或在產品頁面上使用它。

或者您也可以觀看此視頻教程：

产品图片元素配置

• 第 1 步：點擊要素目錄中的添加 Shopify 要素圖標
• 第 2 步：點擊下拉菜單中的产品图片要素
• 第 3 步：將要素拖放到頁面編輯器中，然後開始使用它。

产品图片要素具有三種常見變體，但我們將繼續添加更多變體以幫助您節省時間。目前，产品图片要素現在允許這些媒體類型，以便您可以最大化您的產品展示，包括：

• 圖片
• 3D模式
• 視頻

請注意，您可以使用搜索功能搜索此要素，而不用在側邊欄中找到它。

产品图片要素配置

产品图片要素帶有大量參數，可讓您微調內容外觀以獲得最佳轉換率。 選擇佈局中的要素以查看其參數。

當您將产品图片要素拖放到編輯器頁面時，產品來源選項有 2 個選項供您選擇：

• 自動
• 自定義產品

請注意，如果您在產品頁面中並使用产品图片要素，則可以選擇產品來源選項。但是，如果您在常規頁面中並使用此要素，則產品來源選項將被禁用，並且默認選擇自定義產品。

在產品頁面中，如果您選擇自動，通過頁面分配，分配到該頁面的產品將顯示在頁面編輯器中。

通用標簽配置

1.商品源：當您將产品图片要素拖放到編輯器頁面時，商品源選項有2個選項供您選擇：

• 自動：通過頁面分配，分配到該頁面的產品將顯示在頁面編輯器中。
• 自定義產品：您可以選擇自定義產品並選擇您想要的產品。

請注意，如果您在產品頁面中並使用产品图片要素，則可以選擇產品來源選項。但是，如果您在常規頁面上並使用此要素，則產品來源選項將被禁用，並且默認選擇自定義產品。

2.默認媒體源：有 2 個選項可以選擇顯示产品图片，例如：

• 特色媒體：在 Shopify 內產品的媒體模塊顯示媒體。
• 第一個變體媒體：顯示您在 Shopify 中設置的產品的第一個變體媒體。

您可以前往 Shopify 管理查看這些產品。

3.設置固定寬度

使媒體適合其容器的寬度（例如：列）。

4.媒體寬度

您可以在關閉啟用全寬時調整圖片寬度。

5.媒體比例

共有三種類型供您選擇：

原始：媒體將以原來尺寸顯示

方形：媒體將以方形顯示

自定義：您可以調整媒體的高度

6.媒體高度

在媒體比率中選擇自定義時，您可以調整媒體高度。

7.媒體對象擬合

在方形和自定義類型中，您可以重新調整媒體大小以適合其容器：

覆蓋：媒體將拉伸以適合容器

包含：媒體將擠壓以留在其容器內

8.媒體定位

在方形和自定義類型中，您可以選擇指定媒體在其容器內的位置。

如果媒體適合其容器，媒體位置將顯示如下

9.媒體懸停動作：有3個選項供您選擇是否希望媒體可以懸停

• 無：如果您不希望产品图片懸停，請選擇此選項。
• 啟用圖片放大鏡：當您懸停在每個产品图片上時，將放大产品图片的每個媒體列表。
• 顯示懸停圖片：當鼠標懸停在产品图片要素上時，懸停媒體將在 0.3 秒鐘延遲後替換默認媒體。有 4 種懸停類型可供選擇
  • 下一張圖片：顯示特色媒體的下一張圖片。
  • 最後一張圖片：顯示特色媒體的最後一張圖片。
  • 隨機圖片：隨機顯示特色媒體的圖片。
  • 所有圖片：在产品图片上移動鼠標光標時顯示多媒體。

請注意，媒體懸停操作不適用於平板電腦或智能手機等基於觸摸的設備。

10.媒體點擊動作：點擊产品图片時有3個選項可供選擇：

• 無：如果您不想在點擊媒體時進行任何更改，請選擇此選項。
• 鏈接到產品：如果要將圖片鏈接到相應的產品，請選擇此選項。
• 顯示媒體庫：如果您想通過雙擊/單擊媒體來全屏查看，請選擇此選項。

在移動設備上，您可以雙擊放大产品图片，再次雙擊縮小。

11.媒體列表：有 3 個選項可供選擇：無、點和隱藏。

如果您選擇無，則不會顯示媒體列表。

如果您選擇點，媒體列表則將在产品图片下以點的形式進行分頁

如果您選擇圖片，將完全顯示媒體列表

• 列表位置：您可以選擇列表的位置，有 4 個選項：頂部、右側、底部和左側。

• 列表佈局：您可以選擇媒體列表的佈局，它將顯示為 2 個選項其中的 1 個：幻燈片和網格。

• 項目每張幻燈片：您可以在此處設置一列中顯示的項目數。 最大數量為 12 項。
• 項目間隔：您可以在此處調整項目之間的間隔。最大間隔為 100 像素。

如果您選擇隱藏媒體列表，則沒有適合您的媒體列表選項。

• 顯示徽章：如果您想在产品图片上顯示徽章，請啟用此選項
• 徽章位置：有 4 個位置供您選擇：左上、右上、左下和右下。

您可以在此處獲取有關屬性、可見性、動畫參數的更多信息

样式配置

您可以在此處獲取有關間隔、背景、邊框、顯示、自定義 CSS 參數的更多信息

你也可以參考這個關於產品細節要素的視頻教程

嵌套要素配置

產品徽章配置

選擇徽章為其設置選項

• 文本：文本框顯示產品變體左側的折扣或庫存。 您還可以為該徽章添加自定義內容。

請注意，“折扣”和“庫存”是根據所選產品變體的價值計算的。

• 應用產品條件：有2個申請條件：
  • 屬於收藏（復數）：所有收藏；自定義系列：僅當產品屬於所選系列時才會顯示徽章。
  • 容納標籤（復數）：僅當產品容納定義的標籤之一時才會顯示徽章。

您可以在此處獲取有關屬性、可見性、動畫參數的更多信息

您可以在此處獲取有關間隔、背景、邊框、顯示、自定義 CSS 參數的更多信息

媒體列表項

選擇媒體列表項以設置選項。媒體列表項要素的樣式標簽中的參數包括：

• 媒體列表項狀態：您可以為標題的 3 種狀態設置樣式，例如正常、懸停和已選定。

• 邊框樣式：您可以為每個狀態選擇 4 種邊框樣式之一。單擊更多設置按鈕以設置邊框寬度和邊框半徑。

• 不透明度：您可以通過拖動此條來調整不透明度