Placing a Buy Button inside a table (user-created web page)

Solved
Dave_G
Tourist
10 1 2

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>

buy-button-inside-table.jpg

0 Likes
PaulNewton
Shopify Partner
3135 196 578

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 <td>.

 

Otherwise you may need to debug your page and the buy-button js to find if there's a bug.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Dave_G
Tourist
10 1 2

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?

buy-button-inside-table-02.jpg

 

EDIT: I would also like to override the top level inline style that defines :max-width=280px.

0 Likes
Dave_G
Tourist
10 1 2

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.

0 Likes
PaulNewton
Shopify Partner
3135 196 578

This is an accepted solution.

You'll have to learn the configuration system

https://shopify.github.io/buy-button-js/customization/#styles

https://github.com/Shopify/buy-button-js 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Dave_G
Tourist
10 1 2

Thanks. I'm on it ...

0 Likes
Dave_G
Tourist
10 1 2

This is an accepted solution.

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>).

buy-button-inside-table-03.jpg