Shopify Pop模板詳細(xì)設(shè)置教程

經(jīng)過精心設(shè)計(jì)的極簡主義模版，讓您的內(nèi)容易于訪問。Shopify Pop 是中小型庫存商店的理想選擇，Pop 采用大型側(cè)邊欄網(wǎng)站地圖設(shè)計(jì)，可讓您的內(nèi)容易于訪問。

模版編輯器

使用模版編輯器以自定義模版。模版編輯器工具欄分為分區(qū)和模版設(shè)置。

您可以使用分區(qū)修改商店上不同頁面的內(nèi)容和布局。您可以使用模版設(shè)置對商店的字體和顏色進(jìn)行自定義，并且對社交媒體鏈接和結(jié)賬設(shè)置進(jìn)行更改。

分區(qū)是可以在您的在線商店上確定不同頁面布局的可自定義內(nèi)容塊。

主頁分區(qū)包括多種功能（例如幻燈片或新聞資訊注冊），您可以添加、重新排列或刪除這些功能。主頁上最多可以有 25 個(gè)分區(qū)。

每種類型的頁面都有自己的分區(qū)。例如，產(chǎn)品頁面的分區(qū)決定了在線商店上每個(gè)產(chǎn)品頁面的布局。

頁面上的各分區(qū)始終位于在線商店的特定位置。您可以對它們進(jìn)行自定義，但不能重新排列或刪除它們。

每個(gè)模版包括固定的分區(qū)（例如頁眉和頁腳），在線商店的每個(gè)頁面上都會顯示這些分區(qū)。

Pop 包括以下靜態(tài)分區(qū)：

logo 和菜單

公告欄

頁腳

產(chǎn)品頁面

產(chǎn)品系列頁面

產(chǎn)品系列列表頁面

文章

動(dòng)態(tài)分區(qū)

您可以添加、重新排列和刪除動(dòng)態(tài)分區(qū)來自定義主頁的布局。每個(gè)模版都有唯一一組可供選擇的動(dòng)態(tài)分區(qū)。

Pop 包括以下動(dòng)態(tài)分區(qū)：

博客文章

產(chǎn)品系列列表

特色產(chǎn)品系列

帶文本的圖片

幻燈片

特色產(chǎn)品

新聞通訊

地圖

格式文本

視頻

自定義 HTML

產(chǎn)品頁面

在產(chǎn)品頁面分區(qū)中，您可以添加或刪除以下元素：

產(chǎn)品品牌或供應(yīng)商

圖片縮放

相關(guān)產(chǎn)品

數(shù)量選擇器

動(dòng)態(tài)結(jié)賬按鈕

社交分享圖標(biāo)

要編輯產(chǎn)品頁面的設(shè)置，請執(zhí)行以下操作：

從頂欄下拉菜單中選擇產(chǎn)品頁面。

單擊分區(qū)。

單擊產(chǎn)品頁面。

選中 Show product vendor（顯示產(chǎn)品供應(yīng)商），以顯示產(chǎn)品品牌或供應(yīng)商。要顯示品牌或供應(yīng)商，您需要向產(chǎn)品添加供應(yīng)商。

若要讓客戶通過將鼠標(biāo)懸停在產(chǎn)品圖片上方來放大圖片，請選中 Enable image zoom（啟用圖片縮放）。

若要在頁面底部顯示所選的相關(guān)產(chǎn)品，請選中顯示相關(guān)產(chǎn)品。產(chǎn)品所屬的產(chǎn)品系列決定了顯示的相關(guān)產(chǎn)品。要顯示相關(guān)產(chǎn)品，您需要為產(chǎn)品創(chuàng)建產(chǎn)品系列，或?qū)⑵涮砑拥浆F(xiàn)有產(chǎn)品系列中。如果產(chǎn)品不是產(chǎn)品系列中的一部分，則不會顯示相關(guān)產(chǎn)品。

要顯示數(shù)量選擇器，請選中顯示數(shù)量選擇器。

若要顯示動(dòng)態(tài)結(jié)賬按鈕，請選中 Show dynamic checkout button（顯示動(dòng)態(tài)結(jié)賬按鈕）。

若要顯示社交共享圖標(biāo)，請選中 Enable product sharing（啟用產(chǎn)品共享）。

單擊保存。

新聞通訊

您可以在主頁上添加新聞通訊注冊。這使您可以為電子郵件營銷活動(dòng)收集客戶電子郵件地址。您可在 Shopify 博客上了解有關(guān)電子郵件營銷的詳細(xì)信息。

向主頁添加新聞通訊注冊：

在 Shopify 后臺中，轉(zhuǎn)到在線商店 > 模版。

