Navigate to the designer settings by going to your LimeSpot Admin Panel > Conversion > Website Personalization and click on the black Designer button.
Once inside the Designer, you will be able to preview your website on the right side and a designer panel on the left, which will help in making tailored customizations (settings related to the design or appearance of the recommendation boxes).
NOTE: The products in the recommendation boxes within the Designer are random sample products from your store and half of the products are discounted to show sample sale products. On your live store, the actual calculated recommended items will show in the Intelligent Recommendation Boxes.
Global Settings
The Global Settings section will apply the customization settings to all the boxes enabled on your store's pages. This is ideal for changes that you would like to apply to every box throughout your store as it will help avoid repetition of similar changes.
The Global Settings give you a few more options than the Page Settings or the Individual Box Settings. There are additional E-commerce, General, Colors, Typography and Code drop-down menus.
E-commerce: where you can pick the theme that you are using for your store (i.e. Shopify Themes such as Brooklyn, Debut, Supply, etc.). LimeSpot Personalizer will pre-load some customizations to match the look and feel of your store automatically.
General: Use this menu to edit the sale tag's look and feel, enable/disable the .00 Price Decimals, enable/disable Zoom on Hover of our images, swap the position of the original price and sale price under "Price Order", enable/disable review stars and loyalty points.
Colors: Use this menu to change the colors of Product Titles, Prices, Sale Tag, Add to Cart and Next/ Prev Buttons.
Typography: Use this menu to change Box Title, Product Title, Product Prices and Sale Sign fonts and font sizes. If you cannot find your specific font, you can also select Custom from the drop-down menu and insert your desired font.
Code: Use this section to input LimeSpot Personalizer specific CSS or JavaScript changes which will be applied directly to your store.
Page Settings (i.e. Home page, Product page, Collection page, Cart page etc.)
The Page Settings section will change the appearance of the recommendation boxes only on that specific page (i.e. Home Page). For example, if you click on the homepage of your store and select 'Home Settings' from the left panel, you will access the page settings for the homepage. Changes made here will not affect boxes on the product, collection or cart page.
Image
Size: Change the dimensions of the recommendation box by changing the width and height settings. The inherited amount (shown in grey below the empty fields) highlights the current dimensions of the boxes, which best matches your theme.
Spacing: Change the spacing of the items within the recommendation carousels. This field changes the amount of ‘white space’ between two items/ products that lay adjacent to each other within a recommendation box carousel.
Rounded Corners: Alter the look of a product image by changing the sharpness of the image corners. A radius of 1 or more will make the corners more rounded.
Hover Mode: The product recommendations can show a second image when the product is hovered over.
Navigation (Next/Prev Buttons)
Mode: Choose the mode how the arrows appear in the recommendation boxes. Pop out mode makes the box arrows appear outside the recommendation box area, it slides outwards the box when mouse hovers over the recommendation box. Appear in Place mode makes the box arrows appear inside the recommendation box area, it will stay in place when mouse hovers over the recommendation box.
Type: Choose the design of the arrow you would like the recommendation box to have (ie. Striking Chevron, Circle (Full), Circle (Arrow), Circle (Chevron))
Auto Scroll: Select how long (in seconds) you want for the auto scroll to be enabled (ie. every 5 seconds the recommendation box auto scrolls to the next recommendations)
Quick Actions
Add to Cart Button - Title: Change the title of the 'Add to Cart' button to anything you would like (ie. Buy Now, etc.)
Add to Cart Button - Mode: Choose how you would like the Add to cart button to appear within the boxes. You can disable the button, have the button only appear when you hover over a product or always display the button.
Add to Cart Button - Corner Radius (px): Alter the look of the Add to Cart button by changing the sharpness of the image corners. A radius of 1 or more will make the corners more rounded.
Add to Cart Confirmation: Customize 'Item Added To Cart' Notification. Try {items} added to cart to include the name of the products being added to cart.
Add to Cart Notification Mode: Choose the add to cart behaviour once an item is added to cart. It is set to reload the page by default. You can change this action by selecting from the dropdown with these options: Reload Page, Go to Cart Page, Notification Only.
Placement
Method: This tells the box where to go based on the sibling you have selected. The options include: Insert Before, Insert After, or Replace (hides/replaces the entire section with our box).
Sibling: Use the find icon to select a Unique CSS Selector on the web page that tells our boxes where to be placed.
Disposition: Same as "Method" (this option is available if you would rather use a number to define the placement). If you want to place the boxes below the section chosen for Placement Sibling, add 1 (positive integer). If you would like to place them above, do not insert anything in that field.
CSS Classes: Add classes like container, page-width, row and wrapper to align the recommendation boxes with the width of your website. Note that this is a space-separated list.
If you need more information about the four properties, go to this article.
Individual Box Settings
The Individual Box settings can be accessed when you click on a specific recommendation box on a page from the left panel of the Designer. You will see the same properties as the Page Settings menu, with an additional 'Basic' sub-menu. For example, if you are on the Home Page and select the 'Most Popular' recommendation box:
General
Show: Enable/disable recommendation boxes using the checkbox next to ‘Show’
Title: Change the title of the recommendation boxes to what you prefer. You can also use different languages if you like!
Style: Switch styles between 'Carousel', 'Grid' and 'Bundle'. A carousel will render the items in a horizontal box, whereas a grid will show products in a 4x4 format. The bundle style is available on the Product Pages only and allows you to show Amazon-like style recommendations.
Number of items: Change the number of items/ products you would like to display within the recommendation box carousel (1-20 items can be displayed)
TIP: You can also access the Individual Box settings by clicking on the pencil icon at the upper left corner of the box. A grey background will appear when you hover over the specific box you want to edit.
LimeSpot Tip: Use the mobile icon at the bottom of the screen to switch between desktop and mobile view.