This documentation is designed to get you started using Loyative's embedded commerce solution. We’re excited to have you here.
1. The setup
Firstly we need to install our store script. Each store has a unique identifier that determines your store. This only needs to be inserted once per page in order for the tiles to render. The store number is placed after script.js
Script initialisation
Make sure that you have the xProduct script inserted, otherwise it will not be able to identify the product tiles on the page.
2. Insert product tiles
Product tiles form the basis of how your store will look and feel. There are 4 styles in which you can choose from.
Store
A gallery store with all of the products within your assortment available on offer.
You can arrange your store with:
• Categories
• Search function
• Shopping bag icon
Product tile
A singular column view with interchangeable components.
Full size
A full view with 2 columns. Gallery and image display with full description and options available.
Button
A simple button selector that can either be adjusted to add directly to a cart.
Store
A store object that contains all of the products available for sale in your inventory.
See the Pen Store by Reach (@reach_commerce) on CodePen.
Product tile
Minimalistic layout for products that represent their benefits efficiently with just an image and a title. The product tile is able to be adjusted to your preferences and what options the product has. You can look at some custom variations of the CSS modifications here.
See the Pen Product tile by Reach (@reach_commerce) on CodePen.
Full size
Classic layout for products that convey their value through visual images rather than through words.
See the Pen Full size tile by Reach (@reach_commerce) on CodePen.
Button
Just the buy button: Use this if your product is already showcased on a page and you need to add online checkout for it.
See the Pen Full size tile by Reach (@reach_commerce) on CodePen.
3. Design your pages
Product tiles can be customised to your look and feel. They will automatically attempt to take in the colour scheme of your site, but you can override it with custom CSS.
Here are some styling examples of how you can display your products https://reach-script.s3.eu-north-1.amazonaws.com/local-testing/tile.html
If you need a complete customisation, you can look at the CSS cookbook.
Send us an email to hello@loyative.com to get in touch with us today.
Resources
