Buy button - button layout seems cut off on website

Highlighted
Tourist
8 0 3

 

Hi, I have a question about the layout of my embedded buy button. I've selected to show a basic layout, with the option to expand to see product details. However, when embedding the code into my website, it looks like the layout is cut off at the bottom. This isn't visible until someone actually clicked the button to expand to product details, and then closes again - it then stays like this until the visitor clicks somewhere else. I've included a picture at the bottom. I've also tried to add margin in the code, as follows, but it doesn't work:

 

Screenshot 2020-05-28 at 18.15.09.png

 

See picture below for example.  I would like to know if there is any way to pad the bottom so that the line runs around the button without being cut off. Thanks.

 

Screenshot 2020-05-28 at 18.15.35.png

1 Like
Highlighted
Shopify Partner
4468 670 1396

@marlyvdg 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
8 0 3

@KetanKumar hi, thank you, this is the direct link for the test page: https://www.mojokite.com/shop/indextest2.php

To see the "error", you have to click on the button "View product" and then close the pop-up screen...

Thanks,

0 Likes
Highlighted
Shopify Partner
4468 670 1396

@marlyvdg 

it' iframe code generate can you please check iframe code option 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
8 0 3

Hi @KetanKumar , thank you for your reply,

sorry, I'm not sure what you mean? I've copy pasted the full iframe code generated by the Shopify buy button... 

0 Likes
Highlighted
Shopify Partner
4468 670 1396

@marlyvdg 

can you please share details on personal message so i will take this

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
4 0 1

I am having a similar issue - did this problem get fixed please?

1 Like
Highlighted
Shopify Partner
4468 670 1396

@blazingrebel 

Thanks for post 

can you please share your code here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
4 0 1

Yes, I have just spoken to someone through Shopify online chat and they think it's a problem with my website host, Showit.  It looks fine in the builder but when you see it on the screen it is cut off

this is the code:

 