查找 Pop，然后單擊自定義。

單擊分區(qū)。

單擊添加分區(qū) > 新聞通訊。

在標(biāo)題字段中輸入新聞通訊注冊的標(biāo)題。默認(rèn)標(biāo)題是“訂閱我們的新聞通訊”。

在子文本字段中輸入新聞通訊注冊的子標(biāo)題。默認(rèn)文本為“促銷、新產(chǎn)品和銷售。直接發(fā)送到您的收件箱”。

通過單擊背景色樣本并選擇顏色，為新聞通訊注冊分區(qū)設(shè)置背景顏色。

單擊保存。

視頻

您可以將托管在 YouTube 或 Vimeo 上的視頻添加到您的主頁。視頻可以吸引客戶并讓他們對您的業(yè)務(wù)產(chǎn)生興趣。

要將視頻添加到您的主頁，請執(zhí)行以下步驟：

在 Shopify 后臺中，轉(zhuǎn)到在線商店 > 模版。

查找 Pop，然后單擊自定義。

單擊分區(qū)。

單擊添加分區(qū) > 視頻。

在標(biāo)題字段中輸入視頻的標(biāo)題。

在 Video link（視頻鏈接）字段中輸入視頻的共享鏈接。

YouTube 共享鏈接如下所示：https://youtu.be/OTJXAUZY9t0。您可以在此 YouTube 幫助文章中了解如何復(fù)制 YouTube 視頻的共享鏈接。

Vimeo 共享鏈接如下所示：https://vimeo.com/281332510。您可以在此 Vimeo 幫助中心文章中了解如何復(fù)制 Vimeo 視頻的共享鏈接。

單擊保存。

自定義 HTML

在自定義 HTML 部分中，可使用 HTML 代碼創(chuàng)建主頁的自定義內(nèi)容。例如，可使用 HTML 設(shè)置文本塊的格式、創(chuàng)建表或嵌入來自第三方網(wǎng)站的內(nèi)容。

若要將自定義 HTML 添加到主頁，請執(zhí)行以下操作：

在 Shopify 后臺中，轉(zhuǎn)到在線商店 > 模版。

查找 Pop，然后單擊自定義。

單擊分區(qū)。

單擊添加分區(qū)。

在 Advanced layout（高級布局）區(qū)域中，單擊 Custom HTML（自定義 HTML）> 添加。

單擊 Custom HTML（自定義 HTML），然后輸入想要添加到主頁的 HTML 代碼。

單擊保存。

模版設(shè)置：您可以使用模版設(shè)置來自定在線商店的顏色和字體。您還可以設(shè)置指向社交媒體帳號的鏈接、編輯購物車設(shè)置以及添加網(wǎng)站圖標(biāo)。

Pop 包括以下模版設(shè)置：

顏色

字體

網(wǎng)站圖標(biāo)

購物車頁面

社交媒體

結(jié)賬

顏色

您可以為在線商店的不同部分選擇顏色。

自定義顏色設(shè)置

在 Shopify 后臺中，轉(zhuǎn)到在線商店 > 模版。

單擊 **** 旁邊的自定義。

單擊模版設(shè)置。

單擊顏色。

對于每種類型的內(nèi)容，單擊顏色 swatch 以使用顏色選擇器：

- 最近所選區(qū)域顯示您最近為您的模版選擇過的顏色。 - 當(dāng)前使用區(qū)域顯示您當(dāng)前正在模版的其他部分中使用的顏色。

若要將顏色設(shè)置為透明，請單擊無。

單擊保存。

字體

您可設(shè)置在線商店上的文本的字體樣式和大小。

自定義字體設(shè)置

在 Shopify 后臺中，轉(zhuǎn)到在線商店 > 模版。

單擊 **** 旁邊的自定義。

單擊模版設(shè)置。

單擊 Typography（字體）。

對于每種類型的文本，單擊更改以使用字體選擇器：

通過使用搜索字段或通過單擊加載更多來瀏覽字體。

若要查看所有可用的字體，請參閱 Shopify 的字體庫。

單擊要使用的字體名稱。

若要將字體更改為其他樣式，例如粗體或斜體，請單擊 Regular（常規(guī)）。下一步，單擊您要使用的樣式，然后單擊選擇。

單擊保存。

社交媒體

您可以為產(chǎn)品和博客文章添加社交共享按鈕，以及指向您的社交媒體帳戶的鏈接。

自定義社交媒體設(shè)置：

在 Shopify 后臺中，轉(zhuǎn)到在線商店 > 模版。

查找 Pop，然后單擊自定義。

單擊模版設(shè)置。

