Assign image per category in Catalog

[Omar]

Hello team! Wanted to ask you if it’s possible to assign an image to a Category? I’m attaching an example of what the client wants to achieve.

[ademir]

A way to do this enhancement in the UX is creating an Entity in Master Data with the ID of each category and a URL with an image of the respective category. In the frontend, you’ll be able to consume all information from this entity and create the experience desired.

[eduardo]

Omar, check this example: Cafés Raros e Premiados, Especiais e Mais | Mercafé (mercafe.com.br)

In this case there is an HTML placeholder (it’s not IO) inside the category template. You can reach the DrivenCx team for more details.

[rodrigo.dellacqua]

I would avoid doing additional calls for anything on the page for that, so I would avoid Master Data. I would keep it simple, simple still works for that. What I would do;

• Create an HTML element as a placeholder to hold the image
• On that element, create a css class for each category based on their name
• Create an Image Sprite with all the images for that background
• On the CSS, I would position and fetch the images from the sprite

Stores don’t often change category’s names and images so this approach will be sustainable in my opinion. If the situation was different, and the content being displayed changed more often, then I would use the approach suggested by @ademir.

[gustavo.rios]

There are several ways to accomplish that. On VTEX IO Store Framework you can use infocards, image, link, or rich-text… Here is an example that works both on mobile and desktop:

"flex-layout.row#categories-box": {
  "title": "CATEGORIES BOX",
  "children": [
    "flex-layout.col#categories-box",
    "flex-layout.col#categories-box",
    "flex-layout.col#categories-box",
    "flex-layout.col#categories-box"
  ],
  "props": {
    "preserveLayoutOnMobile": "true",
    "blockClass": "categories-box"
  }
},
"flex-layout.col#categories-box": {
  "title": "CATEGORIES BOX",
  "children": [
    "image#category",
    "link#category"
  ],
  "props": {
    "blockClass": "categories-box"
  }
},
"image#category": {
  "title": "CATEGORIES IMAGE",
  "props": {
    "link": "/",
    "src": "assets/placeholder-image-300x225.png",
    "blockClass": "category-box",
    "maxWidth": "100%"
  }
},
"link#category": {
  "title": "CATEGORIES TEXT",
  "props": {
    "href": "/",
    "label": "Category",
    "blockClass": "link-category"
  }
},