Please help! How to hide variant options on buy button (Shopify Lite)

Highlighted
Tourist
8 0 1

I'm trying to hide everything but the images for my (full width) Shopify buy button and embedding it onto my Squarespace site.

I'm almost there, I've managed to hide the variant dropdown menu boxes, but the two lines are still showing up underneath the image (I've attached an image). This is driving me crazy! If anyone could tell me how to hide those lines I'd be hugely grateful.

Code currently looks like this:

 

<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": "75%",
"margin-left": "0",
"margin-bottom": "0px",
"display": "none"
},
"text-align": "center",
},
"title": {
"font-family": "Gill Sans, sans-serif",
"font-weight": "normal",
"font-size": "30px",
"display": "none"
},
"button": {
"font-family": "Gill Sans, sans-serif",
"font-size": "17px",
"padding-top": "16.5px",
"padding-bottom": "16.5px",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
},
"border-radius": "0px",
"display": "none"
},
"quantityInput": {
"font-size": "17px",
"padding-top": "16.5px",
"padding-bottom": "16.5px",
"display": "none"
},
"price": {
"font-family": "Gill Sans, sans-serif",
"font-size": "24px",
"color": "#706b6b",
"display": "none"
},
"compareAt": {
"font-family": "Source Sans Pro, sans-serif",
"font-size": "20.4px",
"color": "#706b6b",
"display": "none"
},
"unitPrice": {
"font-family": "Source Sans Pro, sans-serif",
"font-size": "20.4px",
"color": "#706b6b",
"display": "none"
},
"description": {
"font-family": "Source Sans Pro, sans-serif",
"font-size": "17px",
"color": "#000000",
"display": "none"
}
},
"layout": "vertical",
"contents": {
"img": false,
"imgWithCarousel": true,
"description": true,
},
"width": "100%",
"text": {
"button": "Add to cart"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px",
"display": "none"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-family": "Source Sans Pro, sans-serif",
"font-size": "17px",
"padding-top": "16.5px",
"padding-bottom": "16.5px",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
},
"border-radius": "0px"
},
"quantityInput": {
"font-size": "17px",
"padding-top": "16.5px",
"padding-bottom": "16.5px"
}
},
"text": {
"button": "Add to cart"
}
},
"option": {
"styles": {
"label": {
"font-family": "Source Sans Pro, sans-serif"
},
"select": {
"font-family": "Source Sans Pro, sans-serif",
"display": "none",
}
}
},
"cart": {
"styles": {
"button": {
"font-family": "Gill Sans, sans-serif",
"font-size": "17px",
"padding-top": "16.5px",
"padding-bottom": "16.5px",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
},
"border-radius": "0px"
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
},
"popup": false
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Gill Sans, sans-serif",
"background-color": "#000000",
":hover": {
"background-color": "#000000"
},
":focus": {
"background-color": "#000000"
}
},
"count": {
"font-size": "17px"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>

 

Screenshot 2020-08-09 at 21.26.01.png

0 Likes
Highlighted
Astronaut
1085 177 213

Hello,

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one) so we can help you.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Tourist
8 0 1

Hi Diego -

Just to clarify - I'm embedding the Buy Buttons into Squarespace, I don't have a Shopify store front.

The issue is on all my product pages but I'll show you one as an example:

Store URL - http://wearenativ.myshopify.com 

Product Page URL - https://wearenativ.squarespace.com/woman

Thanks!

0 Likes