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
Siblingfield
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.