【发布时间】：2020-12-01 02:59:04
【问题描述】：
我在我的 Squarespace 产品页面上嵌入了一个垂直的全角按钮。我只想显示图像并且已经成功地隐藏了所有其他组件（例如产品标题、价格、描述），使用 "display": "none" 来隐藏我不想要的东西。
但是。我不知道如何定位仍然在图像下方徘徊的线条。我认为它们可能与产品变体框有关？我没有 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>【问题讨论】：