Персональное оформление элементов плагина Samosale в Tilda

Последние изменения: 28.04.2025

Данная статья поможет вам изменить оформление элементов плагина, чтобы он выглядел более гармонично и соответствовал фирменному стилю вашего бренда.
Все изменения выполняются с помощью скриптов — в которые необходимо внести небольшие правки по нашей инструкции.

Статья состоит из нескольких разделов:

Смена цвета текста предложения пройти регистрацию и кнопки «Войти»

Смена заголовка и скрытие значка молнии

Смена цвета обводки кнопок «Накопить» и «Списать»

В данной статье мы подробно расскажем, какие фрагменты кода отвечают за конкретные элементы и как их изменить.

Смена цвета предложения пройти регистрацию и кнопки «Войти»

При подключенной интеграции Samosale на сайте Tilda кнопка "Войти" и текст с предложением регистрации по умолчанию отображаются зелёным цветом.

3e987b3eb84ae288ca8913e0c0b9832d.png

Вы можете настроить цвета этих элементов плагина, чтобы они лучше сочетались с дизайном вашего сайта, например, как показано на скриншоте ниже.

b4f2cceadf5ec6d7c3b66420d613f56d.png

Чтобы изменить цвет кнопки и текста "Зарегистрируйтесь и получите N бонусов" необходимо перейти в настройки сайта Tilda и вставить измененный код внутрь Head.

Код для вставки:

<style>
.t-ss-submit {
    background-color: #45342C !important; // Измените HEX-код, чтобы задать свой цвет фона кнопки
}
.ss {
    color: #45342C !important; // Измените HEX-код, чтобы задать свой цвет текста
}
</style>

*background-color: #45342C - задает цвет кнопки "Войти".

*color: #45342C - задает цвет текста с предложением пройти регистрацию.

#45342C - это HEX-код цвета. Вы можете выбрать любой нужный вам HEX-код на сайте https://gradients.app/ru/color и указать его в коде для вставки.

Процесс настройки

1. Войдите в аккаунт Tilda и откройте настройки сайта.

74361b3ad80a3e5e0c694a3d36c3c273.png

2. Перейдите раздел "Еще" и выберите пункт "Html-код для вставки внутрь HEAD" и нажмите на кнопку "Редактировать код"

89852785fc6a89c8b6245c4537989972.png

3. Скопируйте код и вставьте его.

