时间戳

首页 > 解决方案 > 我可以在我的产品页面上“隐藏”这些变体框线吗？使用 Shopify Lite 购买按钮

html - 我可以在我的产品页面上“隐藏”这些变体框线吗？使用 Shopify Lite 购买按钮

问题描述

我在我的 Squarespace 产品页面上嵌入了一个垂直的全角按钮。我只想显示图像，并且已经成功地隐藏了所有其他组件（例如产品标题、价格、描述），使用“显示”：“无”用于我不想要的东西。

然而。我不知道如何定位仍然在图像下方徘徊的线条。我认为它们可能与产品变体框有关？我没有 Shopify 店面，所以我没有在后端插入自定义 CSS 的选项。

产品图片下方的线条

如果有人知道如何隐藏这些，甚至将它们变成白色，我将不胜感激。

网站是 Squarespace - 示例产品页面：https ://wearenativ.squarespace.com/woman （购买按钮嵌入在代码块中）

我正在使用的代码是：

<div id='product-component-1596624541383'></div>
<script type="text/javascript">
  /*<![CDATA[*/
  (function() {
    var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
    if (window.ShopifyBuy) {
      if (window.ShopifyBuy.UI) {
        ShopifyBuyInit();
      } else {
        loadScript();
      }
    } else {
      loadScript();
    }

    function loadScript() {
      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({
        domain: 'wearenativ.myshopify.com',
        storefrontAccessToken: '5dd1d6831a0c331ffc7755f9dbc8e6b4',
      });
      ShopifyBuy.UI.onReady(client).then(function(ui) {
        ui.createComponent('product', {
          id: '5496686280862',
          node: document.getElementById('product-component-1596624541383'),
          moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
          options: {
            "product": {
              "styles": {
                "product": {
                  "@media (min-width: 601px)": {
                    "max-width": "100%",
                    "margin-left": "0",
                    "margin-bottom": "0px"
                  },
                  "text-align": "center",
                },
                "title": {
                  "font-family": "Gill Sans, sans-serif",
                  "font-weight": "normal",
                  "font-size": "0px",
                  "display": "none"
                },
                "button": {
                  "font-family": "Gill Sans, sans-serif",
                  "font-size": "0px",
                  "padding-top": "0px",
                  "padding-bottom": "0px",
                  ":hover": {
                    "background-color": "#ffffff"
                  },
                  "background-color": "#ffffff",
                  ":focus": {
                    "background-color": "#ffffff"
                  },
                  "border-radius": "0px",
                  "display": "none"
                },
                "quantityInput": {
                  "font-size": "0px",
                  "padding-top": "0px",
                  "padding-bottom": "0px",
                  "display": "none"
                },
                "price": {
                  "font-family": "Gill Sans, sans-serif",
                  "font-size": "0px",
                  "color": "#ffffff",
                  "display": "none"
                },
                "compareAt": {
                  "font-family": "Source Sans Pro, sans-serif",
                  "font-size": "0px",
                  "color": "#ffffff",
                  "display": "none"
                },
                "unitPrice": {
                  "font-family": "Source Sans Pro, sans-serif",
                  "font-size": "0px",
                  "color": "#ffffff",
                  "display": "none"
                },
                "description": {
                  "font-family": "Source Sans Pro, sans-serif",
                  "font-size": "0px",
                  "color": "#ffffff",
                  "display": "none"
                }
              },
              "layout": "vertical",
              "contents": {
                "img": false,
                "imgWithCarousel": true,
                "description": false,
              },
              "width": "100%",
              "text": {
                "button": "Add to cart",
                "display": "none"
              }
            },
            "productSet": {
              "styles": {
                "products": {
                  "@media (min-width: 601px)": {
                    "margin-left": "-20px",
                    "display": "none"
                  }
                }
              }
            },
            "modalProduct": {
              "contents": {
                "img": false,
                "imgWithCarousel": true,
                "button": false,
                "buttonWithQuantity": false
              },
              "styles": {
                "product": {
                  "@media (min-width: 601px)": {
                    "max-width": "100%",
                    "margin-left": "0px",
                    "margin-bottom": "0px",
                    "display": "none"
                  }
                },
                "button": {
                  "display": "none",
                  "font-family": "Source Sans Pro, sans-serif",
                  "font-size": "0px",
                  "padding-top": "0px",
                  "padding-bottom": "0px",
                  ":hover": {
                    "background-color": "#ffffff"
                  },
                  "background-color": "#ffffff",
                  ":focus": {
                    "background-color": "#ffffff"
                  },
                  "border-radius": "0px"
                },
                "quantityInput": {
                  "font-size": "0px",
                  "padding-top": "0px",
                  "padding-bottom": "0px"
                }
              },
              "text": {
                "button": "Add to cart"
              }
            },
            "option": {
              "styles": {
                "label": {
                  "display": "none"
                },
                "select": {
                  "display": "none"
                }
              }
            },
            "cart": {
              "styles": {
                "button": {
                  "font-family": "Gill Sans, sans-serif",
                  "font-size": "0px",
                  "padding-top": "0px",
                  "padding-bottom": "0px",
                  ":hover": {
                    "background-color": "#ffffff"
                  },
                  "background-color": "#ffffff",
                  ":focus": {
                    "background-color": "#ffffff"
                  },
                  "border-radius": "0px"
                }
              },
              "text": {
                "total": "Subtotal",
                "button": "Checkout"
              },
              "popup": false
            },
            "toggle": {
              "styles": {
                "toggle": {
                  "font-family": "Gill Sans, sans-serif",
                  "background-color": "#ffffff",
                  ":hover": {
                    "background-color": "#ffffff"
                  },
                  ":focus": {
                    "background-color": "#ffffff"
                  }
                },
                "count": {
                  "font-size": "0px"
                }
              }
            }
          },
        });
      });
    }
  })();
  /*]]>*/
</script>

标签： htmlcssbuttonshopify

解决方案

"title"尝试在对象之后添加其中之一

"variant-selectors": {
  "display": "none"
},

"variantSelectors": {
  "display": "none"
},

推荐阅读