我可以在产品页面上“隐藏”这些变量框行吗？使用Shopify Lite购买按钮

问题描述

我将一个垂直的全角按钮嵌入到我的Squarespace产品页面上。我只想显示图像，并且已经对我不需要的东西使用“ display”：“ none”成功隐藏了所有其他组件（例如，产品标题，价格，说明）。

但是。我想不出如何确定仍在图像下方徘徊的线条的目标。我认为它们可能与产品变型盒有关？我没有Shopify店面，因此无法选择在后端插入自定义CSS。

line underneath product image

如果有人知道如何隐藏它们，甚至将它们变成白色，我将非常感激。

网站是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,"padding-top": "0px","padding-bottom": "0px",":hover": {
                    "background-color": "#ffffff"
                  },"background-color": "#ffffff",":focus": {
                    "background-color": "#ffffff"
                  },"border-radius": "0px","quantityInput": {
                  "font-size": "0px","price": {
                  "font-family": "Gill Sans,"color": "#ffffff","compareAt": {
                  "font-family": "Source Sans Pro,"unitPrice": {
                  "font-family": "Source Sans Pro,"description": {
                  "font-family": "Source Sans Pro,"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,"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,"border-radius": "0px"
                },"padding-bottom": "0px"
                }
              },"text": {
                "button": "Add to cart"
              }
            },"option": {
              "styles": {
                "label": {
                  "display": "none"
                },"select": {
                  "display": "none"
                }
              }
            },"cart": {
              "styles": {
                "button": {
                  "font-family": "Gill Sans,"border-radius": "0px"
                }
              },"text": {
                "total": "Subtotal","button": "Checkout"
              },"popup": false
            },"toggle": {
              "styles": {
                "toggle": {
                  "font-family": "Gill Sans,":focus": {
                    "background-color": "#ffffff"
                  }
                },"count": {
                  "font-size": "0px"
                }
              }
            }
          },});
      });
    }
  })();
  /*]]>*/
</script>

解决方法

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

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

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