Snipcart + Magnolia CMS

How to use Magnolia and Snipcart together

What Snipcart offers

Snipcart offers a comprehensive e-commerce solution designed to seamlessly integrate into existing websites. Their platform allows merchants to add shopping cart functionality to their websites with just a few lines of code, eliminating the need for complex integrations or costly redevelopment.

With Snipcart, merchants can sell physical and digital products, subscriptions, and services directly from their own website. The platform provides a customizable shopping cart that can be tailored to match the look and feel of any website, ensuring a consistent user experience for customers.

Snipcart handles all aspects of the checkout process, including secure payment processing, order management, and shipping calculations. Merchants have full control over pricing, discounts, and taxes, allowing them to create a personalized shopping experience for their customers.

In addition to its core features, Snipcart offers a range of tools and integrations to help merchants grow their businesses. These include analytics and reporting tools, marketing integrations, and support for various payment gateways and shipping providers.

Overall, Snipcart provides a simple yet powerful solution for businesses looking to add e-commerce functionality to their websites, enabling them to increase sales and reach a wider audience online.

Cart Embedding

Connect with Snipcart

To initiate the integration with Snipcart, you embed a javascript code into your web pages. This code allows Snipcart to initate the cart itself. The simplicity of this process ensures a quick setup, making it accessible for users with varying technical expertise.

After defining your products in Snipcart you need to add the embed code of your product inside a magnolia html component.

You will find a detailed description of the process here.

<button class="snipcart-add-item"
  data-item-id="yellow-sticker"
  data-item-price="1.99"
  data-item-description="High-quality yellow Snipcart stickers (pack of 3)"
  data-item-image="assets/images/yellow-stickers.png"
  data-item-name="Yellow Snipcart Stickers">
  Add to cart
</button>

How to integrate javascript code snippet

Follow our tag manager tutorial