這屬于高級(jí)教程，Shopify 不提供相關(guān)支持。使用者需要具備 Web 設(shè)計(jì)語言（例如 HTML、CSS、JavaScript 和 Liquid）的知識(shí)。如果您需要幫助，那么您可以雇用 Shopify 合作伙伴。
Buy Button 和購物車是通過您從 Shopify 后臺(tái)復(fù)制并粘貼到您的網(wǎng)頁的源 HTML 的代碼片段生成的。這些代碼片段稱為嵌入代碼。如果您想更改按鈕或購物車的外觀或行為，則需要編輯相關(guān)聯(lián)的嵌入代碼。
這些說明適用于您在 2016 年 9 月 26 日之后生成的 Buy Button 嵌入代碼。如果您想更改在此日期之前生成的嵌入代碼，則需要按照舊版說明進(jìn)行操作。您還可以使用 Buy Button 銷售渠道重新創(chuàng)建嵌入代碼。
如果您不確定自己的嵌入代碼版本，請(qǐng)查看代碼是否以 <script data-shopify-buy-ui> 開頭。如果是，則您使用的是最新版本的代碼。如果代碼以 <div data-emebd_type=... 或其他類型的 <div> 標(biāo)簽開頭，則您使用的是舊版代碼。
刪除 Buy Button 、嵌入式產(chǎn)品系列或嵌入式購物車
步驟：
打開包含 Buy Button 、嵌入式產(chǎn)品系列或嵌入式購物車的網(wǎng)頁的源 HTML。 從源 HTML 中刪除整個(gè)嵌入代碼，從 <script data-shopify-buy-ui> 開始到 </script> 結(jié)束。對(duì)于 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 、嵌入式產(chǎn)品系列或嵌入式購物車將不再顯示在您的網(wǎng)頁上。
若要更改現(xiàn)有 Buy Button 的外觀或設(shè)置，您需要編輯已添加到源 HTML 中的嵌入代碼。
每個(gè) Buy Button 都是由嵌入代碼中的單獨(dú)組件構(gòu)建而成。例如，如果您將一件產(chǎn)品和購物車添加到自己的網(wǎng)頁，則嵌入代碼將生成一個(gè) product 組件、一個(gè) cart 組件以及一個(gè)購物車 toggle 組件：
如果您希望您的產(chǎn)品組件會(huì)打開包含產(chǎn)品詳細(xì)信息的模態(tài)窗口，嵌入代碼將生成一個(gè) modal 組件和一個(gè) modalProduct 組件：
在以下代碼片段中，product 和 cart 具有單獨(dú)的組件：
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'}}}}});});這些組件是通過嵌入代碼中的配置對(duì)象單獨(dú)配置的。您可以通過編輯嵌入代碼中的配置對(duì)象來更改您的 Buy Button 的外觀或行為。
在 JavaScript 中，一個(gè)對(duì)象是一組鍵值對(duì)，格式為 {key: value}。您可以將其看作一個(gè)電子表格：鍵類似于列名稱，值類似于單元格中的內(nèi)容。
每個(gè)組件都有許多可以編輯的屬性。有關(guān)可編輯選項(xiàng)的完整列表，請(qǐng)查看我們的開發(fā)人員文檔。如果要配置一個(gè)尚未出現(xiàn)在嵌入代碼中的選項(xiàng)，則需要將相應(yīng)的鍵添加到相應(yīng)的對(duì)象中（請(qǐng)參閱示例）。
編輯組件的樣式每個(gè)組件都有一個(gè)嵌套的 styles 配置對(duì)象，您可以編輯或添加此對(duì)象以更改組件的外觀。這些樣式的格式設(shè)置與 CSS 類似。styles 對(duì)象中的每個(gè)頂級(jí)鍵都代表一個(gè)組件中的元素，例如標(biāo)題或按鈕。在此對(duì)象中，每個(gè)鍵都是一個(gè) CSS 屬性（例如“background-color”或“border”），值為一個(gè) CSS 值。
options:{product:{styles:{button:{'background-color':'red','border-radius':'5px'}}}}可以將任何有效的 CSS 屬性添加到 styles。請(qǐng)注意，帶有破折號(hào)的屬性名稱必須在引號(hào)內(nèi)。
有關(guān) CSS 自定義的詳細(xì)信息，請(qǐng)查看開發(fā)人員文檔。
在此示例中，您可以更改您當(dāng)前的嵌入代碼將客戶引導(dǎo)至產(chǎn)品詳細(xì)信息模態(tài)，而不是購物車：
打開包含要更改的嵌入產(chǎn)品的頁面的 HTML。 找到 product 配置對(duì)象。 查找對(duì)象中的 buttonDestination 鍵： options:{product:{buttonDestination:'cart'}} 將該鍵的值更改為 'modal'（確保包含引號(hào)）： options:{product:{buttonDestination:'modal'}} 保存更改。 示例：更改產(chǎn)品嵌入的布局在此示例中，您可以更改產(chǎn)品嵌入的布局，讓圖片顯示在一側(cè)，而不是頂部：
打開包含要更改的嵌入產(chǎn)品的頁面的 HTML。 找到 product 配置對(duì)象。 添加 layout 鍵，然后將值設(shè)置為 '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> 保存更改。
編輯您網(wǎng)站的購物車
如果您想更改網(wǎng)站購物車的外觀或行為，則需要編輯嵌入代碼中的 cart 配置對(duì)象。
步驟：
打開包含要編輯的購物車的頁面的 HTML。 在您的嵌入代碼中找到 cart 配置對(duì)象： options:{cart:{startOpen:false}} 編輯或添加您想更改的屬性。有關(guān)可配置屬性的完整列表，請(qǐng)查看開發(fā)人員文檔。 保存更改。
編輯嵌入式產(chǎn)品系列
編輯嵌入式產(chǎn)品系列與編輯產(chǎn)品或購物車類似。若要編輯產(chǎn)品系列中的產(chǎn)品的屬性（例如，每個(gè)產(chǎn)品的布局），您需要找到 product 配置對(duì)象，然后按照編輯產(chǎn)品嵌入的方式編輯此對(duì)象。若要編輯產(chǎn)品系列本身的屬性（例如下一頁按鈕的文本），則改為編輯 productSet 鍵。
部分屬性（例如組件的文本）是通過嵌套對(duì)象配置的，這些對(duì)象是位于其他對(duì)象內(nèi)部的對(duì)象。例如，下一頁按鈕的文本位于 productSet 組件的 text 對(duì)象內(nèi)部：
options:{productSet:{text:{nextPageButton:'Continue'}}}
