FROM CACHE - en_header

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

Solved
Dave_G
Excursionist
25 1 10

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

Accepted Solutions (2)

Accepted Solutions
PaulNewton
Shopify Partner
4876 410 1050

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 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

Dave_G
Excursionist
25 1 10

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

View solution in original post

Replies 6 (6)
PaulNewton
Shopify Partner
4876 410 1050

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.

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Dave_G
Excursionist
25 1 10

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.

Dave_G
Excursionist
25 1 10

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.

PaulNewton
Shopify Partner
4876 410 1050

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 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Dave_G
Excursionist
25 1 10

Thanks. I'm on it ...

Dave_G
Excursionist
25 1 10

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