Customise embedded buy button + options

Solved
marcd
Excursionist
14 1 3

Any tips ;)

Got a nice looking buy button, with radio buttons instead of drop downs, language based redirect to local checkouts.

But custom fonts ain’t loading on mobile.

0 Likes
siaeva
Tourist
9 1 1

So your custom fonts are loading fine on desktop, just not on mobile?

0 Likes
marcd
Excursionist
14 1 3

Well I declared them in the font-family stacks and offcourse desktop is working (seeing that I installed these fonts to use in Photoshop etc).

I am just curious how you went about adding the custom fonts and used them to style the Shopify iFrame.

Would love to know how you managed it.

0 Likes
siaeva
Tourist
9 1 1

You would need to firstly install the font on your site, and then follow the instructions in the accepted solution on this thread. 

0 Likes
marcd
Excursionist
14 1 3

Hi @siaeva i got the fonts installed on my site, and use it with succes on all the pages.

But seeing that the buy button renders everything in a IFrame, declaring the font-family in the Buy Button JavaScript, isn’t working. All other property’s (colors, size etc) works perfectly.

0 Likes
siaeva
Tourist
9 1 1

It was so long ago I did it, but checking back i see that I assigned the font to the class .shopify-buy__btn in the css.

0 Likes
marcd
Excursionist
14 1 3

@siaeva got it working by setting iFrame: false. This renders the content without iFrame and thus allow custom fonts to be displayed perfectly.

I tried it multiple times before setting iFrame to false, but it didn't work, not it does and solves everything :).

cgulliksen1
New Member
1 0 0

@marcd I am looking to use my theme font on the text in the Shopify buy button. I am not able to understand the github link (unfortunately). Would be grateful if you could explain me how you solved it:)

0 Likes
Lixon_Louis
Shopify Partner
1186 35 251

Set iframe: false to productSet component . Refer https://shopify.github.io/buy-button-js/customization/

This will remove the default styles from the embed, but you can get the compiled CSS from https://cdnjs.com/libraries/buy-button-js .   @cgulliksen1 

index.html - evohair - Visual Studio Code 2021-05-.png

ETH/USDT- 0xaebdffafec6b5b53df1fb1b9f7b2401c3c2cffe4 , BTC - 3G47YW1H5RvcFU7ucUCPGcqZKfLjTSmEr4
0 Likes