這屬于高級教程,Shopify 不提供相關支持。使用者需要具備 Web 設計語言(例如 HTML、CSS、JavaScript 和 Liquid)的知識。如果您需要幫助,那么您可以雇用 Shopify 合作伙伴。
Buy Button 和購物車是通過您從 Shopify 后臺復制并粘貼到您的網頁的源 HTML 的代碼片段生成的。這些代碼片段稱為嵌入代碼。如果您想更改按鈕或購物車的外觀或行為,則需要編輯相關聯的嵌入代碼。
這些說明適用于您在 2016 年 9 月 26 日之后生成的 Buy Button 嵌入代碼。如果您想更改在此日期之前生成的嵌入代碼,則需要按照舊版說明進行操作。您還可以使用 Buy Button 銷售渠道重新創建嵌入代碼。
如果您不確定自己的嵌入代碼版本,請查看代碼是否以 <script data-shopify-buy-ui> 開頭。如果是,則您使用的是最新版本的代碼。如果代碼以 <div data-emebd_type=... 或其他類型的 <div> 標簽開頭,則您使用的是舊版代碼。
刪除 Buy Button 、嵌入式產品系列或嵌入式購物車
步驟:
打開包含 Buy Button 、嵌入式產品系列或嵌入式購物車的網頁的源 HTML。 從源 HTML 中刪除整個嵌入代碼,從 <script data-shopify-buy-ui> 開始到 </script> 結束。對于 Buy Button,嵌入代碼看起來與以下代碼類似: <scriptdata-shopify-buy-ui>varscriptURL="https://cndurl.com/buy-button-storefront.js";if(window.ShopifyBuy&&window.ShopifyBuy.UI){ShopifyBuyInit();}else{varscript=document.createElement('script');script.async=true;script.src=scriptURL;(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(script);script.onload=ShopifyBuyInit;}functionShopifyBuyInit(){varclient=ShopifyBuy.buildClient({apiKey:'your-api-key',domain:'your-store.myshopify.com',appId:'6'});ShopifyBuy.UI.onReady(client).then(function(ui){ui.createComponent('product',{id:12345,options:{product:{buttonDestination:'cart',contents:{description:true},text:{button:'Add to Cart'},styles:{button:{'background-color':'blue'}}},cart:{styles:{button:{'background-color':'orange'}}}}});});}</script> 保存更改。
Buy Button 、嵌入式產品系列或嵌入式購物車將不再顯示在您的網頁上。
若要更改現有 Buy Button 的外觀或設置,您需要編輯已添加到源 HTML 中的嵌入代碼。
每個 Buy Button 都是由嵌入代碼中的單獨組件構建而成。例如,如果您將一件產品和購物車添加到自己的網頁,則嵌入代碼將生成一個 product 組件、一個 cart 組件以及一個購物車 toggle 組件:
如果您希望您的產品組件會打開包含產品詳細信息的模態窗口,嵌入代碼將生成一個 modal 組件和一個 modalProduct 組件:
在以下代碼片段中,product 和 cart 具有單獨的組件:
ShopifyBuy.UI.onReady(client).then(function(ui){ui.createComponent('product',{id:12345,options:{product:{buttonDestination:'cart',contents:{description:true},text:{button:'Add to Cart'},styles:{button:{'background-color':'blue'}}},cart:{styles:{button:{'background-color':'orange'}}}}});});這些組件是通過嵌入代碼中的配置對象單獨配置的。您可以通過編輯嵌入代碼中的配置對象來更改您的 Buy Button 的外觀或行為。
在 JavaScript 中,一個對象是一組鍵值對,格式為 {key: value}。您可以將其看作一個電子表格:鍵類似于列名稱,值類似于單元格中的內容。
每個組件都有許多可以編輯的屬性。有關可編輯選項的完整列表,請查看我們的開發人員文檔。如果要配置一個尚未出現在嵌入代碼中的選項,則需要將相應的鍵添加到相應的對象中(請參閱示例)。
編輯組件的樣式每個組件都有一個嵌套的 styles 配置對象,您可以編輯或添加此對象以更改組件的外觀。這些樣式的格式設置與 CSS 類似。styles 對象中的每個頂級鍵都代表一個組件中的元素,例如標題或按鈕。在此對象中,每個鍵都是一個 CSS 屬性(例如“background-color”或“border”),值為一個 CSS 值。
options:{product:{styles:{button:{'background-color':'red','border-radius':'5px'}}}}可以將任何有效的 CSS 屬性添加到 styles。請注意,帶有破折號的屬性名稱必須在引號內。
有關 CSS 自定義的詳細信息,請查看開發人員文檔。
在此示例中,您可以更改您當前的嵌入代碼將客戶引導至產品詳細信息模態,而不是購物車:
打開包含要更改的嵌入產品的頁面的 HTML。 找到 product 配置對象。 查找對象中的 buttonDestination 鍵: options:{product:{buttonDestination:'cart'}} 將該鍵的值更改為 'modal'(確保包含引號): options:{product:{buttonDestination:'modal'}} 保存更改。 示例:更改產品嵌入的布局在此示例中,您可以更改產品嵌入的布局,讓圖片顯示在一側,而不是頂部:
打開包含要更改的嵌入產品的頁面的 HTML。 找到 product 配置對象。 添加 layout 鍵,然后將值設置為 'horizontal': options:{product:{buttonDestination:'modal',layout:'horizontal'}}<aside class="note"> <h4>備注</h4> <p>When you add the <code>'horizontal'</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p> </aside> 保存更改。
編輯您網站的購物車
如果您想更改網站購物車的外觀或行為,則需要編輯嵌入代碼中的 cart 配置對象。
步驟:
打開包含要編輯的購物車的頁面的 HTML。 在您的嵌入代碼中找到 cart 配置對象: options:{cart:{startOpen:false}} 編輯或添加您想更改的屬性。有關可配置屬性的完整列表,請查看開發人員文檔。 保存更改。
編輯嵌入式產品系列
編輯嵌入式產品系列與編輯產品或購物車類似。若要編輯產品系列中的產品的屬性(例如,每個產品的布局),您需要找到 product 配置對象,然后按照編輯產品嵌入的方式編輯此對象。若要編輯產品系列本身的屬性(例如下一頁按鈕的文本),則改為編輯 productSet 鍵。
部分屬性(例如組件的文本)是通過嵌套對象配置的,這些對象是位于其他對象內部的對象。例如,下一頁按鈕的文本位于 productSet 組件的 text 對象內部:
options:{productSet:{text:{nextPageButton:'Continue'}}}