FROM CACHE - en_header

Center Shopify Lite Button on Wordpress

Solved
RodnieKingAudio
New Member
2 0 0

I've looked through the forums and I can't for the life of me figure out why my buy buttons are not centering on my page. I've tried multiple solutions and maybe I'm just reading them wrong because none of them are working. The three buttons are pretty similar so I'll post a link to my page and just post one of the buttons HTML code.

My website
https://rodniekingaudio.com/mixing/#packages

 

My Code

Start Code
<div id='product-component-1613896413408'></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: 'rodnie-king-audio.myshopify.com',
storefrontAccessToken: '9fd27b159fa0eaf1ded2eea66e941477',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '6459357331607',
node: document.getElementById('product-component-1613896413408'),
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"
}
}
},
"text": {
"button": "Add to cart"
}
},
"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"
}
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {}
},
});
});
}
})();
/*]]>*/
</script>
End Code

This is what it keeps coming out like.This is what it keeps coming out like.

I've tried using this in multiple different ways
<div align=”center”>
—- Buy Button code —
</div>
But it's not cooperating

What do?

 

Accepted Solution (1)

Accepted Solutions
Guleria
Shopify Partner
2053 437 637

This is an accepted solution.

Hello @RodnieKingAudio ,

Add this css in your WordPress active theme 

.shopify-buy-frame {
    width: 100%;
    max-width: 100% !important;
}

 btw I don't think there is any relation of your query with Shopify 

Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Try GEMPAGES page builder, a great app with drag & drop features and active support.

View solution in original post

Replies 2 (2)
Guleria
Shopify Partner
2053 437 637

This is an accepted solution.

Hello @RodnieKingAudio ,

Add this css in your WordPress active theme 

.shopify-buy-frame {
    width: 100%;
    max-width: 100% !important;
}

 btw I don't think there is any relation of your query with Shopify 

Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Try GEMPAGES page builder, a great app with drag & drop features and active support.
RodnieKingAudio
New Member
2 0 0

This worked exactly as I needed it to. Very simple solution, I appreciate the lightning fast response.