Navigate to the box designer settings by going to your LimeSpot Admin Panel > Personalizer > Recommendation Boxes and click on the black Customize button on the top right corner.
Once inside the Box Designer, you will be able to preview your website on the right side and a box 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 recommendation boxes generate random products (alphabetical products) and this is not the accurate recommendations that you will see in your live store.
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.
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.
- 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: Change the title of the 'Add to Cart' button to anything you would like (ie. Buy Now, etc.)
- 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 Confirmation: Customize 'Item Added To Cart' Notification.
- Rounded Corners: 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.
- Placement Sibling: Change the placement of any of our recommendation boxes.
- Placement Disposition: 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 three 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 'Box 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:
- Show: Enable/ disable recommendation boxes using the green slider 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' and 'Grid'. A carousel will render the items in a horizontal box, whereas a grid will show products in a 4x4 format.
- 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 dotted 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.