Solved

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

Dave_G
Excursionist
30 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)
PaulNewton
Shopify Partner
6274 573 1319

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 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


View solution in original post

Dave_G
Excursionist
30 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
6274 573 1319

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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Dave_G
Excursionist
30 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
30 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
6274 573 1319

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 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Dave_G
Excursionist
30 1 10

Thanks. I'm on it ...

Dave_G
Excursionist
30 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