In Tweakwise, visuals are conceptually the same as products. This means this is not just limited to types of visual but any time of content. Include your desired content items in your existing product feed or create a seperate feed.

Before you begin

Before implementing, think about these topics:

• Where will the data come from?
• What you want to display and how?
• Is there a difference between mobile vs desktop?
• Determine image ratios, to keep a consistent display, these should always be the same.
  For more information, read A Deep Dive Into object-fit And background-size In CSS.

Implementation

To make use of visuals, follow these steps:

• Import the items: append them to your exisiting feed, create a seperate feed or make use of our Channable Channel.
• Add an item-type attribute to the feed: add a specific attribute to store the item type, e.g., item_type.
  XML

  <item>
    <id>promo-2024-04-garden</id>
    <name>Inside out</name>
    ...
    <attributes>
      ...
      <attribute>
        <name>item_type</name>
        <value>visual</value>
      </attribute>
      ...
    </attributes>
  </item>
  

• Configure the attribute as type characteristic: contact Tweakwise to configure the attribute as a defining characteristic so that the Front-end API can use it in the type field:
  JSON

  {
    "type": "visual",
    "itemno": "banner-freeshipping",
    "title": "Free shipping Banner",
    "image": "https://sttweakwisecustomized.blob.core.windows.net/content/shop/banner-freeshipping.png",
    "url": "https://www.tweakwise.com/",
    "attributes": []
  }
  

• Differentiate when rendering: When rendering the page, you can differentiate based on the type attribute to display either a product or a visual tile.

Additional options

• Responsive support: if you want to display different images on mobile and desktop, provide alternative images in the attributes. Contact us to expose the attribute in the API response. In your frontend, use the correct image on the respective breakpoints.

Support

Currently we support the following platforms out of the box:

Magento

• Magento2Tweakwise v8.1.0 and higher
• Magento2TweakwiseHyva v4.1.0 and higher

Tweakwise JS

All Tweakwise JS implementations that run on Plugin Studio are ready to use visuals.
Currently we support one image for all breakpoints, an alternate image for desktop/mobile is not supported.

Troubleshooting

If your platform supports items other then products, and it is not showing up in your lister pages, there are a couple of things to check.

Magento

• Check if your version supports item-types.
• Merchandising Builder > Enabled: Yes.
  The Merchandising Builder section is only visible when Ajax Filtering is on.
• Layered navigation > Ajax Filtering: Yes.
  The Merchandising Builder section is only visible when Ajax Filtering is on.
• Enable Varnish
  Varnish is required for Builder.