All Collections
1:1 Product Recommendations
Use an Empty Div to Anchor your LimeSpot Boxes
Use an Empty Div to Anchor your LimeSpot Boxes
Written by Will Wadman
Updated over a week ago

Sometimes, when you use multiple apps on your website, they will confuse one another when they are loaded and cause one or more app features not to populate or to populate in an undesirable way. To prevent any overlap between your apps or errors from occurring, you may want to consider using an “empty div” to “anchor” your LimeSpot app features.

In this article:

  • Why use an Empty Div?

  • Step-by-Step Guide

  • Conclusion

Why use an Empty Div?

As website content changes, particularly with the addition of promotional blocks or banners, the position of the LimeSpot Recommendation Box may shift. By allocating a dedicated space for the Recommendation Box using an empty `div,` the position will remain constant regardless of other content changes.

Step-by-Step Guide

Step 1: Identify the Desired Location

Determine where you want the LimeSpot Recommendation Box to appear on your webpage. Common placements include below the header, between content sections, or near the footer.

Step 2: Open the Website's HTML File

Locate and open the HTML file where you want the LimeSpot Recommendation Box to be displayed. Typically, this is an index.html or a similar file, depending on your website's structure.

Step 3: Add an Empty Div

Insert an empty `div` element in the HTML file at the location identified in Step 1. Assign it a unique ID so that it can be specifically targeted. For example:

<div id="limespot-recommendation-box"></div>

Step 4: Add CSS Styling (Optional)

Optionally, you can add CSS styling to the `div` to control its size, position, margin, padding, etc. This can be done within a CSS file or inline within the HTML. For example:

#limespot-recommendation-box {
height: 300px;
width: 100%;
margin: 20px 0;

Step 5: Configure LimeSpot

Log in to your LimeSpot admin panel and configure your Recommendation Box to target the `div` you just created. Use the unique ID assigned to the `div` as the target.

To do this:

  • Open the webpage in LimeSpot's Designer

  • Click on the recommendation box you want to lock into place

  • Choose "Placement"

  • Place your unique div in [where?]

Step 6: Test Your Website

After saving changes to your HTML file and LimeSpot configuration, check your website to make sure the LimeSpot Recommendation Box appears in the desired location and does not shift when new promotional blocks are added.


By using an empty `div` element, you can create a dedicated space for the LimeSpot Recommendation Box, ensuring its position remains consistent. This prevents shifting and maintains a more organized and professional appearance for your website.

Did this answer your question?