Question

客户要求我对添加到购物车按钮进行悬停效果，但仅针对单个产品，我已经设法通过css实现了这一点，但现在他告诉我他希望在他的自定义面板中实现该解决方案，以便他可以更改该产品本身的颜色。

任何帮助都会在这里受到赞赏，因为我甚至不知道从哪里开始，或者看起来应该如何看待。

首先，我想知道天气是否可行？

Answer 1

您要找的是有关“主题设置”的信息。 Shopify有时会将其称为Storefront Editor

教程在这里：http://www.tetchi.ca/shopify-theme-from-scratch-part-14/

在我们获得更多帮助之前，您将需要了解其中的一些并尝试一些事情

Answer 2

根据您的教程链接找到了如何添加此解决方案的解决方案，现在我看到它看起来很简单......但是如果有人遇到类似的问题。

我通过以下3个步骤实现了这一目标：

1：首先在产生每个产品页面的文件中，根据产品页面为每个按钮添加唯一ID：

id="atc_single_product-{{ product.id }}"

2：对于自定义面板中的生成选项，在配置文件＆＃34; settings_schema.json＆＃34;中添加了以下内容：

  {
    "type": "color",
    "id": "atc_single_product-7214350529",
    "label": "Montreal #9",
    "default": "#333333"
  },

添加了一些用于悬停效果的基本HTML，它将调用操作并将步骤1和2结合起来并一度悬停：

#atc_single_product-7214350529:hover, input#atc_single_product-7214350529[type="submit"]:hover, input#atc_single_product-7214350529[type="button"]:hover 
    {
      background: {{ settings.atc_single_product-7214350529 }};
      border-color: {{ settings.atc_single_product-7214350529 }};
      outline: none;
    }

最终结果：http://i.stack.imgur.com/M2RiG.png

也许它看起来不漂亮，但嘿它有效。谢谢！

添加自定义解决方案以shopify自定义面板？

2 个答案: