• Stars
    star
    286
  • Rank 144,690 (Top 3 %)
  • Language SCSS
  • License
    MIT License
  • Created over 5 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Planty is an e-commerce ready theme for Stackbit, powered by Snipcart.

logo

Planty Stackbit theme

Create with Stackbit

Planty is an e-commerce ready custom theme for Stackbit created by Snipcart.

This theme can be used to create an e-commerce ready website through Stackbit's platform. You'll get everything you need from products listing, categorization, FAQ, etc.

You can see it in action right here.

To learn more about Stackbit and its custom themes feature, read this post.

How to get started

In Stackbit's custom themes importer, just use this repository URL. For the moment, this theme works only with Jekyll but will soon work with other static site generators supported by Stackbit.

Theme configuration

Please note that the screenshots below have been taken in Forestry, you can use Forestry as headless CMS for your project if you want, but this also work with other CMSs.

Configuring Snipcart

First thing is to enter your Snipcart API key. Open your CMS and go to Global site config.

api-key

Use your public API key in there.

Logos

Logos can be updated via the CMS as well. You'll be asked to provide a dark and a light logo.

logo

Styles configuration

Colors can be managed via the CMS as well. Under Global site config section, open Styles config. You'll see all colors used throughout the theme listed here. Adjust them for your own branding.

styles-config

You can also configure background images in there.

background-images

Categories

Each product can be associated to a category. Open the Categories section and manage them there.

categories

Products

Products can be managed directly through the CMS via the Products section.

products

Products have several properties available, both for Snipcart and for the theme. You can define its price, description, name, ID, etc.

You can also define if this is a featured product, meaning that it will show in the Best sellers section on the site. A feature product will use the Feature images set.

product-details

Promotion

The promotion is a component displayed just above the footer on some pages. You can configure what to show in that box via the CMS.

promotion

You can define a Call to action for the promotion, it's usually a link to a section of your site.

promotion-cta

Testimonials

You can manage testimonials to show on the site via this section.

testimonials

About

Manage the content of the About section here.

about

FAQ

Manage your FAQ entries in this section.

faq

More Repositories

1

learn-vanilla-js

Open source list of paid & free resources to learn vanilla JavaScript
1,522
star
2

vue-blog-demo

A Vue.js blog demo to demonstrate proper decoupling of api data and swapping of resources/providers
JavaScript
476
star
3

vue-seo-prerender

Vue.js Tutorial: A Prerendered, SEO-Friendly Example
Vue
145
star
4

snipcart-nextjs

Demo code for a Next.js e-commerce app powered by Snipcart
TypeScript
134
star
5

wordpress-rest-api-react

PHP
92
star
6

learn-typescript

Open source list of paid & free resources to learn TypeScript
86
star
7

wordpress-react

A React demo app tied to a WordPress backend with REST API
JavaScript
82
star
8

wordpress-headless-vue

A demo for a Vue.js SPA on top of WordPress as a headless CMS
Vue
76
star
9

strapi-react-snipcart

React E-Commerce App Built on Top of Strapi
JavaScript
73
star
10

gatsby-pwa-demo

PWA Example: Progressive Web App E-Commerce with Gatsby.js
JavaScript
68
star
11

snipcart-jekyll

Demo for a Snipcart powered e-commerce store built with Jekyll
HTML
67
star
12

vue-transition-demo

Demo for "Creating Vue.js Transitions & Animation"
CSS
63
star
13

snipcart-wordpress-react

Strapping React.js on a WordPress Backend: WP REST API Example
JavaScript
61
star
14

snipcart-v2-jekyll

Demo code for an e-commerce static site with Snipcart v2.0 & Jekyll
CSS
59
star
15

gatsby-netlify-serverless

Handling Static Forms, Auth & Serverless Functions with Gatsby on Netlify
JavaScript
58
star
16

snipcart-nuxt-pwa

PWA Example: Progressive Web App E-Commerce with Nuxt.js
Vue
54
star
17

django-ecommerce-wagtail

Django E-Commerce Tutorial: Wagtail CMS + Snipcart
Python
53
star
18

react-gatsby-snipcart

A complete guide to React e-commerce + Gatsby shop tutorial
JavaScript
47
star
19

snipcart-hugo-integration

Hugo Website Tutorial with a Live Static E-Commerce Example
HTML
45
star
20

nuxt-cockpit

A Tutorial to Bundle Cockpit CMS & Nuxt.js in a full JAMstack
Vue
45
star
21

