Crypto Price Ticker Widget/Code

Solved
nilesmoon
New Member
2 0 0

My site is in the cryptocurrency space and I would like to have a cryptocurrency ticker scrolling across the top (like a stock ticker you would see on a financial site). If anyone knows of there is any prebuilt code to embed or a widget available for Shopify it would be super helpful!

0 Likes
Michal17
Shopify Partner
820 73 147

Hi @nilesmoon 

Hope you're having a great day!

Are you talking about something like this? Find examples of widgets below.

1. Example 1 

scrnli_23_05_2021_12-54-02.png

Code:

 

<script src="https://widgets.coingecko.com/coingecko-coin-list-widget.js"></script>
<coingecko-coin-list-widget  coin-ids="bitcoin,ethereum,eos,ripple,litecoin" currency="usd" locale="en"></coingecko-coin-list-widget>

 

 

2. Auto-scrolling widget

scrnli_23_05_2021_13-01-59.png

Code :

 

<script src="https://widgets.coingecko.com/coingecko-coin-price-marquee-widget.js"></script>
<coingecko-coin-price-marquee-widget  coin-ids="bitcoin,ethereum,eos,ripple,litecoin" currency="usd" background-color="#ffffff" locale="en"></coingecko-coin-price-marquee-widget>

 

 

3.  Coin Heatmap Widget

scrnli_23_05_2021_13-08-05.png

Code:

<script src="https://widgets.coingecko.com/coingecko-coin-heatmap-widget.js"></script>
<coingecko-coin-heatmap-widget  height="400" locale="en"></coingecko-coin-heatmap-widget>

 

4. Example with BTC

scrnli_23_05_2021_13-15-32.png

Code:

<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script><div class="coinmarketcap-currency-widget" data-currencyid="1" data-base="USD" data-secondary="" data-ticker="true" data-rank="true" data-marketcap="true" data-volume="true" data-statsticker="true" data-stats="USD"></div>

 

5. Example 5

scrnli_23_05_2021_13-22-19.png

See a full-width page example here.

Code:

<div style="height:374px; background-color: #FFFFFF; overflow:hidden; box-sizing: border-box; border: 1px solid #56667F; border-radius: 4px; text-align: right; line-height:14px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #56667F; padding: 0px; margin: 0px; width: 100%;"><div style="height:354px; padding:0px; margin:0px; width: 100%;"><iframe src="https://widget.coinlib.io/widget?type=full_v2&theme=light&cnt=5&pref_coin_id=1505&graph=yes" width="100%" height="350px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;"></iframe></div><div style="color: #FFFFFF; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"><a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #FFFFFF; text-decoration:none; font-size:11px">Cryptocurrency Prices</a>&nbsp;by Coinlib</div></div>

 

6. Live Coin Chart Bitcoin Widget

scrnli_23_05_2021_13-28-19.png

Code:

<div style="height:560px; background-color: #FFFFFF; overflow:hidden; box-sizing: border-box; border: 1px solid #56667F; border-radius: 4px; text-align: right; line-height:14px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #56667F;padding:1px;padding: 0px; margin: 0px; width: 100%;"><div style="height:540px; padding:0px; margin:0px; width: 100%;"><iframe src="https://widget.coinlib.io/widget?type=chart&theme=light&coin_id=859&pref_coin_id=1505" width="100%" height="536px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;line-height:14px;"></iframe></div><div style="color: #FFFFFF; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"><a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #FFFFFF; text-decoration:none; font-size:11px">Cryptocurrency Prices</a>&nbsp;by Coinlib</div></div>

 

7. Crypto/Bitcoin Currency Converter Widget

scrnli_23_05_2021_13-30-54.png

Code:

<div style="width: 250px; height:335px; background-color: #FAFAFA; overflow:hidden; box-sizing: border-box; border: 1px solid #56667F; border-radius: 4px; text-align: right; line-height:14px; block-size:335px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #56667F;margin: 0;width: 250px;padding:1px;padding: 0px; margin: 0px;"><div style="height:315px; padding:0px; margin:0px; width: 100%;"><iframe src="https://widget.coinlib.io/widget?type=converter&theme=light" width="250" height="310px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;"></iframe></div><div style="color: #FFFFFF; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"><a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #FFFFFF; text-decoration:none; font-size:11px">Cryptocurrency Prices</a>&nbsp;by Coinlib</div></div>

 

8. Horizontal Live-Ticker (Pauses on hover)

scrnli_23_05_2021_13-33-47.png

Code:

<div style="height:62px; background-color: #FFFFFF; overflow:hidden; box-sizing: border-box; border: 1px solid #56667F; border-radius: 4px; text-align: right; line-height:14px; block-size:62px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #56667F;padding:1px;padding: 0px; margin: 0px; width: 100%;"><div style="height:40px; padding:0px; margin:0px; width: 100%;"><iframe src="https://widget.coinlib.io/widget?type=horizontal_v2&theme=light&pref_coin_id=1505&invert_hover=" width="100%" height="36px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;"></iframe></div><div style="color: #FFFFFF; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"><a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #FFFFFF; text-decoration:none; font-size:11px">Cryptocurrency Prices</a>&nbsp;by Coinlib</div></div>

 

Integration:

To integrate one of these widgets, you just have to determine the page on which you want to do it and modify its code by following the following steps:

scrnli_22_05_2021_15-34-42.png

On which page of your store would you like to integrate the widget?

Sources:

If you have any further questions, please do reach out either here on the forum, or via private message/email.

nilesmoon
New Member
2 0 0
Thank you so much! Worked great, much appreciated.
0 Likes
Michal17
Shopify Partner
820 73 147

This is an accepted solution.

Hi @nilesmoon 

You are welcome. I'm glad you were satisfied.

Please hit Like and Accept the Solution! Thanks

If you have any further questions, please do reach out either here on the forum, or via private message/email.

0 Likes
Theevac
New Member
1 0 0

Hi, 

 

Thanks for all the help... how do i integrate it across all of the pages?

 

Is there a way where it is always there?

 

Thank you 

 

0 Likes
Ketyball
New Member
2 0 0

Thank you for sharing an easy way to check the price of different Cryptocurrencies. This was always a problem for me. I couldn't find a website where I could find all the information I needed. Most of all, I am using the only BitCoin because it is the most common cryptocurrency. I make a lot of transactions using it, and the majority of clients accept only Bitcoin. For me, the most important aspect is the anonymous part of cryptocurrencies. I like that I can easily use the bitcoin tumbler, and it can delete all the tracks of a certain Bitcoin transaction.

0 Likes
Michal17
Shopify Partner
820 73 147

Hi @Theevac 

Hope you're having a great day!

Did you finally manage to find a solution? Otherwise, I could help you.

0 Likes
Michal17
Shopify Partner
820 73 147

Hi @Ketyball 

You're welcome. I'm happy to help.

0 Likes
Zelgart
New Member
1 0 0

Hi @Michal17 - I was wondering if you have a way to customize which coins are shown on the 2nd or 8th example?

0 Likes