Streaming live at 10am (PST)

How to make Shoprocket buy link as clickable HTML embed (turn it into button)

Hi there

I’ve an issue with Shoprocket button, the embedded HTML, I don’t get button , it just hyperlink text BUY hyperlink, after I made few changes with background and padding, it isn’t clickable only the word ”buy” !

How to fix it
https://support.shoprocket.co/docs/using-simple-buy-buttons

<a href="javascript:sraddtocheckout(1801);" class="sr-add">Buy Now</a>

Please help

Hi @Zozo

Can you share your preview link link to the project so we can take a look at the issue on the page?

Stu

Hi @StuM

It’s an empty page

this code added to the footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>var $=jQuery.noConflict();</script><script language="javascript" src="https://space.shoprocket.co/frontend/sr.min.js?cid=13068"></script><div id="sr-basket-widget" class=""><div class="sr-basket-widget-inner" id="sr-basket-button">Cart <span class="sr-confirm-amount"> (0) </span></div></div>

Does this post help:

@AlexN is a Webflow/E-commerce wizard

Anyone would like to help @AlexN @PixelGeek

I’m not in favor of modifying things via js. If the Shoprocket js doesn’t style the link at all, you could just do it inside the embed.
For me, in this case, I include CSS in the embedded code to make the classed anchor display as block, that way the hit area is larger (Fitts’ Law) than just the text, then just style as you like in this way. Sadly, this is a workaround, and the anchor can’t be styled by Webflow directly. Hope this helps.
Example:
<style> a.sr-add {display: block;} a.button:hover {background-color: blue;}
<a … class="sr-add">button</a>
I like to keep it all in the same embed.
Or you could host the css elsewhere if that’s more comfortable for you.
http://mezzoblue.com/archives/2004/08/19/fitts_law/

2 Likes

Also, if the Shoprocket route doesn’t work - drop Josh @foxy a line with your requirements - he helped me style buy buttons to match a site style. Great support, and products managed in just one place - Webflow.

1 Like

Thanks @StuM! :slight_smile:

@Zozo Definitely let us know if we can help with anything. You can design your buttons right in Webflow and convert them to a purchase button in seconds.

Thanks,
Josh

2 Likes

This topic was automatically closed after 60 days. New replies are no longer allowed.