單擊社交媒體。

若要上傳社交共享圖片，請?jiān)谏缃还蚕韴D片區(qū)域中，單擊選擇圖片或?yàn)g覽免費(fèi)圖片。

若要將鏈接添加到社交媒體帳戶，請?jiān)谏缃粠魠^(qū)域中，在提供的字段中輸入帳戶鏈接。請輸入完整鏈接，例如 https://instagram.com/shopify 或 https://twitter.com/shopify。

指向您社交媒體帳戶的鏈接顯示在您的在線商店的頁腳中。

要在產(chǎn)品和博客文章中添加社交共享按鈕，請選中 Sharing options（社交共享選項(xiàng)）區(qū)域中的任意或所有復(fù)選框。

您可以添加以下共享按鈕：

- 在 Facebook 上共享 - 在 Twitter 上發(fā)推文 - Pinterest 上的圖釘（不可用于博客文章共享）

單擊保存。

備注: 要在產(chǎn)品頁面和博客文章上顯示社交共享按鈕，您還需要在這些頁面的分區(qū)中啟用這些按鈕。

將子菜單添加到側(cè)邊欄

若要將下拉菜單添加到您的主菜單，需要在網(wǎng)站地圖頁面上創(chuàng)建菜單。本文將引導(dǎo)您完成此過程。

最佳商店 logo 大小

比例緊湊的 logo 最適合 Pop 模版，因?yàn)樗趥?cè)邊欄中顯示您的 logo。寬度大且高度相對較小的橫幅式 logo 不太適合該模版。

logo 的最大寬度為 450 像素，最大高度為 200 像素。系統(tǒng)將調(diào)整您上傳的 logo 文件大小以符合這些限制。

理想的格式是 PNG。

讓 logo 以更大的尺寸顯示在移動(dòng)設(shè)備上

首先，為了增大 logo 在任何布局中的大小，在將 logo 圖形文件上傳到 Shopify 之前，必須先修剪 logo 圖形周圍的所有負(fù)空間或透明像素。

這個(gè) logo 周圍有很多負(fù)空間：

下面是修剪后的同一 logo — 所有負(fù)空間已被裁剪：

在 Pop 模版中使用時(shí)，未修剪的 logo 如下所示：

在 Pop 模版中使用時(shí)，修剪后的 logo 如下所示：

提示:

您始終可以通過編輯模版樣式表來在 logo 周圍添加填充，Shopify 模版客服團(tuán)隊(duì)能為您提供相關(guān)幫助。但消除來自 logo 文件本身的填充無法在模版中實(shí)現(xiàn)。

當(dāng)您知道由于 logo 包含的負(fù)空間而未使 logo 變小之后，您可以調(diào)整移動(dòng)標(biāo)題的高度，以向 logo 提供擴(kuò)展空間。由此，您的 logo 會變得更大。

轉(zhuǎn)到模版編輯器，在 Header & Navigation（標(biāo)頭和網(wǎng)站地圖）部分中，增加“調(diào)整尺寸 > 移動(dòng)菜單高度”值。

在側(cè)邊欄中放大 logo

首先，為了增大 logo 在任何布局中的大小，在將 logo 圖形文件上傳到 Shopify 之前，必須先修剪 logo 圖形周圍的所有負(fù)空間或透明像素。

這個(gè) logo 周圍有很多負(fù)空間：

下面是修剪后的同一 logo — 所有負(fù)空間已被裁剪：

上傳到 Pop 模版時(shí)，帶有負(fù)空間的 logo 如下所示：

在 Pop 模版中使用時(shí)，修剪后的 logo 如下所示：

提示:

您始終可以通過編輯模版樣式表來在 logo 周圍添加填充，Shopify 模版客服團(tuán)隊(duì)能為您提供相關(guān)幫助。但消除來自 logo 文件本身的填充無法在模版中實(shí)現(xiàn)。

當(dāng)您知道 logo 由于其所含的負(fù)空間而未變小之后，您可以調(diào)整側(cè)邊欄的寬度，為 logo 提供擴(kuò)展空間。由此，您的 logo 會變得更大。

轉(zhuǎn)到模版編輯器，在 Header & Navigation（標(biāo)頭和網(wǎng)站地圖）部分中，增加“調(diào)整尺寸 > 桌面菜單寬度”值。

減少側(cè)邊欄 logo 周圍的空白

在刪除由 Pop 模版添加在 logo 上方和下方的任何填充之前，修剪可能來自圖片本身的所有填充非常重要。將 logo 文件上傳到 Shopify 之前，您需要先修剪 logo 圖形周圍的負(fù)空間或透明像素。