<div id='product-component-1592423580703'></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: 'blazingrebel.myshopify.com',
storefrontAccessToken: 'dedeb09cd2a45e1d717e40867625f44e',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '4515674456177',
node: document.getElementById('product-component-1592423580703'),
moneyFormat: '%C2%A3%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": "Lato, sans-serif",
"font-weight": "bold",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
":hover": {
"background-color": "#7aa68b"
},
"background-color": "#87b89a",
":focus": {
"background-color": "#7aa68b"
},
"border-radius": "0px",
"padding-left": "22px",
"padding-right": "22px"
},
"quantityInput": {
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px"
},
"price": {
"font-family": "Lato, sans-serif"
},
"compareAt": {
"font-family": "Lato, sans-serif"
},
"unitPrice": {
"font-family": "Lato, sans-serif"
},
"description": {
"font-family": "Lato, sans-serif"
}
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"button": "Add to cart"
},
"googleFonts": [
"Lato"
]
},
"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": "Lato, sans-serif",
"font-weight": "bold",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
":hover": {
"background-color": "#7aa68b"
},
"background-color": "#87b89a",
":focus": {
"background-color": "#7aa68b"
},
"border-radius": "0px",
"padding-left": "22px",
"padding-right": "22px"
},
"quantityInput": {
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px"
},
"price": {
"font-family": "Lato, sans-serif"
},
"compareAt": {
"font-family": "Lato, sans-serif"
},
"unitPrice": {
"font-family": "Lato, sans-serif"
},
"description": {
"font-family": "Lato, sans-serif"
}
},
"googleFonts": [
"Lato"
]
},
"option": {
"styles": {
"label": {
"font-family": "Lato, sans-serif"
},
"select": {
"font-family": "Lato, sans-serif"
}
},
"googleFonts": [
"Lato"
]
},
"cart": {
"styles": {
"button": {
"font-family": "Lato, sans-serif",
"font-weight": "bold",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
":hover": {
"background-color": "#7aa68b"
},
"background-color": "#87b89a",
":focus": {
"background-color": "#7aa68b"
},
"border-radius": "0px"
},
"title": {
"color": "#4c4c4c"
},
"header": {
"color": "#4c4c4c"
},
"lineItems": {
"color": "#4c4c4c"
},
"subtotalText": {
"color": "#4c4c4c"
},
"subtotal": {
"color": "#4c4c4c"
},
"notice": {
"color": "#4c4c4c"
},
"currency": {
"color": "#4c4c4c"
},
"close": {
"color": "#4c4c4c",
":hover": {
"color": "#4c4c4c"
}
},
"empty": {
"color": "#4c4c4c"
},
"noteDescription": {
"color": "#4c4c4c"
},
"discountText": {
"color": "#4c4c4c"
},
"discountIcon": {
"fill": "#4c4c4c"
},
"discountAmount": {
"color": "#4c4c4c"
}
},
"text": {
"title": "SHOPPING BAG",
"empty": "Your shopping bag is empty."
},
"googleFonts": [
"Lato"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Lato, sans-serif",
"font-weight": "bold",
"background-color": "#87b89a",
":hover": {
"background-color": "#7aa68b"
},
":focus": {
"background-color": "#7aa68b"
}
},
"count": {
"font-size": "16px"
}
},
"googleFonts": [
"Lato"
]
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#4c4c4c"
},
"title": {
"color": "#4c4c4c"
},
"price": {
"color": "#4c4c4c"
},
"fullPrice": {
"color": "#4c4c4c"
},
"discount": {
"color": "#4c4c4c"
},
"discountIcon": {
"fill": "#4c4c4c"
},
"quantity": {
"color": "#4c4c4c"
},
"quantityIncrement": {
"color": "#4c4c4c",
"border-color": "#4c4c4c"
},
"quantityDecrement": {
"color": "#4c4c4c",
"border-color": "#4c4c4c"
},
"quantityInput": {
"color": "#4c4c4c",
"border-color": "#4c4c4c"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>

On actual published websiteOn actual published website

0 Likes
Highlighted
Tourist
4 0 1

This is the code:

<div id='product-component-1592423580703'></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: 'blazingrebel.myshopify.com',
storefrontAccessToken: 'dedeb09cd2a45e1d717e40867625f44e',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '4515674456177',
node: document.getElementById('product-component-1592423580703'),
moneyFormat: '%C2%A3%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": "Lato, sans-serif",
"font-weight": "bold",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
":hover": {
"background-color": "#7aa68b"
},
"background-color": "#87b89a",
":focus": {
"background-color": "#7aa68b"
},
"border-radius": "0px",
"padding-left": "22px",
"padding-right": "22px"
},
"quantityInput": {
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px"
},
"price": {
"font-family": "Lato, sans-serif"
},
"compareAt": {
"font-family": "Lato, sans-serif"
},
"unitPrice": {
"font-family": "Lato, sans-serif"
},
"description": {
"font-family": "Lato, sans-serif"
}
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"button": "Add to cart"
},
"googleFonts": [
"Lato"
]
},
"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": "Lato, sans-serif",
"font-weight": "bold",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
":hover": {
"background-color": "#7aa68b"
},
"background-color": "#87b89a",
":focus": {
"background-color": "#7aa68b"
},
"border-radius": "0px",
"padding-left": "22px",
"padding-right": "22px"
},
"quantityInput": {
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px"
},
"price": {
"font-family": "Lato, sans-serif"
},
"compareAt": {
"font-family": "Lato, sans-serif"
},
"unitPrice": {
"font-family": "Lato, sans-serif"
},
"description": {
"font-family": "Lato, sans-serif"
}
},
"googleFonts": [
"Lato"
]
},
"option": {
"styles": {
"label": {
"font-family": "Lato, sans-serif"
},
"select": {
"font-family": "Lato, sans-serif"
}
},
"googleFonts": [
"Lato"
]
},
"cart": {
"styles": {
"button": {
"font-family": "Lato, sans-serif",
"font-weight": "bold",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
":hover": {
"background-color": "#7aa68b"
},
"background-color": "#87b89a",
":focus": {
"background-color": "#7aa68b"
},
"border-radius": "0px"
},
"title": {
"color": "#4c4c4c"
},
"header": {
"color": "#4c4c4c"
},
"lineItems": {
"color": "#4c4c4c"
},
"subtotalText": {
"color": "#4c4c4c"
},
"subtotal": {
"color": "#4c4c4c"
},
"notice": {
"color": "#4c4c4c"
},
"currency": {
"color": "#4c4c4c"
},
"close": {
"color": "#4c4c4c",
":hover": {
"color": "#4c4c4c"
}
},
"empty": {
"color": "#4c4c4c"
},
"noteDescription": {
"color": "#4c4c4c"
},
"discountText": {
"color": "#4c4c4c"
},
"discountIcon": {
"fill": "#4c4c4c"
},
"discountAmount": {
"color": "#4c4c4c"
}
},
"text": {
"title": "SHOPPING BAG",
"empty": "Your shopping bag is empty."
},
"googleFonts": [
"Lato"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Lato, sans-serif",
"font-weight": "bold",
"background-color": "#87b89a",
":hover": {
"background-color": "#7aa68b"
},
":focus": {
"background-color": "#7aa68b"
}
},
"count": {
"font-size": "16px"
}
},
"googleFonts": [
"Lato"
]
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#4c4c4c"
},
"title": {
"color": "#4c4c4c"
},
"price": {
"color": "#4c4c4c"
},
"fullPrice": {
"color": "#4c4c4c"
},
"discount": {
"color": "#4c4c4c"
},
"discountIcon": {
"fill": "#4c4c4c"
},
"quantity": {
"color": "#4c4c4c"
},
"quantityIncrement": {
"color": "#4c4c4c",
"border-color": "#4c4c4c"
},
"quantityDecrement": {
"color": "#4c4c4c",
"border-color": "#4c4c4c"
},
"quantityInput": {
"color": "#4c4c4c",
"border-color": "#4c4c4c"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>

0 Likes