Introduction

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 do 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: so 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
  • Expose the attribute in the API response
  • In your frontend, use the correct image on the respective breakpoints.
• Flexible width & height support: if you want to display your visual on different column spans, see Flexible width for Builder items.

Why do I need this?

But I can do this myself using Storyblok! Yes, you could. You could solve this within your platform but you'll quickly run into issues.

Suppose you have 24 items on a page, 3 products per row. If you want to display one visual on a page, you'll end up with a "gap" of 2 tiles at the end of the page because you now have 13 items. Pretty ugly but the customer may think there are no more products in that category. On subsequent pages, this problem will only get worse.

In the end, you want to solve this issue in one central place. That's the big advantage that Tweakwise offers: we ensure that the position of such an element is fixed within the grid. No issues with gaps or paging.

Because Tweakwise is highly flexible with content, we actually complement Storyblok very well. Storyblok serves as the source for your visual/content blocks, which can be imported separately via a content feed.

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 < 8.4.2

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