這個(gè) logo 周圍有很多負(fù)空間：

此處為修剪后的同一 logo — 負(fù)空間已被裁剪：

在 Pop 模版中使用時(shí)，未修剪的 logo 如下所示：

在 Pop 模版中使用時(shí)，修剪后的 logo 如下所示：

提示:

您始終可以通過編輯模版樣式表來在 logo 周圍添加填充，Shopify 模版客服團(tuán)隊(duì)能為您提供相關(guān)幫助。但消除來自 logo 文件本身的填充無法在模版中實(shí)現(xiàn)。

您已將修剪的 logo上傳到模版資源后，您可以通過轉(zhuǎn)到模版編輯器來調(diào)整側(cè)邊欄的寬度。在 Header & Navigation（標(biāo)題和網(wǎng)站地圖）部分，根據(jù)您的喜好編輯“調(diào)整尺寸 > 桌面菜單寬度”值。

作為最后一種不受支持的方法，如果您想減少 logo 上方和下方的填充，請按照下列步驟操作：

在 Shopify 后臺中，轉(zhuǎn)到在線商店 > 模版。

找到要編輯的模版，然后單擊操作 > 編輯代碼。

在“資產(chǎn)”下，單擊 timber.scss.liquid 以在在線代碼編輯器中打開模版樣式表，或者轉(zhuǎn)到此 URL。

在文件底部，添加以下內(nèi)容：

``` sass {% comment %} 以下媒體查詢功能會產(chǎn)生以下內(nèi)容：@僅在寬度 > 1025 像素時(shí)顯示媒體屏幕和（最小寬度：1025 像素）{ ... } 側(cè)邊欄。{% endcomment %}

@include at-query ($min, $large) { .header-logo { margin-bottom: 30px /* original is 60px */; }

} ```

保存文件。

編輯產(chǎn)品頁面的設(shè)置

在產(chǎn)品頁面分區(qū)中，您可以添加或刪除以下元素：

產(chǎn)品品牌或供應(yīng)商

圖片縮放

相關(guān)產(chǎn)品

數(shù)量選擇器

動(dòng)態(tài)結(jié)賬按鈕

社交分享圖標(biāo)

要編輯產(chǎn)品頁面的設(shè)置，請執(zhí)行以下操作：

從頂欄下拉菜單中選擇產(chǎn)品頁面。

單擊分區(qū)。

單擊產(chǎn)品頁面。

選中 Show product vendor（顯示產(chǎn)品供應(yīng)商），以顯示產(chǎn)品品牌或供應(yīng)商。要顯示品牌或供應(yīng)商，您需要向產(chǎn)品添加供應(yīng)商。

若要讓客戶通過將鼠標(biāo)懸停在產(chǎn)品圖片上方來放大圖片，請選中 Enable image zoom（啟用圖片縮放）。

若要在頁面底部顯示所選的相關(guān)產(chǎn)品，請選中顯示相關(guān)產(chǎn)品。產(chǎn)品所屬的產(chǎn)品系列決定了顯示的相關(guān)產(chǎn)品。要顯示相關(guān)產(chǎn)品，您需要為產(chǎn)品創(chuàng)建產(chǎn)品系列，或?qū)⑵涮砑拥浆F(xiàn)有產(chǎn)品系列中。如果產(chǎn)品不是產(chǎn)品系列中的一部分，則不會顯示相關(guān)產(chǎn)品。

要顯示數(shù)量選擇器，請選中顯示數(shù)量選擇器。

若要顯示動(dòng)態(tài)結(jié)賬按鈕，請選中 Show dynamic checkout button（顯示動(dòng)態(tài)結(jié)賬按鈕）。

若要顯示社交共享圖標(biāo)，請選中 Enable product sharing（啟用產(chǎn)品共享）。

單擊保存。

Pop 的最佳產(chǎn)品圖片類型

更高分辨率的照片在 Pop 模版中看起來會更加精致和專業(yè)，因此您應(yīng)選擇分辨率至少為 1024 x 1024 像素的圖片。圖片在有必要時(shí)會自動(dòng)縮小，因此品質(zhì)越高越好。

如果要使用 Image Zoom（圖片縮放）功能（可以在模版編輯器的產(chǎn)品頁面分區(qū)中啟用此功能），則使用較高分辨率的照片尤為重要。

產(chǎn)品的配圖最好都使用相同的寬高比，以便在產(chǎn)品系列頁面上呈現(xiàn)最佳效果。（來源：Shopify）

以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果網(wǎng)立場！如有侵權(quán)，請聯(lián)系我們。

相關(guān)推薦：Shopify Narrative模板詳細(xì)設(shè)置教程