Streaming live at 10am (PST)

How to add a class to a custom Samcart Button?

Hello,

I need a little bit of help with the Samcart button. I need to use the function to open checkout in a modal, I found the function in Samcart but I’m not sure how I add to this button, my Webflow Button class. I tried to create this: class=“CTA-samcart” where CTA-samcart is my CSS name in Webflow.

<a class="CTA-samcart" href='https://neetsnacks.samcart.com/products/neetsnacks'
                            sc-url='https://neetsnacks.samcart.com/products/neetsnacks?template=popupsalesletter'
                            sc-popup
                            sc-embed='custom'
                            sc-product='neetsnacks'
                            sc-marketplace='I5Ps12mezVUJ25QupteFIrxwjIVJ1VsY'
                            >
                            Buy Now
                        </a>
                        <script>
                            (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];
                                if (d.getElementById(id)) return;
                                js = d.createElement(s); js.id = id;
                                js.src = 'https://samcart.com/embed/embed.js';
                                fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'samcart-embed'));
                        </script>

https://preview.webflow.com/preview/neetsnacks?utm_medium=preview_link&utm_source=designer&utm_content=neetsnacks&preview=e861d0a5766f2a7b50897030d8a79bb0&mode=preview

This is my website.

Can you help me please? :webflow_heart:

Hi @Alexander_von_Stauff,

What about creating an Webflow embed component for your “buy now” button and copy the HTML code:

<a class="CTA-samcart" href='https://neetsnacks.samcart.com/products/neetsnacks' sc-url='https://neetsnacks.samcart.com/products/neetsnacks?template=popupsalesletter' sc-popup sc-embed='custom' sc-product='neetsnacks' sc-marketplace='I5Ps12mezVUJ25QupteFIrxwjIVJ1VsY'>Buy Now</a>

Then before the end of the body tag </body>copy your JavaScript function:

<script>
    (function(d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.src = "https://samcart.com/embed/embed.js";
      fjs.parentNode.insertBefore(js, fjs);
    })(document, "script", "samcart-embed");
</script>

Does that help ?

I have the same issue, the button from embed does not look how I need: https://www.neetsnacks.com/

class=‘CTA-samcart’ does not seem to work. I had something similar on another website and I just write there the class and sub-class and al buttons worked.

i know Webflow lowercase class names… so if you explicitly name a class “CTA-samcart”, weblfow will convert it to “cta-samcart” in the exported website. I had this issue once. I did try on codepen and it works fine. Not sure why it would not on a Webflow project though.

EDIT
I did try your read-only link, it seems the button works as expected doesn’t it ?