这属于高级教程,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'}}}