Note: This section is advanced and requires an understanding of HTML/CSS. For a quick reference of CSS Selectors, click here.
When you have created your image campaign, the last step is to activate the campaign. Navigate to the LimeSpot Admin Panel > Conversion > Website Personalization > Designer.
On the left hand panel, navigate to the page where you want to add your personalized image campaign. For our example, we will just be changing the Home Page Banner. Under the Content section, click on + Add Personalization, and select Image Personalization.
You will be directed to this panel where you have to choose the Image Personalization Campaign you have created.
After selecting the campaign from the dropdown, you have to choose the Container Selector. The Container Selector has to be the unique selector of that section. Typically for Shopify stores, an ID is the safest bet. Use the finder icon to help.
Click on the check mark once it's the correct selector.
Next, use the finder icon to select the Image (Large) Selector. This is for desktop. Make sure you are selecting the image which is inside the Container.
Click on the check mark once it's the correct selector.
Preview how it would look by choosing the Audience Segment that it is targeted for.
And voila! It's done. Make sure the aspect ratio of the image you want to replace fits the original image.
Remember to SAVE and PUBLISH your changes so they are live.
Other Placement options not pictured above:
Heading Selector: The CSS selector for your main heading text. Typically this would be the <h1> tag.
Subheading Selector: The CSS selector for your subheading text. Typically this would be the <h2> tag.
Destination URL Selector: The CSS selector for your Call-to-Action button on your image.
Image (Small) Selector: The Image Selector for your mobile/tablet view.
* Please reach out via the in-app chat icon or email us at [email protected] if you are having trouble understanding how to use this functionality.