A Snipcart test

Here's a dead-simple Snipcart test. I actually put the integration code in the post code injection, since I didn't want it running sitewide.

Want to buy an awesome painting? Just $79.99

So the bit above is a Ghost title, image, and then the Snipcart button in an HTML card. Here's the button code:

<button class="snipcart-add-item better"
  data-item-id="starry-night"
  data-item-price="79.99"
  data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh."
  data-item-image="https://www.spectralwebservices.com/content/images/2025/02/606px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg"
  data-item-name="The Starry Night">
  Add to cart
</button>

I wanted to use a product card, but that would have taken some more finagling, because the button needs attributes to trigger.

The button starts out butt ugly. Yuck. I applied some styles:

<style>
  .better {
    background-color: var(--ghost-accent-color);
    color: white;
    border: none;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 12px;
    border-radius: 4px;
  }
  
</style>

It's interesting. I'd have thought, given that the html embed has a bunch of information, that the embed code would have given me a whole product box. Nope. Just one ugly button. Interesting. I guess if I were going to do this, I'd want a snippet I could fill out, with the layout I preferred.

The other thing I'd need to use this in Ghost is a shopping cart symbol for the menu. I made this one up, and then stuck it in the navbar (although only for this page) with some javascript.

Here's the code, which could definitely be easier to read if I'd put more of it in sitewide code injection instead of in an html card on the page.

<script>
let target = document.querySelector('.gh-head-actions');
let newspan = document.createElement('span');
newspan.innerHTML = `<a class="snipcart-checkout" style="cursor: pointer; text-decoration: none; display: inline-flex; align-items: baseline"><span style="font-size: 30px">🛒</span><span class="snipcart-items-count" style="margin-left: -5px;
    background: var(--ghost-accent-color);
    padding: 2px 6px;
    border-radius: 50%;
    border: solid var(--ghost-accent-color) 2px;
    color: white;">&nbsp;</span></a>`;
target.insertBefore(newspan, target.firstChild); 
</script>

So for 2% but $20/month minimum, there's nice functionality under the hood for digital and physical sales. I just wanted a nicer product box creation.

Could it be a product card instead? Well... probably. Let's see.

Girl Before a Mirror
$5,000

This began life as a normal product card. Let's see what happens next...

Buy it now

Yeah, it took a little bit of trickery, but it wasn't really that much worse than any other buy button. I could stick that in a snippet and fill it in pretty easily.

<script>
  let product = document.querySelector('.kg-product-card-button');
  product.classList.add('snipcart-add-item');
  product.setAttribute('data-item-id', '123');
  product.setAttribute('data-item-price', '5000.00 ');
  product.setAttribute('data-item-description', "Own this totally not suss Picasso painting.");
  product.setAttribute('data-item-name', 'Girl before a mirror');
  product.setAttribute('data-item-image', 'https://www.spectralwebservices.com/content/images/2025/02/GirlBeforeAMirror.jpg')
  product.removeAttribute('href');
</script>

TL;DR;

Snipcart certainly works with Ghost. Is it perfectly styled right out of the box? No, and you'll have to get your fingers in the code (or at least the code injection) to fix that. If you want a zero-code solution, this may not be the right choice. Still, it's a viable option, and could be made to work even with nothing but code injection.

Update: Something is amiss with comments. My sign-in and subscribe buttons in the comments iframe are not working well on this post, and only on this post. I'm suspecting some off-target javascript effects, but haven't gotten to troubleshoot them yet...