Skip to main content
All Collections1:1 Product RecommendationsFAQ
Use an empty div element to anchor your LimeSpot personalizations
Use an empty div element to anchor your LimeSpot personalizations
Written by Will Wadman
Updated over a week ago

Having multiple apps on your store can create conflicts and lead to unwanted behavior such as overlapping or shifting of elements. To prevent this, consider using an empty div element to anchor your LimeSpot app features.

This article is technical in nature and require understanding of HTML and CSS.

Why use an empty div?

Allocating a dedicated element for LimeSpot's personalizations using an empty div, ensures that the position will remain constant regardless of other content changes. Here's a step by step guide to implement this solution.

Step 1: Identify the desired display location

Determine where you want the LimeSpot recommendation xox to appear on your page. Common placements include below the header, between content sections, or near the footer.

Step 2: Open the corresponding HTML file

Locate and open the corresponding HTML file in your theme. 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 page in LimeSpot's Designer

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

  • Choose Placement

  • Place your unique div in the Sibling field

Step 6: Test your website

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

πŸ€” Questions? Need support? Contact us via the in-app chat or email.

Did this answer your question?