For developers and agencies, Studio includes a code editor for fine-tuning how LimeSpot looks and behaves on your store. Add store-wide CSS and JavaScript, or make your own copy of a LimeSpot box template. Most stores never need this: the box settings and Settings panel cover colors, fonts and layout.
Availability
Plan: Growth Agents plan · Platform: SHOPLINE · Requires HTML, CSS and JavaScript knowledge
Before you publish
Code changes can break how LimeSpot shows on your store. Test in Studio's preview, in both Desktop View and Mobile View, before you publish.
Open the code editor
In the Studio top bar, click the < > button (Open code section).
Wait for the editor to load. It opens docked under the top bar.
Use the controls on the editor's right edge to Dock to top, Dock to bottom, Increase height or Decrease height, or drag the edge to resize. Studio remembers your choice in this browser.
What you can edit
File | What it does |
Global.css | CSS loaded on every page where LimeSpot runs |
Global.js | JavaScript run on every page where LimeSpot runs |
Custom templates | Your own copy of a LimeSpot box or component template, with Markup, CssStyles, JavaScript and Overview tabs |
The editor doesn't change your theme's own files.
Add CSS or JavaScript
In the Components list, click Global.css or Global.js.
Type your code. The canvas updates as a live preview.
Click Save in the top bar, then Publish.
Useful LimeSpot CSS classes
Class | Element |
| The whole recommendation box |
| Box title |
| Link to the product page |
| Product image container and image |
| Product title |
| Vendor name |
| Prices |
| Sale tag |
| Add-to-cart button |
For example, to center box titles and make them bold:
.ls-recommendation-box .ls-box-title { text-align: center; font-weight: 700; }To style only one box, add your own class name in the box's Extra CSS Classes setting and target that class.
Tip
If a box is wider than the rest of your page, add your theme's container class (often page-width, container or wrapper) in the box's Extra CSS Classes setting.
Run code when a box loads
LimeSpot fires a limespot:recommendationBoxLoaded event on document each time a box finishes loading. The box element is in event.detail.box.
document.addEventListener('limespot:recommendationBoxLoaded', function (event) {
var box = event.detail.box;
box.classList.add('my-loaded-box');
});Customize a box template
In the editor, choose New Customization.
Pick a base template under Built-in templates.
Enter a Name in PascalCase, for example
MyCustomBox.Check I understand that custom templates require technical knowledge and click Create.
Edit the Markup, CssStyles and JavaScript tabs.
Click Save, then Publish.
To delete a custom template, type "delete" to confirm.
Keep templates up to date
When LimeSpot updates a built-in template that your customization is based on, your copy becomes outdated. A number badge appears on the < > button. Until you resolve it, you can't create, rename or delete templates (Global.css and Global.js stay editable).
Open the editor and click Migrations.
Compare LimeSpot's new version with yours and resolve each change.
Click Apply & Preview to check the result, then Save and Publish.
Troubleshooting
You see | Why | What to do |
"Code editor failed to load" | The editor didn't respond in time | Check ad blockers, VPN or proxy settings, then click Retry |
"Script has errors — changes were not applied" | Global.js has a syntax error | Fix the error. Your edits are kept, but the preview doesn't update until then |
"Template has errors — changes were not applied" | A template has an error | Fix the error in the template |
"Code editor did not confirm its pending changes (…)" | Your last edits weren't confirmed in time | Wait a moment and save again |
"PascalCase required (e.g. MyCustomBox)" | The template name isn't valid | Use a name like |
Editing is locked with "Migrations pending" | A template update needs your review | Resolve it in Migrations |