snipcart-theme-v2

Base theme for Snipcart v2
SCSS
43
star
22

next-snipcart-store

JavaScript
40
star
23

gridsome-graphql-snipcart

A Gridsome demo with Airtable as database (GraphQL queries)
Vue
35
star
24

11ty-demo-snipcart

A demo app built with JavaScript SSG 11ty
HTML
34
star
25

vue-comments-overlay

Vue
33
star
26

next-react-seo

A Next.js Tutorial to Build a SEO-Friendly React SPA
JavaScript
33
star
27

strapi-nuxt

Demo for a Snipcart powered e-commerce store built with Nuxt and managed in Strapi.
Vue
33
star
28

ponzu-hugo-snipcart

A Guide to Golang E-Commerce (w/ Go-Powered CMS Tutorial)
Go
33
star
29

vue-animation-demo

Demo for "Creating Vue.js Transitions & Animation: Live Examples"
JavaScript
33
star
30

node-js-ecommerce-koajs

Minimalistic e-commerce store built on Koa.js using Snipcart
Pug
31
star
31

snipcart-localization-v2

Localization files for Snipcart's shopping cart v2
JavaScript
30
star
32

headlesscommerce

JavaScript
29
star
33

hugo-forestry

Demo for an Snipcart powered e-commerce store built with Hugo and Forestry.io
CSS
29
star
34

express-graphql-postgres

Demo code for a GraphQL Server w/ Node.js Express
JavaScript
28
star
35

snipcart-nextjs-spa

TypeScript
27
star
36

django-ecommerce-wagtail-v3

You can read the full tutorial at https://snipcart.com/blog/django-ecommerce-tutorial-wagtail-cms | This is an updated version of this repo https://github.com/snipcart/django-ecommerce-wagtail. We now use the v3 of snipcart and tailwind for the css.
CSS
27
star
37

snipcart-gatsby-grav

Grav as Headless CMS Tied to Gatsby with GraphQL Schema
CSS
27
star
38

snipcart-graphcms-nodejs

Sample application to build a store using NodeJS Express, GraphCMS and Apollo
JavaScript
23
star
39

cloudcannon-jekyll-ecommerce

Multilingual e-commerce static website using Snipcart, CloudCannon, and Jekyll
SCSS
22
star
40

svelte-markdown-editor

Build a Svelte JS App: Magic Framework (Svelte 3 Tutorial)
HTML
22
star
41

snipcart-l10n

Snipcart v3.0 localization files
JavaScript
22
star
42

snipcart-laravel

Letโ€™s build e-commerce with Laravel. This tutorial will teach you how to build a Laravel website and integrate a custom shopping cart.
PHP
21
star
43

nextjs-storybook-example

JavaScript
20
star
44

outreachshame-docs

Outreach Shame documentation
Vue
20
star
45

buttercms-vuejs-snipcart

Build Vue.js E-Commerce on Top of Headless ButterCMS [Demo]
JavaScript
19
star
46

wagtail-snipcart

Django E-Commerce Tutorial: Wagtail CMS + Snipcart
Python
19
star
47

angular-seo-universal

SEO-Friendly Angular SPA: Universal Server-Side Rendering Tutorial
TypeScript
19
star
48

snipcart-nextjs-seo

Demo code for an SEO optimized Next.js e-commerce app powered by Snipcart
JavaScript
17
star
49

sanity-angular-snipcart

Headless e-commerce with Angular, Sanity, & Snipcart
TypeScript
17
star
50

snipcart-demo-v3

Nuxt.js static site with Snipcart e-commerce.
Vue
17
star
51

tinacms-demo

JavaScript
16
star
52

snipcart-wordpress-plugin

Wordpress plugin that adds Snipcart product post type and settings.
PHP
16
star
53

snipcart-nuxtjs-pwa

https://snipcart-nuxtjs-pwa.netlify.app/
Vue
16
star
54

snipcart-angular-tutorial

TypeScript
15
star
55

laravel-pyrocms-snipcart

Laravel E-Commerce Tutorial with PyroCMS [Live Demo]
PHP
15
star
56

snipcart-middleman-integration

Demo code for an e-commerce static site with Snipcart & Middleman.
HTML
15
star
57

directus-metalsmith-snipcart

Lookbook web app with Directus' open source headless CMS, Metalsmith, Vue.js & Snipcart
HTML
15
star
58

kirby-flat-file-snipcart

