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

Question

客户要求我在“添加到购物车”按钮上制作悬停效果，但仅限于单个产品，我已经通过 css 设法做到了，但现在他告诉我他希望在他的自定义中实施该解决方案面板，以便他可以自己更改该产品的颜色。

如有任何帮助，我们将不胜感激，因为我什至不知道从哪里开始，也不知道它应该是什么样子。

首先我想知道这是否可能？

Answer 1

您要查找的是有关 "Theme Settings" 的信息。 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: 在自定义面板中生成选项，在配置文件中添加以下内容"settings_schema.json":

  {
    "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 自定义面板？

Add custom solution to shopify customize panel?

shopify