[Shopify开店教程]编辑或删除购买按钮或嵌入式购物车

SHOPIFY帮助指南
编辑或删除购买按钮或嵌入式购物车

警告

这是一个高级教程,Shopify不支持。需要了解HTML,CSS,Javascript和Liquid等网页设计语言。如果您不方便继续学习以下教程,我们建议您聘请Shopify专家。

购买按钮和购物车是您从Shopify管理员处复制的代码段生成的,并粘贴到您网页的源HTML中。这些代码片段称为嵌入代码。如果要更改按钮或购物车的外观或行为,则需要编辑关联的嵌入代码。

注意

这些说明适用于您在2016年9月26日之后生成的“购买按钮”嵌入代码。如果您要更改在此日期之前生成的嵌入代码,则需要遵循旧版说明。您还可以使用“购买按钮”销售渠道重新创建嵌入代码。

如果您不确定您拥有哪个版本的嵌入代码,请检查它是否以<script data-shopify-buy-ui>开头。如果是,那么你有最新版本。如果它以<div data-emebd_type = …或其他类型的<div>标记开头,那么您将拥有旧版本。


相关主题
  • 删除购买按钮,嵌入式分类或嵌入式购物车
  • 编辑购买按钮
  • 编辑您网站的购物车
  • 编辑嵌入式分类

删除购买按钮,嵌入式分类或嵌入式购物车

要删除现有的购买按钮,分类或嵌入式购物车, 请执行以下操作:

  1. 打开包含“购买”按钮,嵌入式分类或嵌入式购物车的网页的源HTML。<script datashopifybuyui>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>

  2. 从源HTML中删除整个嵌入代码,从<script data-shopify-buy-ui>开始,以</ script>结尾。 对于购买按钮,嵌入代码类似于以下代码:
  3. 保存更改。

购买按钮,嵌入式分类或嵌入式购物车将不再显示在您的网页上。


编辑购买按钮

要更改现有“购买”按钮的外观或设置,您需要编辑已添加到源HTML的嵌入代码。

每个购买按钮都是由嵌入代码中的单独组件构建的。 例如,如果您将带有购物车的产品添加到网页,则嵌入代码将生成产品组件,购物车组件和购物车切换组件:

如果您希望产品组件打开包含产品详细信息的模态窗口,则嵌入代码将生成模态组件和modalProduct组件:

在以下代码段中,产品和购物车有单独的组件:

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’

}

}

}

}

});});

这些组件通过嵌入代码中的配置对象单独配置。您可以通过编辑嵌入代码中的配置对象来更改“购买按钮”的外观或行为。

提醒

在JavaScript中,对象是一组键值对,格式为{key:value}。你可以把它想象成一个电子表格:一个键就像一个列名,一个值就像一个单元格的内容。

每个组件都有许多可以编辑的属性。有关可编辑选项的完整列表,请查看我们的开发人员文档。如果要配置一个尚未出现在嵌入代码中的选项,则需要将相应的键添加到相应的对象中。

编辑组件的样式

每个组件都有一个嵌套样式配置对象,您可以编辑或添加该对象以更改组件的外观。这些样式的格式与CSS类似。 styles对象中的每个顶级键表示组件中的元素,例如标题或按钮。在此对象中,每个键都是CSS属性(例如,“background-color”或“border”),值是CSS值。

options: {

product: {

styles: {

button: {

‘background-color’: ‘red’,

‘border-radius’: ‘5px’

}

}

}}

任何有效的CSS属性都可以添加到样式中。 请注意,带有破折号的属性名称必须在引号内。

有关CSS自定义的更多信息,请查看开发人员文档。

示例:使用产品详细信息模式替换链接到购物车

在此示例中,您可以更改当前的嵌入代码,将客户引导至产品详细信息模式而非购物车:

  1. 打开包含要更改的产品嵌入的页面的HTML。
  2. 找到产品配置对象。
  3. 在对象中找到buttonDestination键:options: {product: {

    buttonDestination: ‘cart’

    }}

  4. 将该键的值更改为“modal”(确保包含引号):options: {product: {

    buttonDestination: ‘modal’

    }}

  5. 保存更改。
示例:更改产品嵌入的布局

在此示例中,您可以更改嵌入的产品的布局,使图片显示在侧面而不是顶部:

  1. 打开包含要更改的产品嵌入的页面的HTML。
  2. 找到产品配置对象。
  3. 添加布局键,然后将值设置为“水平”:options: {product: {

    buttonDestination: ‘modal’,

    layout: ‘horizontal’

    }}

    注意:添加“水平”值时,请确保它包含引号,并且前一行以逗号结尾。

  4. 保存更改。

编辑您网站的购物车

如果要更改网站购物车的外观或行为,则需要在嵌入代码中编辑购物车配置对象。

要编辑您网站的购物车, 请执行以下操作:

  1. 打开包含要编辑的购物车的页面的HTML。
  2. 在嵌入代码中找到购物车配置对象:options: {cart: {

    startOpenfalse

    }}

  3. 编辑或添加您要更改的属性。 有关可配置属性的完整列表,请查看开发人员文档。
  4. 保存更改。

编辑嵌入式分类

编辑嵌入式分类与编辑产品或购物车类似。 要编辑分类中产品的属性(例如,每个产品的布局),您需要找到产品配置对象并按照编辑产品嵌入的相同方式进行编辑。 要编辑分类本身的属性(例如,“下一页”按钮的文本),请编辑productSet键。

某些属性(例如组件的文本)是通过嵌套对象配置的,嵌套对象是出现在其他对象中的对象。 例如,“下一页”按钮的文本显示在productSet组件的文本对象中:

options: {

productSet: {

text: {

nextPageButton: ‘Continue’

}

}}

发表评论

关闭菜单