Demo code for a Snipcart-powered Kirby CMS e-commerce project.
PHP
15
star
59

scully-snipcart-store

Demo e-commerce application built with Angular, Scully and Snipcart
TypeScript
14
star
60

hugo-cloudcannon-snipcart

SCSS
11
star
61

snipcart-craft-webhooks-plugin

Sample plugin to allow inventory management in a Craft application using Snipcart
PHP
11
star
62

snipcart.github.io

Snipcart
HTML
11
star
63

Strapi-Nuxt-Snipcart

Vue
11
star
64

snipcart-wordpress-demo

PHP
10
star
65

snipcart-craft-integration

An example of a Snipcart integration with Craft CMS.
PHP
10
star
66

sleekypay

A fake payment gateway to showcase Snipcart's custom payment gateway integration functionality
TypeScript
9
star
67

snipcart-gtm

Basic GTM integration
JavaScript
8
star
68

svelte-to-do-app

JavaScript
8
star
69

pelican-blog

Pelican Tutorial: Static Blog with Search & Comments [Demo]
HTML
8
star
70

snipcart-roots-integration

Demo of a Snipcart-powered Roots static e-commerce site.
CSS
8
star
71

hugo-algolia-docsearch

Static Site Search Made Easy (with Hugo Tutorial).
HTML
8
star
72

netlify-cms-snipcart

Existing Snipcart-Jekyll integration with Netlify CMS included
CSS
7
star
73

snipcart-themes-custom

Custom themes examples for Snipcart cart
HTML
7
star
74

contentful-snipcart-middleman

A demo of a static e-commerce site (Snipcart + Middleman) with dynamic product management (Contentful)
Ruby
7
star
75

paymentrequest-custom-gateway

Snipcart Custom Payment Gateway implementation using Payment Request API
JavaScript
7
star
76

snipcart-jamstack

JAMstack e-commerce with Siteleaf & Snipcart
CSS
6
star
77

snipcart-themes

Simple overrides for Snipcart V1's theme
CSS
6
star
78

snipcart-hexo-integration

Simple integration of Snipcart in a blog powered by Hexo
CSS
6
star
79

metalsmith-directus

JavaScript
6
star
80

processwire-snipcart

Quick Processwire E-Commerce Tutorial: Lean PHP Store
PHP
6
star
81

snipcart-keyway

Angular Tutorial: E-commerce with Angular, Sanity, and Snipcart
TypeScript
6
star
82

snipcart-gridsome

Demo for a Snipcart powered e-commerce store built with Gridsome.
Vue
6
star
83

pagekit-snipcart

A Pagekit e-commerce demo with Snipcart
PHP
5
star
84

snipcart-gatsby-integration

JavaScript
5
star
85

spike-webpack-snipcart

Snipcart Integration with Webpack Powered Spike
JavaScript
4
star
86

drupal-headless-inferno

Drupal Headless Architecture with JS Framework [Live Demo]
JavaScript
4
star
87

pagekit-snipcart-extension

MVP e-commerce extension created for Pagekit.
PHP
4
star
88

snipcart-gulp-frontend-workflow

Demo code for a blog post where we show how we use 4 awesome Gulp.js plugins to enhance frontend automatization and performance.
CoffeeScript
4
star
89

gatsby-wordpress-snipcart

This is the headless WordPress demo project using Gatsby & Snipcart. You can follow the full tutorial here ๐Ÿ‘‰ https://snipcart.com/blog/headless-wordpress
JavaScript
4
star
90

intro-to-serverless

TypeScript
3
star
91

joomla-ecommerce-snipcart-plugin

Update for a Joomla! e-commerce plugin featuring Snipcart
PHP
3
star
92

blitz-demo

TypeScript
3
star
93

wyam-snipcart

Build an E-Commerce Site with Wyam, a .NET Static Content Generator
C#
3
star
94

snipcart-harp

Node.js E-Commerce with Harp JS & Snipcart
HTML
3
star
95

maroon-celery

Jamstack site created with Stackbit
JavaScript
3
star
96

snipcart-statamic-integration

Snipcart integration into a Statamic website
PHP
2
star
97

status

Snipcart Status Page
Markdown
2
star
98

snipcart-filestack-demo

Quick demo for a Filestack + Snipcart integration
CSS
2
star
99

snipcart-getcockpitcms

PHP
2
star
100

redwoodjs-demo

A demo for the full-stack Jamstack framework that is RedwoodJS
JavaScript
2
star