Shopify themes, liquid, logos, and UX
How do I remove the white space above the button (it's highlighted blue so you can see that it's part of the button)? I've played around a ton with the code I was told to copy/paste, but nothing touched the space. I've also attached the given code.
Thanks!
<div id='product-component-xxxxxxxxx'></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: 'beanie-ball.myshopify.com',
storefrontAccessToken: 'd1c1862d85820924ad5fe5b5aa851010',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '5502646976680',
node: document.getElementById('product-component-1595910746097'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"button": {
"font-family": "Raleway, sans-serif",
"font-size": "13px",
"padding-top": "10px",
"padding-bottom": "10px",
":hover": {
"background-color": "#cf2f1f"
},
"background-color": "#e63422",
":focus": {
"background-color": "#cf2f1f"
},
"border-radius": "18px",
"padding-left": "40px",
"padding-right": "40px"
},
"quantityInput": {
"font-size": "13px",
"padding-top": "14.5px",
"padding-bottom": "14.5px"
}
},
"buttonDestination": "checkout",
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"button": "Buy now!"
},
"googleFonts": [
"Raleway"
]
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"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": "Raleway, sans-serif",
"font-size": "13px",
"padding-top": "14.5px",
"padding-bottom": "14.5px",
":hover": {
"background-color": "#cf2f1f"
},
"background-color": "#e63422",
":focus": {
"background-color": "#cf2f1f"
},
"border-radius": "18px",
"padding-left": "63px",
"padding-right": "63px"
},
"quantityInput": {
"font-size": "13px",
"padding-top": "14.5px",
"padding-bottom": "14.5px"
}
},
"googleFonts": [
"Raleway"
],
"text": {
"button": "Add to cart"
}
},
"cart": {
"styles": {
"button": {
"font-family": "Raleway, sans-serif",
"font-size": "13px",
"padding-top": "14.5px",
"padding-bottom": "14.5px",
":hover": {
"background-color": "#cf2f1f"
},
"background-color": "#e63422",
":focus": {
"background-color": "#cf2f1f"
},
"border-radius": "18px"
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
},
"googleFonts": [
"Raleway"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Raleway, sans-serif",
"background-color": "#e63422",
":hover": {
"background-color": "#cf2f1f"
},
":focus": {
"background-color": "#cf2f1f"
}
},
"count": {
"font-size": "13px"
}
},
"googleFonts": [
"Raleway"
]
}
},
});
});
}
})();
/*]]>*/
</script>
Hey @beanieball,
Did you try to remove or reduce padding-top from the following code?
Yes @ dmwwebartisan
I tried to make that value 0 and it just did this:
The size of the white space is exactly the same.
Hey @beanieball,
Is it possible for you to share the URL? so I can check properly.
Thanks!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024