Snipcart + Liebling: match made in heaven

[hiensarahly]

Hi, I’m not raising any issue, everything is ok 😋 Just wanted to let you know Liebling works well & looks awesome with Snipcart E-Commerce integration. Out of the 3 themes I tried, this is the one. Much love, be well! ❤️❤️😇

[eddiesigner]

Thanks for using Liebling! Please let me see it in action (if possible) 🙏 I would really like to see how it looks like, I've never tried that!

[hiensarahly]

Here you go: https://domain-change.com/dummy-page/ You can test it however you like. They have a test API that's free forever for testing. :)

[eddiesigner]

😯 This is so cool! I played a bit with it and looks pretty nice, thanks for sharing! :)

[pascalandy]

@hiensarahly do you have a git repo for this project? Also, I guess https://zenyrgarden.com/dummy-page/ is not active anymore.

Thanks!

[hiensarahly]

@pascalandy I don't now -- I'm not using SnipCart at the moment. But it should be a breeze to add. You could try it on your local ghost server, these are the steps I do if it helps:

1. Add css to code injection header: <link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.27/default/snipcart.css" />
2. Add js to code injection footer:

   <script async src="https://cdn.snipcart.com/themes/v3.0.27/default/snipcart.js"></script>
   <div id="snipcart" data-config-modal-style="side" data-api-key="YOUR_SNIPCART_TEST_API_KEY" hidden></div>

3. Make a page/post in Ghost editor with this example HTML:

   <a href="#"
   class="snipcart-add-item"
   data-item-id="1"
   data-item-name="[DEMO] DC vs Marvel Bundle: Collector's Edition"
   data-item-price="1200.00"
   data-item-weight="20"
   data-item-url="localhost:2368/seller"
   data-item-description="A cool comics bundle for cool collectors. This isn't a real product, it's for a demo."
   data-item-image="https://upload.wikimedia.org/wikipedia/en/6/63/DC_Versus_Marvel_1.jpg">
   buy the bundle here
   </a>

   The product will be automatically fetched in your SnipCart dashboard (specifically the Products section on the sidebar).

And voila, enjoy your new sales page:

Sales page:

The checkout page:

I hope this helps!

[pascalandy]

Alright! I see some docs here as well https://ghost.org/integrations/snipcart/