Buy Button customisation question - Shopify Lite/embedded

Highlighted
Tourist
9 0 1

I'm embedding a vertical, full-width button onto my Squarespace product page. I only want to show the images and have been successfully hiding all other components (e.g. product title, price, description) using "display": "none" for the stuff I don't want.

HOWEVER. I can't work out how to target the lines that are still lingering underneath the images. I think they may be something to do with the product variants box? I don't have a Shopify store front so I don't have the option to insert custom CSS in the backend.

Screenshot 2020-08-11 at 12.33.20.pngScreenshot 2020-08-11 at 10.55.15.png

 

If anyone knows how to hide these, or even turn them white, I'd be hugely appreciative. 

Website is Squarespace - example product page: https://wearenativ.squarespace.com/woman (Buy button is embedded in a code block)

Code I'm using is:

<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>

0 Likes
Highlighted
New Member
4 0 0

Hi,

I have a question regarding your experience using shopify lite. where does it take your customers to checkout? is checkout on shopify or squarespace? trying to mitigate the issue of how squarespace can't autogenerate tax rates at checkout and hoping to resolve with integration of shopify lite. at checkout, are your customers able to see tax rates generated by shopify?

0 Likes
Highlighted
Tourist
9 0 1
Hi there,

I’m sorry not to be of more help but we’re still finding our way with Shopify - but we chose to embed into Squarespace for similar reasons as Squarespace really has a long way to go before it can compete with the e-commerce side of things…

We’re still yet to launch!

0 Likes
Tourist
9 0 1

Sorry, I didn't actually read your question properly...!

Customers are taken to Shopify at checkout, so all transactions and taxes are on the Shopify side of things.

We're not even using the shop facility on Squarespace anymore. 

0 Likes
Highlighted
New Member
2 0 0

I have a general question about Shopify Lite. Can you set it up so a purchase confirmation letter automatically gets sent to the custormer's e-mail after the purchase?

0 Likes
Highlighted
Tourist
9 0 1
To my knowledge, no.

With Shopify Lite you can literally allow customers to make purchases. You can apply discounts but otherwise it’s pretty basic.
0 Likes