How do I include Snipcart?

Hi everybody,

as this is my first entry greetings to you fellow Sparkle users!

This is probably a beginner´s question (probably because I am such), but does anybody know how to integrate Snipcart into my Sparkle website? Following the Snipcart tutorials it looks to me that I need a html code editor to do so. But that cannot be right!?

I know team Duncan is working on implementing Snipcart into Sparkle 3.0, but there must be something simple here I am missing.

Thanks everybody!

Thomas

@ThomasC, Welcome to the forum! :slight_smile:

Ouuuu!, where did you hear Sparkle 3 will have Snipcart implementation? That would be great though! :slight_smile:

Whenever we want to extend the capabilities of Sparkle, like with you and Snipcart, we use the “Embed” element/widget. So once the the Embed element is on the Sparkle canvas you’ll see in the right-hand panel an area where you can place the snippet of code - under the title “Embedded Content” and once placed untick “Activate after consent” under it unless you are in Europe.

Yeah, this I know about the embed widget. Still I could not really get it done. I thought maybe somebody has managed to run Snipcart in Sparkle.

Thanks anyway!

About Sparkle 3.0… Duncan told me that. I really hope he succeeds in implementing it.

Snipcart is going to be too complex to add using embeds only, they have a number of requirements and cross linked files.

@ThomasC, Sorry! I have got Ecwid & Shopify working perfectly! Never tried Snipcart.

Reading this - https://docs.snipcart.com/v3/setup/installation, it looks straight forward - you only need to drop in three sets of code snippets.

I would put these code snippets in an Embed and position it more towards the top of your Sparkle canvas…

<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.14/default/snipcart.css" />

I would then create a second Embed and place it towards the bottom of the Sparkle canvas…

<div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.14/default/snipcart.js"></script>

They then suggest to get your public api key and then overwrite where it says in the code “YOUR_PUBLIC_API_KEY

You then create your product items in Snipcart and generate a BUY NOW button and you’ll get a code snippet like…

<button class="snipcart-add-item"
  data-item-id="starry-night"
  data-item-price="79.99"
  data-item-url="/paintings/starry-night"
  data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh."
  data-item-image="/assets/images/starry-night.jpg"
  data-item-name="The Starry Night">
  Add to cart
</button>

Which you again place in an Embed and place it under your product on the Sparkle canvas.
I’m not sure if this will help, or you have already done all this but I hope it does help somewhat… good luck! :slight_smile:

EDIT : Oh no! I just saw Duncan’s response!!! Ouch! :frowning:

Well I won’t hold back anybody from trying. But it’s not as simple as, say, the paypal button.

1 Like

I find it easier to add your own, self hosted, shopping cart in Sparkle. It keeps everything within your own site (good for SEO) and it’s often a lot simpler to add to your site. The cart I use is Stiva shopping cart. It’s set up as a separate application in a sub-directory of your server. You then grab the embed code from the administrator interface and add it via a code widget in your Sparkle project. You can see such a cart HERE - A sparkle site. Scroll the page and follow the links on the visit shop button. The cart itself uses Paypal or AuthorizeNet as the standard payment gateways. Administration is very simple through an admin URL.

These types of carts come with a moderate price tag, but once they are purchased, they’re yours to use how you wish.

Thanks Duncan! If I waited for Sparkle 3.0, would this make my life easier?

Thank you so much for getting into Snipcart for me. I´ll follow your instructions and will give it a try.

Thank you, that looks interesting. I will definitely look into it.

Life will be definitely easier when Sparkle 3 is out :slight_smile:

Any idea about when all our lives will become easier? :wink:

I tried embedding everything like it says, but the page remains blank. I feel I am stuck here and guess I will go with one of the other options or wait for Sparkle 3.0. Between Shopify and Ecwid, can you suggest one or the other?

I checked out their website and the shopping cart they offer under their brand Broom comes with a monthly subscription fee (7,42 $).

@ThomasC, Sorry to hear that!

Both Ecwid and Shopify are good but I do feel of late that Shopify is not for the little business anymore? With Ecwid (if your selling products, not digital products) you can use their platform with 10 items for free and when you do pay for their subscription model (10+ products) then it is a bit more cheaper per month than Shopify.

Yeah, that was my impression, too. We are definitely a little business for now and will give Ecwid a try. Thank you so much!

1 Like

@ThomasC. The Stiva Cart solution is a one-off fee for either a single site licence or a developer licence - there is no subscription fee to pay. You can, if you wish, pay a fixed annual fee for the developer to host the script for you, but that isn’t necessary. Never heard of the Broom Brand

OK, now I found it. I was browsing through their website and the one thing I originally found was this Brolmo shopping cart (which you find going to Brands and so on).

Thanks a lot, I´ll look into it.

Here BTW is Snipcarts answer to my email:

Hey Thomas,

Thanks for reaching out!

Unfortunately, Snipcart doesn’t play well with non-developer tools like Sparkle.

Access to your site’s code source is important to make the most out of Snipcart.

I’m sorry I don’t have a more positive answer for you. :confused:

Cheers,
Francois Lanthier Nadeau

CEO, Snipcart

@ThomasC, Makes sense then!

From my end and experience I believe Ecwid would be a good choice… it is modern, mobile friendly, easy to use and embed, and the bonuses is you can work it with your social media platforms extending your online shop experience via them. Good luck! :slight_smile: