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.
<ul>
{% for link in shop.links.main %}
<li>
<a href="{{ link.url | url }}" title="{{ link.title }}"{% if link.new_window %} target="_blank"{% endif %}>
{{ link.title }}
</a>
</li>
{% endfor %}
</ul>
Hallmarks
Hallmarks (also called trust marks) are images to be inserted via a url inside your theme.
{% for hallmark in shop.hallmarks %}
<a href="{{ hallmark.url | url }}" title="{{ hallmark.title }}" {% if not new_window %}target="_blank"{% endif %}>
{% if hallmark.image %}
<img src="{{ hallmark.image }}" alt="{{ hallmark.title }}" title="{{ hallmark.title }}" />
{% else %}
{{ hallmark.title }}
{% endif %}
</a>
{% endfor %} </ul>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.
{# snippets/languages.rain #}
{% set customLanguages = [] %}
{% set curUrl = '' %}
{% for language in shop.languages %}
{% if template == 'pages/collection.rain' or template == 'pages/catalog.rain' %}
{% if page.breadcrumbs[0].url == 'collection' %}
{% set curUrl = ((language.url ~'collection') | url) %}
{% elseif page.breadcrumbs[0].url == 'catalog' %}
{% set curUrl = ((language.url ~'catalog') | url) %}
{% elseif page.breadcrumbs[0].url == 'brands' %}
{% set curUrl = ((language.url ~'go/brand/'~ collection.brand_id) | url) %}
{% elseif page.search %}
{% set curUrl = ((language.url ~'search/'~ page.search) | url) %}
{% else %}
{% if template == 'pages/collection.rain' %}
{% set curUrl = ((language.url ~'go/category/'~ collection.category_id) | url) %}
{% elseif template == 'pages/catalog.rain' %}
{% set curUrl = ((language.url ~'go/category/'~ catalog.category_id) | url) %}
{% endif %}
{% endif %}
{% elseif template == 'pages/product.rain' %}
{% set curUrl = ((language.url ~'go/product/'~ product.id) | url) %}
{% elseif template == 'pages/textpage.rain' %}
{% if textpage.category_id %}
{% set curUrl = ((language.url ~'go/category/'~ textpage.category_id) | url) %}
{% else %}
{% set lastPart = request.url | split('/') %}
{% set lastPartLength = (lastPart | length-2) %}
{% set serviceUrl = '' %}
{% set serviceUrl = lastPart[lastPartLength] %}
{% set curUrl = ((language.url ~'service/'~ serviceUrl) | url) %}
{% endif %}
{% elseif template == 'pages/blog.rain' %}
{% set curUrl = ((language.url ~ blog.url) | url) %}
{% else %}
{% if template != 'pages/index.rain' %}
{% if template != 'pages/account-dashboard.rain' %}
{% set lastPart = template | replace({'pages/': '', '.rain': '', '-': '/'}) %}
{% else %}
{% set lastPart = 'account' %}
{% endif %}
{% else %}
{% set lastPart = '' %}
{% endif %}
{% set curUrl = ((language.url ~ lastPart) | url) %}
{% endif %}
{% set customLanguages = customLanguages | merge({ (language.code) : {'url': curUrl, 'title': language.title, 'code': language.code, 'active': language.active} }) %}
{% endfor %}
{% for language in customLanguages %}
<a lang="{{ language.code }}" title="{{ language.title }}" href="{{ language.url | url }}">
{{ language.code }}
</a>
{% endfor %}
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
{% for tag in tags%}
<li>{{ tag.title }}</li>
{% endfor %}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:
{% for products in collection.products %}
<img src="{{ product.image | url_image('262x276x1', product.fulltitle) }}" width="262" height="276" alt="{{ product.fulltitle }}" title="{{ product.fulltitle }}" />
{% endfor %}Messages.rain
This outputs messages from the platform (error messages, added to cart etc...)
{% if page.messages %}
<div class="messages">
{% if page.messages.info %}
<ul class="info">
{% for message in page.messages.info %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% if page.messages.success %}
<ul class="success">
{% for message in page.messages.success %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% if page.messages.error %}
<ul class="error">
{% for message in page.messages.error %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endif %}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
{% if template == 'pages/index.rain' %}
{% for id in newest %}
{% if product.id == id.id %}
<div class="sale-new">
New
</div>
{% elseif product.price.price_old %}
<div class="sale-new">
Sale
</div>
{% endif %}
{% endfor %}
{% elseif product.price.price_old %}
<div class="sale-new">
Sale
</div>
{% endif %}Add to cart Button
<form action="{{ ('cart/add/' ~ product.vid) | url }}" id="product_configure_form" method="post">
{% if product.options or product.variants or product.custom %}
<div class="product-option row">
<div class="col-md-12">
{{ product | html_product_configure | raw }}
</div>
</div>
{% else %}
<input type="hidden" name="bundle_id" id="product_configure_bundle_id" value="">
{% endif %}
<div class="product-price row">
<div class="price-wrap col-xs-5 col-md-5">
{% if product.price.price_old %}
<span class="old-price">{{ product.price.price_old | money }}{% if shop.settings.legal.mode == 'strict' %} {{ 'SRP' | t }}{% endif %}</span>
{% endif %}
<span class="price">{{ product.price.price | money }}{% if shop.settings.legal.mode == 'strict' %} <small>*</small>{% endif %}</span>
{% if shop.b2b %}<small class="price-tax">{{ 'Excl. VAT' | t }}</small>{% else %}<small class="price-tax">{{ 'Incl. VAT' | t }}</small>{% endif %}
</div>
<div class="cart col-xs-7 col-md-7">
<div class="cart">
{% if product.stock.available %}
<input type="text" name="quantity" value="{{ product.quantity }}" />
<div class="change">
<a href="javascript:;" onclick="updateQuantity('up');" class="up">+</a>
<a href="javascript:;" onclick="updateQuantity('down');" class="down">-</a>
</div>
<a href="javascript:;" onclick="$('#product_configure_form').submit();" class="btn glyphicon glyphicon-shopping-cart" title="{{ 'Add to cart' | t }}" {% if shop.language == 'de' %}style="padding: 0px 10px;"{% endif %}>
<span>{{ 'Add to cart' | t }}</span>
</a>
{% endif %}
</div>
</div>
</div>
</form>Review stars
Displays product reviews with stars
{% set productScore = product.score * 5 | number_format(0) %}
<div class="stars">
{% for i in 1..productScore %}
<span class="glyphicon glyphicon-star"></span>
{% endfor %}
</div>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:
{% if product.bundles %}
{% for bundle in product.bundles %} Inside that loop, you will need a form and a hidden input using the following:
<form id="bundle_configure_form_{{ bundle.id }}"><input name="main_product_variant" value="{{ product.vid }}" type="hidden">Then we need another for loop for all the products involved in the bundle
{% for bundleProduct in bundle.products %}To display dropdowns with variants & product sets, add this snippet:
{{ bundleProduct | html_bundle_item_configure(product, bundle) | raw }}
We now need to add Stock display and an Add to cart button :
<a href="#" class="btn add-bundle-btn" {% if not bundle.stock.available %} style="display:none"{% endif %} onclick="javascript: add_product_bundle('{{ bundle.id }}'); return false;"> {{ 'Add to cart' | t }} </a>
<span class="out-of-stock" {% if bundle.stock.available %} style="display:none"{% endif %}><em>{{ 'Out of stock' | t }}</em></span>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:
{% if product.options or product.variants or product.custom %}
{{ product | html_product_configure | raw }}
{% else %}
<input type="hidden" name="bundle_id" id="product_configure_bundle_id" value="">
{% endif %}Categories.rain
This will display categories from within any page.
<div class="row">
<ul>
{% for category in shop.categories %}
<li class="item{% if category.url is active %} active{% endif %}">
<a class="itemLink {% if category.url is active %} active{% endif %}" href="{{ category.url | url }}" title="{{ category.title }}">{{ category.title }}</a>
{% if category.subs %}
<ul class="subnav">
{% for category in category.subs %}
<li class="subitem">
<a class="subitemLink{% if category.url is active %} active{% endif %} " href="{{ category.url | url }}" title="{{ category.title }}">{{ category.title }}</a>
{% if category.subs %}
<ul class="subnav">
{% for category in category.subs %}
<li class="subitem">
<a class="subitemLink{% if category.url is active %} active{% endif %}" href="{{ category.url | url }}" title="{{ category.title }}">{{ category.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div> 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:
{% for product in featured %}
<li>{{ product.title }}</li>
{% endfor %}You can also display the headlines users upload to Design > Headlines in a slider:
{% for headline in headlines %}
<li>
{% if headline.image %}
{% if headline.url %}<a href="{{ headline.url | url }}" title="{{ headline.title }}">{% endif %}
<img src="{{ headline.image | url_image('', headline.title) }}" width="1138" height="400" alt="{{ headline.title }}" />
{% if headline.url %}</a>{% endif %}
{% endfor %}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.
{% for category in brands %}
<li>
<a href="{{ category.url | url }}">
{% if category.image %}
<img src="{{ category.image | url_image('200x100x2') }}" width="150" height="75" alt="" />
{% else %}
<span>{{ category.title }}</span>
{% endif %}
</a>
</li>
{% endfor %}
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
{% set pagination = collection | paginate %}
{% if collection.pages > 1 %}
<div>
<div>{{ 'Page $1 of $2' | t(collection.page, collection.pages) }}</div>
<ul>
<li class="prev{% if pagination.previous %} enabled{% else %} disabled{% endif %}"><a href="{{ pagination.previous.url | url }}" title="{{ 'Previous page' | t }}"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
{% for part in pagination.parts %}
{% if part.url %}
<li class="number{% if part.active %} active{% endif %}"><a href="{{ part.url | url }}">{{ part.title }}</a></li>
{% endif %}
{% endfor %}
<li class="next{% if pagination.next %} enabled{% else %} disabled{% endif %}"><a href="{{ pagination.next.url | url }}" title="{{ 'Next page' | t }}"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
</ul>
</div>
{% endif %}
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' %}