These snippets can help you with validation or to get started with specific functionality that may seem a bit confusing at first.
- fixed.rain
- custom.rain
- tags.rain
- products.rain
- messages.rain
- product.rain
- bundleproduct.rain
- categories.rain
- index.rain
- brands.rain
- collection.rain
Fixed.rain
See Custom.rain
Custom.rain
Cart preview
You can use this snippet to display a cart preview on all pages (can be useful in fixed.rain also) and is usually displayed in the header.
{% for product in page.cart.products %}
{% if product.bundled %}
{# SHOW THE BUNDLE'S MAIN PRODUCT IMAGE #}
<a href="{{ product.url }}"><img src="{{ product.image | url_image('50x100x2', product.fulltitle) }}" /></a>
{# SHOW THE BUNDLED PRODUCT IMAGES #}
{% for product in product.bundled |slice(1, 2) %}
+ <a href="{{ product.url }}"><img src="{{ product.image | url_image('25x50x2', product.fulltitle) }}" /></a>
{% endfor %}
{# SHOW THE BUNDLED PRODUCT TOTAL PRICE #}
{% set bundleprice = 0 %}
{% for product in product.bundled %}
{% set bundleprice = bundleprice + product.price.price %}
{% endfor %}
<div style="float: right; height: 100px; line-height: 100px;">
<small style="opacity: 0.6;">(x{{ product.quantity }})</small> {{ bundleprice | money_with_currency }}
</div>
<br /><small>{{ product.title }}</small>
{% else %}
{# OTHERWISE SHOW NORMAL PRODUCT + IMAGES + PRICE #}
<a href="{{ product.url }}">
<img src="{{ product.image | url_image('50x100x2', product.fulltitle) }}" />
</a>
<div style="float: right; height: 100px; line-height: 100px;">
<small style="opacity: 0.6;">(x{{ product.quantity }})</small> {{ product.price.price | money_with_currency }}
</div>
<br /><small>{{ product.title }}</small>
{% endif %}
<br />
{% endfor %}
Default Navigation
Default Navigation is located in the Design > Navigation area of the backoffice and allows the users more control over their shop’s navigation. We ask that you allow this control in your themes.
Hallmarks
Hallmarks (also called trust marks) are images to be inserted via a url inside your theme.
Language Switcher
We ask that users remain on the same page while switching languages so that they are not lost while being redirected to the home page, which should help with conversion. For this example you need to create a new snippet (in this case called languages.rain) and is included in custom.rain.
Mastercard logos
Some themes use customized versions of payment provider logos. Mastercard and/or Maestro logos and will have to be updated if you are using the older versions of these logos. Please consult the official branding guides at the following url:
https://brand.mastercard.com/brandcenter/mastercard-brand-mark/downloads.html
Tags.rain
Use this snippet to display all shop tags at shop.url/tags
Products.rain
Products.rain (not to be confused with product.rain) can be created in order to display repeated product information in a grid. In this example, we display the product’s main image:
Messages.rain
This outputs messages from the platform (error messages, added to cart etc...)
Product.rain
Unit pricing
Certain users may need to display unit prices to indicate certain prices affected by weight or volume, to charge a certain price per kilo, for example. There is a global setting and these prices are set at the product level. If it exists, this price must be displayed in both the product page and the collection/category pages, in the same view as the the price.
{% if shop.settings.price_per_unit == 'enabled' and product.unit %}
{{ 'Unit price' | t }}: {{ product.unit.price | money }} / {{ product.unit.unit }}
{% endif %}
Strict Legal mode
Strict legal mode is a setting activated through Settings > Advanced that should display an indication of whether tax is included or not and a link to the Shipping Rules page. This must be displayed in both the product page and the collection/category pages, in the same view as the the price.
{% if shop.settings.legal.mode == 'strict' %}
*
{% if shop.b2b %}
{{ 'Excl. VAT' | t }}
{% else %}
{{ 'Incl. VAT' | t }}
{% endif %}
{{ 'Excl. $1' | t('<a href="' ~ 'service/shipping-returns' | url ~ '">' ~ 'Shipping costs' | t ~ '</a>') | raw }}
{% endif %}
Discount rules [udpated 26/10/2017]
This code will correctly show the discount codes set up by your users. The updated version of this code only displays Unit pricing discount if the users enabled the global setting.
{% if product.discounts or product.discount_rules %}
<ul>
{% if product.discounts %}
{% for discount in product.discounts %}
<li>
<strong>
{{ 'Buy $1 for $2 each and save $3' | t (discount.quantity, discount.price | money, discount.percentage | percentage) }}
{% if discount.unit and shop.settings.legal.mode == 'strict' and shop.settings.price_per_unit == 'enabled' %}
({{ discount.unit.price | money }} / {{ discount.unit.unit }})
{% endif %}
</strong>
</li>
{% endfor %}
{% endif %}
{% if product.discount_rules %}
{% for discount_rule in product.discount_rules %}
<li>
<strong>{{ discount_rule }}</strong>
</li>
{% endfor %}
{% endif %}
</ul>
{% endif %}
Add variants to Wishlist
You now have the ability to add separate variants to the wishlist:
{{ ('account/wishlistAdd/' ~ product.id ~ '?variant_id=' ~ product.vid) | url }}" title="{{ 'Add to wishlist' | t }}">{{ 'Add to wishlist' | t }}</a>
New / On Sale buttons
Add to cart Button
Review stars
Displays product reviews with stars
Rich Snippets
Rich Snippets (also known as Structured Data) affect the way that Google sees and displays products from Lightspeed shops.
You can validate your product pages at the following url:
https://search.google.com/structured-data/testing-tool/u/0/
Necessary items:
Product |
Review |
@type |
@type |
name |
datePublished |
image |
description |
description |
itemReviewed @type name |
itemCondition |
author @type name |
aggregateRating @type ratingValue bestRating reviewCount |
reviewRating @type worstRating ratingValue bestRating |
offers @type priceCurrency price availability |
Google and Schema.org both provide guides and examples on how to add these properties:
Product:
Reviews:
Bundleproduct.rain
v2 Product Bundles
NOTE: Product Bundles were updated in October 2016, please update your code.
v2 bundles
Merchants are now able to add more than 5 products and product variables or product sets are now available as drop-downs within the bundles.
Enabling v2 bundles
Please make sure the gui.js core file is included in your custom.rain file and that the bundles were created under the v2 backoffice.
In your product.rain file or bundleproduct.rain file, first open a loop that checks for each bundle:
Inside that loop, you will need a form and a hidden input using the following:
Then we need another for loop for all the products involved in the bundle
To display dropdowns with variants & product sets, add this snippet:
Make sure you close all the forms and loops correctly, go back your product.rain and make sure this if clause is present after opening your main product form:
Categories.rain
This will display categories from within any page.
Index.rain
Index.rain displays the home page of your theme. There are many values that are unique to the home page, accessing the featured products for example:
You can also display the headlines users upload to Design > Headlines in a slider:
Brands.rain
Use this snippet to display all shop brands at shop.url/brands
NOTE: the values contained within shop.brands will allow you to access brands from any page of the store, but will be limited to 10 brands that contain the most products. Use the following snippet, only in brands.rain, to display every single brand used in your shop through the /brands page.
Changes to all Asset files may require some time to get "pushed" to all users of your theme.
Collection.rain
Collection.rain is used to display the shop’s full line of products at shop.url/collection . You can use the following snippet to add pagination within your collection pages
List mode
There is a setting in Settings > Advanced that lets users choose their desired layout for the category pages. Your theme must check this setting and display your collection pages accordingly:
{% if collection.mode == 'list' %}