How to add a custom balloon layout to an already finished code?

Question

Yandex maps

Previously, stores were shown on my map, when you click on the balloon, the name of the store appeared. Implemented in this way:
coords - an array of store objects on the map (0 and 1 element of each object - latitude and longitude, 2 - store name)

var obj = {
                        type: 'FeatureCollection',
                        features: coords.map(function(p){
                            return {
                                type: 'Feature',
                                properties: {
                                    balloonContent:  p[2]
                                },
                                geometry: {
                                    type: 'Point',
                                    coordinates: [p[0], p[1]]
                                }
                            }
                        })
                    };

 var objects = ymaps.geoQuery(obj);

                    objects.searchInside(this.myMap).addToMap(this.myMap);

                    this.myMap.events.add('boundschange', () => {
                        var visibleObjects = objects.searchInside(this.myMap).addToMap(this.myMap);
                        objects.remove(visibleObjects).removeFromMap(this.myMap);
                    });

Now I need to create my own balloon layout, I made it, it is working (I took it from here https://tech.yandex.ru/maps/jsbox/2.1/placemark_ba...

ymaps.ready(init);

function init () {
    var map = new ymaps.Map('map', {
            center: [55.650625, 37.62708],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search'
        }),
        BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div class="baloon">' +
'<img src="https://www.look.com.ua/templates/lookua/images/avatar-user.png" alt="">' +
'<div class="text">' +
  '<p>'+
    '<p  class="name">Дикси</p>'  +
    'ул.Гвардейская, 24а' +
    '<br>' +
     '10:00-22:00' +
     '</p>' +
'</div>' +
  '<div class="line"></div>' +
  '<p class="proposition">Предложений: 2356/345</p>'
+'</div>', {
            build: function () {
                BalloonContentLayout.superclass.build.call(this);
            },

            clear: function () {
                BalloonContentLayout.superclass.clear.call(this);
            },

    var placemark = new ymaps.Placemark([55.650625, 37.62708], {
            name: 'Считаем'
        }, {
            balloonContentLayout: BalloonContentLayout,
            balloonPanelMaxMapArea: 0
        });

    map.geoObjects.add(placemark);
}

But how to add it to the first code?
Several marks on the map

Answer 1

Here is an example of using a custom balloon: https://tech.yandex.com/maps/jsbox/2.1/balloon_autopan
And in your code you got a non-custom template (which should contain variable data that is passed to each entity when it is created or shown) , but fixed code with hard-coded content. This is not true, see the example above.