Liquid, JavaScript, themes, sales channels
I'm really hoping someone can help me here...
I created an ADD TO CART button in Shopify to display it in WordPress using Elementor page builder. The issue is that the button won't stay centered on some resolutions/ devices..
I really tried everything to keep it centered with no joy at all...
Here is the link to my store: http://seedlessbeverageco.com/
I have attached a video with my issue.
Some help would be greatly appreciated!
Thanks
Solved! Go to the solution
This is an accepted solution.
Hi Otis,
I was able to center it with my dev tools using this:
.shopify-buy-frame--product {
display: block;
margin: auto;
}
It's showing inline CSS, but in Elementor, you can add CSS, so you might try adding the CSS directly for this element on this page. It ended up centering all the ADD To CART buttons for your products in responsive mode. And if still not working, add !important: margin: auto!important;
Hello There,
1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme-styles-responsive.scss.css and paste this at the bottom of the file:
.shopify-buy-frame--product {
max-width: 100% !important;
}
hello @ottisshore96
.shopify-buy-frame {
max-width: 100% !important;
}
Thank you so much for your quick response. I did exactly as you requested and it did not work as per screenshot:
hello @ottisshore96
can you please share a screenshot of which file insert code?
Sure! Here you go :
Hello There,
1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >custom-frontend.min.css and paste this at the bottom of the file:
.shopify-buy-frame--product {
max-width: 100% !important;
}
Hi Pallavi.
There is no such file in assets...
This is an accepted solution.
Hi Otis,
I was able to center it with my dev tools using this:
.shopify-buy-frame--product {
display: block;
margin: auto;
}
It's showing inline CSS, but in Elementor, you can add CSS, so you might try adding the CSS directly for this element on this page. It ended up centering all the ADD To CART buttons for your products in responsive mode. And if still not working, add !important: margin: auto!important;
Wow Roxee541
You just fixed something that was eating at my brain for a long time!! Good on you!!! It worked!!
I just added your brilliant CSS to one button and it just fixed all the buttons for me.
Thanks so much!
Glad I could help Otis.
Yes, when I used my dev tools, it changed it for all the buttons, so I thought it would do the same thing when adding the CSS.
If you can mark this as an accepted solution, that would be great!
Good luck with your store! I like the idea of using Shopify payment buttons with Wordpress, as Shopify is a bit easier to process payments and mark as fulfilled.
Thanks!
Todd
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024