I am experiencing difficulty placing a Buy Button inside a table on my user-created custom web page.
I am following the instructions for placing a Buy Button on a user-created webpage. (Ref: https://help.shopify.com/en/manual/online-sales-channels/buy-button/create-buy-button )
When I place the copied button code inside a element, nothing shows up on the web page. (eg.
)When inspected in the Firefox browser, the
Is the console error showing in your screenshot related to the buy button?
Make sure whatever context the table is in so is the buy button javascript, i.e. no iframes inside iframes.
Without seeing or digging through the rest of your code a fix could be to wait for the button to load then move into the table .
Otherwise you may need to debug your page and the buy-button js to find if there’s a bug.
Thanks @PaulNewton . Your reply led me to discover the apparent cause of the problem.
I believe the issue turned out to be that I had two instances of the Buy Button on the page (one outside the table and one inside). Both were referring to the same product-component number. More specifically, I was using duplicates of the
Now I have a formatting issue. I would like better control over the margins and padding of the Buy Button component.
The generated button code uses a class that defines the top margin as 20px. It seems to be hard coded. See below:
.shopify-buy__btn-wrapper { margin-top: 20px; }
How can I override the margins and padding for the Buy Button component at the top level?
EDIT: I would also like to override the top level inline style that defines :max-width=280px.
EDIT 2: It looks like the top spacing issue may also be affected by an inline style (height:43px) for the generated iframe. So I would need access to that attribute as well.
You’ll have to learn the configuration system
https://shopify.github.io/buy-button-js/customization/#styles
Thanks. I’m on it …
SOLVED
Many thanks to @PaulNewton for pointing me to the code and documentation for BuyButton.js.
For those who are interested in the specific code modifications I made to the default Buy Button generated by the Shopify interface, please see the attached graphic. I have highlighted the key modifications I made to format and position the button inside a table cell.
For clarity within the table HTML code, I split the Shopify generated code between the portion (placed in my HTML section), and the product button
