Streaming live at 10am (PST)

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


#1

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

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

Please help


#2

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


#3

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>


#4

Does this post help:

@AlexN is a Webflow/E-commerce wizard


#5

Anyone would like to help @AlexN @PixelGeek


#6

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/


#7

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.


#8

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


#9

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