Например, мы хотим, чтобы кнопка "Войти" была фиолетовой (HEX-код фиолетового цвета - 8b00ff), а текст с предложением пройти регистрацию был голубой (HEX-код голубого цвета - #1f91dc).

Замените цвета в коде:

<style>
.t-ss-submit {
    background-color: #8b00ff !important; // Измените HEX-код, чтобы задать свой цвет фона кнопки
}
.ss {
    color: #1f91dc !important; // Измените HEX-код, чтобы задать свой цвет текста
}
</style>

Измененный код вставьте в Head и сохраните изменения:

b490c605d1ddc653ec052c3524a232d9.png

4. Перейдите в раздел "Мои сайты" и переопубликуйте все страницы.

040c70c2c0f632cf1a351f248a24d38d.png

В результате вышеперечисленных действий кнопка "Войти" станет фиолетовой, а текст с предложением пройти регистрацию голубым.

0e2f26491a27d5bca131ba4568752bb3.png

Смена заголовка и скрытие значка молнии

В окне плагина по умолчанию отображается заголовок «Получите до N ₽ кэшбэка» со значком молнии. Если вас не смущает значок молнии, то текст заголовка рекомендуем изменить, используя скрипт, описанный в нашей другой статье. Однако, если вы хотите не только изменить текст заголовка, но и убрать значок молнии, то для этого мы предлагаем использовать наш другой скрипт.

a8701f59d55894f62108229d0c2e70ef.png

Скрипт позволяет скрыть стандартный заголовок вместе с иконкой и вставить вместо него ваш собственный текст. Это даёт возможность персонализировать сообщение для покупателей и оформить его в фирменном стиле вашего бренда.

3ff7fe854ae92260ebaf536846d3ca15.png

Скрипт для вставки:

<script>
document.addEventListener('DOMContentLoaded', function () {  
    setTimeout(function() {  
        const titleElement = document.querySelector('.ss__attention.ss_h3');  
        const amountElement = document.getElementById('ss__max_cashback');  

        if (titleElement && amountElement) {  
            titleElement.style.visibility = 'hidden';  

            const newTitle = document.createElement('p');  
            newTitle.textContent = "Получите бонусы с покупки от Samosale";  // Измените текст в кавычках, чтобы задать свой заголовок
            newTitle.style.color = '#8B00FF'; // Измените HEX-код, чтобы задать свой цвет текста

            if (window.innerWidth <= 640) {  
                newTitle.style.fontSize = '16px';  
            } else {  
                newTitle.style.fontSize = '20px';  
            }  

            titleElement.parentNode.insertBefore(newTitle, titleElement);  
        }  
    }, 1000);  
});
</script>

*Строка newTitle.textContent = "Получите бонусы с покупки от Samosale"; отвечает за текст внутри заголовка
*Строка newTitle.style.color = '#8b00ff';  отвечает за цвет текста заголовка
'#8b00ff'- это HEX-код цвета. Вы можете выбрать любой нужный вам HEX-код на сайте https://gradients.app/ru/color и указать его в коде в коде для вставки.

Процесс настройки

1. Войдите в аккаунт Tilda и откройте настройки сайта.

99bddf06c3308aa20e1bad01d54d743a.png

2. Перейдите раздел "Еще" и выберите пункт "Html-код для вставки внутрь HEAD" и нажмите на кнопку "Редактировать код"

a66aabc0d21248cc1e838657cc70b4d6.png

3. Скопируйте скрипт и вставьте его.

Например, название вашей компании "SaleM" и вы хотите, чтобы текст заголовка был "Получайте бонусы за покупки от SaleM"

Значит, нужно изменить текст в кавычках в строке newTitle.textContent = "Получите бонусы с покупки от Samosale" на newTitle.textContent = "Получайте бонусы с покупки от SaleM".

Чтобы изменить цвет текста, найдите строку newTitle.style.color = '#8B00FF'.

В этой строке #8B00FF — это HEX-код фиолетового цвета.

Если вы хотите, чтобы текст был, например, оранжевого цвета, укажите HEX-код оранжевого — #FF8000 и вставьте его в кавычки вместо #8B00FF.

<script>
document.addEventListener('DOMContentLoaded', function () {  
    setTimeout(function() {  
        const titleElement = document.querySelector('.ss__attention.ss_h3');  
        const amountElement = document.getElementById('ss__max_cashback');  

        if (titleElement && amountElement) {  
            titleElement.style.visibility = 'hidden';  

            const newTitle = document.createElement('p');  
            newTitle.textContent = "Получайте бонусы за покупки от SaleM";  // Измените текст в кавычках, чтобы задать свой заголовок
            newTitle.style.color = '#FF8000'; // Измените HEX-код, чтобы задать свой цвет текста

            if (window.innerWidth <= 640) {  
                newTitle.style.fontSize = '16px';  
            } else {  
                newTitle.style.fontSize = '20px';  
            }  

            titleElement.parentNode.insertBefore(newTitle, titleElement);  
        }  
    }, 1000);  
});
</script>

Измените скрипт и нажмите сохранить:

fe4b12b488a2d36f965589f791d50332.png

4. Перейдите в раздел "Мои сайты" и переопубликуйте все страницы.

7f4aa1dcfa747af262c614831dcbb2b6.png

В результате вышеперечисленных действий вы измените заголовок и уберете значок молнии.

32b1666b233396314b55259653496562.png



Смена цвета обводки кнопок

После ввода номера телефона и подтверждения входа клиент попадает на окно оформления заказа, где отображаются две кнопки: «Копить» и «Списать». По умолчанию их обводка имеет зелёный цвет.

d770931cc06ff0e38142c7be1cfb8384.png

При необходимости вы можете изменить цвет обводки на любой другой по нашей инструкции.

6d78c2be1c416efa277285cd01cb5525.png

Скрипт для смены обводки кнопок:

<script>
    const styles = `
.ss__reaction input[type="radio"]:checked + label {
  border-color: #393939 !important; // Измените HEX-код, чтобы задать свой цвет обводки кнопок
}
`;

    const styleSheet = document.createElement("style");
    styleSheet.textContent = styles;
    document.head.appendChild(styleSheet);
</script>

*Строка border-color: #393939 !important;

#393939 - это HEX-код цвета. Вы можете выбрать любой нужный вам HEX-код на сайте https://gradients.app/ru/color и указать его в коде в коде для вставки.

Процесс настройки смены обводки кнопок

1. Войдите в аккаунт Tilda и откройте настройки сайта.

4c2f4ae4a22aad9295eeb423cce2f54d.png

2. Перейдите раздел "Еще" и выберите пункт "Html-код для вставки внутрь HEAD" и нажмите на кнопку "Редактировать код"

0426543669f49e995ea2daf32d1bcc19.png

3. Скопируйте скрипт и вставьте его.

Например, мы хотим, чтобы кнопка обводка кнопок была фиолетовой (HEX-код фиолетового цвета - 8b00ff), значит необходимо в строке

border-color: #393939 !important; заменить #393939 на #8b00ff

<script>
    const styles = `
.ss__reaction input[type="radio"]:checked + label {
  border-color: #8b00f !important; // Измените HEX-код, чтобы задать свой цвет обводки кнопок
}
`;

    const styleSheet = document.createElement("style");
    styleSheet.textContent = styles;
    document.head.appendChild(styleSheet);
</script>

Отредактируйте код и сохраните изменения:

c6574d43a03aa63f0c91d2e4971f0980.png

4. Перейдите в раздел "Мои сайты" и переопубликуйте все страницы.

808547a67d42cfd1e518a3562d470dff.png

В результате вышеперечисленных действий вы измените цвет обводки кнопок.

Если вы не нашли ответ на свой вопрос, задайте его нам в Telegram @SamosaleSupport_Bot 😃

Помогла ли вам статья?