Search Our Knowledgebase

  • Joomla
  • Video
  • WordPress
Or ask a question in our official product support forum boards

S5 Snipcart

This tutorial will explain how to install and configure the S5 Snipcart module.


The Snipcart module is a simple way to add eCommerce functionality to any website. From Snipcart.com's website: "Simply add Snipcart's HTML markup to any link/HREF to make it buyable. The markup allows you to define your product's properties, including the price, the weight, the product name, the product page and anything you can think of! Once you've added this markup, you're already halfway through."

Note - Many of our club products contain specific styling for our extensions. These styles cannot be transferred from one product to another; they are integrated into the design. The same extension is used on all installations, the themes themselves contain the styling overrides. If a particular theme does not include unique styling for a particular extension, then the default style is used.

Be sure to read the tooltips and other descriptions in the backend of this extension. There are a lot of tips and further information found in these areas.

1. Installation

The first thing you'll need to do is install the module. Once you have it downloaded it just follow the below tutorial if you need help installing the module into Joomla. Refer to your template's module layout to determine the best position to publish this module to, some modules are designed for specific locations.

http://www.shape5.com/documentation/Joomla/Getting-Started/How-To-Install-An-Extension-Into-Joomla

2. Next you will need to signup for an account on snipcart.com.

3. Grab Your API Key

Once you signup you'll need to grab your API key for your account under the "Account > Credentials" area and add to the backend area of S5 Snipcart and published the module to a position on your site you desire the cart to show up in. You can also configure the cart icon and if it popups or not on item add.
snipcart

3. Enter your Website Domain

Back on the snipcart.com website you'll also need to enter in your domain name under "Settings > General". Note that snipcart doesn't work on localhost, you will need to test and configure on a live domain. The reason being for snipcart security that checks your website on submission to be sure nothing was changed, like price, etc during add to cart process.

4. Now You can Start Adding Items

Now you are all setup and connected. The next part is where you'll need to add items to your site. On any page article or module that accepts HTML you can easily add an add to cart button. For example


<a href="#" 
class="snipcart-add-item"
data-item-id="1"
data-item-name="Item Name"
data-item-price="10.99"
data-item-url="http://www.yourwebsite.com/specific-page"
data-item-description="Item Description here">
Add to Cart
</a>


And the following is an example from our Fresh Bistro demo that includes an icon for the add to cart and a styled button:


<a href="#" 
class="button snipcart-add-item"
data-item-id="113"
data-item-name="Tacos Grande"
data-item-price="10.99"
data-item-url="http://www.shape5.com/demo/fresh_bistro/index.php/order-online/30-appetizers/113-tacos"
data-item-description="Tacos Grande">
<span class="ion-ios-cart sized"></span>
Add to Cart
</a>

Please take a look at the following page on Snipcart's website for more information on this: http://docs.snipcart.com/configuration/product-definition

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.