Kindshare, the default theme

Kindshare is the theme every marketplace starts with, and the base the themes of the library are built on. When the marketplace uses a library theme, any file that theme does not change still comes from Kindshare, so what you learn here applies to every storefront.

In the theme editor (Content → Theme → Theme editor) its files are organised in three groups:

• Templates: the Liquid files of the main pages of the marketplace.
• Snippets: reusable pieces used by the templates, by the platform’s own pages and in emails.
• Assets: empty at first. Add your CSS and JavaScript there.

Front-end stack

Kindshare is built on Bootstrap 3 (grid, components and their JavaScript), jQuery and Font Awesome 4 icons, all loaded on every page. You can use their classes and plugins in your templates and in Custom JS without loading them again.

<div class="row">
  <div class="col-sm-6 col-md-4">…</div>
</div>
<i class="fa fa-heart" aria-hidden="true"></i>

Main templates

Template	Page	What Kindshare does with it
index.liquid	Homepage	Includes one homepage-* snippet per section turned on in Customize → Homepage, in a fixed order
listings/listing.liquid	Listing page	Lays out the platform’s blocks: gallery and content on the left, sidebar_block on the right, footer_block below
listings/search.liquid, listings/category.liquid	Search and category	A header with the title, the category tree, the filters in a column and the cards in a grid
listings/store.liquid	Vendor shop	The vendor’s header, presentation, attributes, listings and reviews
listings/dashboard.liquid, listings/form.liquid	The vendor’s listings, the listing form	The account menu and the platform’s forms
account/*.liquid	Sign in, sign up, account	The platform’s forms in Kindshare’s cards
orders/*.liquid	Purchases, sales, a sale	Order tables and the order’s blocks
blog/*.liquid	Blog	Post grids (layout set by Customize → General → Blog posts) and the article
page.liquid	CMS pages	A header with the page’s picture, breadcrumb and title, then the content
contact.liquid	Contact	Texts from the translations, then the contact form
maintenance.liquid	Maintenance mode	A full page using the maintenance settings

Main snippets

Snippet	What it renders
header.liquid	The logo (settings.logo), the search form, the main menu with the account links and cart (header_menu), and the category mega menu (mega_menu)
footer.liquid	The footer columns, the footer-menu menu, the social links and the copyright
listing-thumbnail.liquid	The listing card used in every grid: picture, title, price, and the vendor’s avatar, rating, name, city and category as set in the card’s display settings
user-thumbnail.liquid	The member card used in user collections
homepage-welcome.liquid	The welcome block: background picture or video, title, text, search and button
homepage-categories.liquid	The featured categories
homepage-listings.liquid	The featured listings
homepage-articles.liquid	The featured blog posts
homepage-edito.liquid	The edito block
menu-categories.liquid	The category mega menu
menu-default.liquid	Any menu printed with {% menu %} without its own snippet
order-item.liquid	An item on the order pages
order-item-email.liquid	An item in the order emails
purchase-status-flow.liquid	The status steps of an order, for the buyer
sale-status-flow.liquid	The status steps of an order, for the vendor
user-attributes.liquid	The vendor’s profile attributes, in the layout chosen in Customize → General → User attributes

Kindshare uses a few more snippets that the editor does not list: the newer homepage sections (homepage-keypoints, homepage-testimonials, homepage-partners, homepage-faq, homepage-showcase), the map, filter and search dialogs of the search pages (listings-map, listings-filters-modal, listings-search-modal) and the sign-in helpers. They are part of the theme and are updated with it.

Customise it safely

Kindshare keeps improving. A file you save in the editor stops receiving those improvements, so the less you override, the more you keep. In order of preference:

1. Settings first. Colours, logo, footer, homepage sections, menus and texts (Translations) need no code and never conflict with an update.

2. CSS next. Most visual changes are a few rules in Custom CSS. Target the classes Kindshare already prints: .card, .card_img, .product_info, .listing-name, .product_price on the listing card, for example.

   Custom CSS

   .card { border-radius: 12px; overflow: hidden; }
   .card .product_price b { color: #0b6e4f; font-size: 1.1em; }

3. Snippets before templates. To change markup, override the smallest file that holds it, usually a snippet: listing-thumbnail.liquid for the cards everywhere, header.liquid for the header.

4. Templates last, and keep their blocks. Move {{ sidebar_block }}, {{ facets }} or {{ login_form }} around freely, but do not drop them: they carry the forms and scripts that make payments, bookings and sign-in work.

Keep ids and classes Kindshare's scripts use

Kindshare’s JavaScript finds elements by their ids and classes (the mobile menu, the category mega menu, the gallery viewer, the sales search). When you rewrite the markup of a header or a list, keep the ids and classes of the elements you keep, or the behaviour attached to them stops.

Example: add a badge to the listing card

Open listing-thumbnail.liquid in the editor and add, in the list under the price:

snippets/listing-thumbnail.liquid

{% if listing.original_price > listing.price %}
  <li class="listing-badge"><span class="label label-danger">Sale</span></li>
{% endif %}

Then style it in Custom CSS:

Custom CSS

.listing-badge .label { position: absolute; top: 12px; left: 12px; }

The card is cached per listing, so this test only uses the listing’s own data, which is what a card should depend on.