編輯或刪除購買按鈕或內嵌購物車

您從 Shopify 管理員複製程式碼片段並貼到網頁來源 HTML 後，隨即會產生購買按鈕和購物車。這些程式碼片段即稱為內嵌程式碼。如果您想變更按鈕或購物車的外觀或行為，則必須編輯相關的內嵌程式碼。

此頁面上

刪除購買按鈕、內嵌商品系列或內嵌購物車

步驟如下：

開啟含有購買按鈕、內嵌商品系列或內嵌購物車的網頁來源 HTML。
從來源 HTML 將開頭為 <script data-shopify-buy-ui> 且結尾為 </script> 的整段內嵌程式碼刪除。就購買按鈕而言，內嵌程式碼看起來如下：

<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = 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>

儲存變更。

您的網頁不會再顯示購買按鈕、內嵌商品系列或內嵌購物車。

編輯購買按鈕

若要變更現有購買按鈕的外觀或設定，您必須編輯要新增到來源 HTML 的嵌入程式碼。

每個購買按鈕都是從內嵌程式碼建置的個別「元件」。例如，如果您在網頁上新增有購物車的產品，則內嵌程式碼會產生一個 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'
          }
        }
      }
    }
  });
});

這些元件會透過內嵌程式碼中的設定「物件」個別進行設定。若要變更購買按鈕的外觀或行為，您可以編輯內嵌程式碼中的設定物件。

每個元件都有多種屬性可供編輯。如需可編輯選項的完整清單，請檢視我們的開發人員說明文件。如果嵌入程式碼內沒有您想設定的選項，您可將適當的「索引鍵」新增到適當的物件 (請參閱範例)。

編輯元件樣式

每個元件都有巢狀的 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>&#39;horizontal&#39;</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'
    }
  }
}