Re: Placing a Buy Button inside a table (user-created web page)
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 <td> element, nothing shows up on the web page. (eg. <td><div id='product-component-1234567890123'></div></td>)
When inspected in the Firefox browser, the <div> appears as written above. When the same <div> is placed outside the table on the same page, the Buy Button appears as it should and works. The Firefox inspector shows the expanded auto-generated code beginning with the snippet below.
<div id="product-component-1234567890123" class="shopify-buy-frame shopify-buy-frame--product shopify-buy__layout-vertical" style="max-width: 280px;"><iframe style="width: 100%; overflow: hidden; border: medium none; height: 43px;" horizontalscrolling="no" verticalscrolling="no" allowtransparency="true" scrolling="no" name="frame-product-6633845784802" frameborder="0"></iframe></div>
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 <script> portion (placed in my HTML <head> section), and the product button <div> portion (placed within the table's <td>).
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 <div> part of the code, and only had one copy of the <script> portion. The first was showing up, but the second one wasn't. The one inside the table appeared after I deleted the one that was elsewhere on the page.
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.
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 <script> portion (placed in my HTML <head> section), and the product button <div> portion (placed within the table's <td>).
Community Blog Articles
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024