Editable Product Recommendations


Image based product recommendations can be inserted into an HTML template. This will require an attribute "om:editable" with value "product-recs". As with other editable attributes, this will also require an om:id attribute.


Inside this HTML tag should be the content to render. In the HTML code, this works similarly to the product selector. The main difference is that we cannot loop over the products as they are not known until the image is sent to a user's browser.


Here is an example using a loop to display 3 images.

<div om:id="prod-recs-recent" om:editable="product-recs">
    {% if recs.baseClickUrl and recs.baseImageUrl %}
        {% for x in range(3) %}
            <a href="{{recs.baseClickUrl}}&slot={{x+1}}&email={{ profile.email | urlencode }}&cachebuster={{ email.campaign_identifier | urlencode }}" target="_blank">
                <img src="{{recs.baseImageUrl}}&slot={{x+1}}&size=120x180&email={{ profile.email | urlencode }}&cachebuster={{ email.campaign_identifier | urlencode }}">
            </a>
        {% endfor %}
    {% else %}
        <p>Recommendations not yet configured</p>
    {% endif %}
</div>


recs is an object that will contain the configuration for the recommendations. At present, the following properties are provided:

  • instance - the ID of the product recommendations instance
  • accountHash - the public identifier for the account
  • showPrice - indicates if the recommendation image should include the price of the product
  • baseClickUrl - base URL for the link. Parameters can be overridden by just appending them.
  • baseImageUrl - base URL for the image. Parameters can be overridden by just appending them.

The following query string parameters are supported:

  • tc - hexadecimal text colour without leading # or 0x
  • pc - hexadecimal price colour without leading # or 0x
  • font - one of this list: aleo, amble, arial, arial-bold, chunkfive, firasans, opensans, opensans-bold, sourcesanspro, chinese, gillsans, georgia, timesnewroman
  • size - image size in pixels eg 150x200
  • ts - text size in pixels. Maximum is 20px. Do not specify unit
  • ps - price size in pixels. Maximum is 20px. Do not specify unit