Shopify. Добавление прозрачного слоя на слайдер

  • 18.07.2020
  • 2 комментария

Цель: для темы Debut наложить прозрачный слой на слайдер.

Чтобы текст оффера на мобильном телефоне читался без проблем. Необходимо добавить прозрачный слой.

Shopify. Добавление прозрачного слоя на слайдер

Переходим в код темы. Находим файл с настройками внешнего вида слайдера. Адрес: файлы_темы/sections/slideshow.liquid

Добавляем в раздел Schema следующий код:


    {
      "type": "header",
      "content": "Overlay settings on mobile"
    },
    {
      "type": "color",
      "id": "overlay_slider",
      "label": "Color overlay",
      "default": "#fff"
    },
    {
      "type":      "range",
      "id":        "overlay_opacity",
      "min":       0,
      "max":        1,
      "step":       0.1,
      "label":     "Overlay opacity",
      "default":   0.5
    }

Первый элемент – визуальный разделитель. Заголовок с текстом: Overlay settings on mobile

Второй элемент – выбор цвета с помощью color picker

Третий элемент – визуальный ползунок для задания прозрачности.

Применение

Первый элемент, цвет слоя, у нас задан в настройках Schema. Для того чтобы его использовать создадим переменную:

{%- assign overlay_slider = section.settings.overlay_slider -%}

Соответственно assign это переменная, overlay_slider название переменной, section.settings.overlay_slider вызов созданной нами настройки с цветом слоя для наложения

Также понадобится прозрачность, её тоже добавляем в переменную

{%- assign overlay_opacity = section.settings.overlay_opacity -%}

Для того чтобы в коде появилась прозрачность использую найденные в интернете код:

{{ '#7ab55c' | color_modify: 'alpha', 0.85 }}

Преобразуем для наших нужд и используем созданные выше переменные

background-color: {{ overlay_slider | color_modify: 'alpha', overlay_opacity}};

Далее, для того чтобы наш код применился, в файл добавляем стили.

Перед открывающимся тегом {% schema %} прописываем наш код.

@media screen and (max-width: 576px){
    .slick-initialized .slideshow__image::after, 
    .no-js .slideshow__image::after{
      background-color: {{ overlay_slider | color_modify: 'alpha', overlay_opacity}};
    }
  }

И в итоге готовый код:

{%- assign overlay_slider = section.settings.overlay_slider -%}
{%- assign overlay_opacity = section.settings.overlay_opacity -%}
<style>
  @media screen and (max-width: 576px){
    .slick-initialized .slideshow__image::after, 
    .no-js .slideshow__image::after{
      background-color: {{ overlay_slider | color_modify: 'alpha', overlay_opacity}};
    }
  }
</style>

И результат в Customizer:

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

GeekBrains
2 комментария
Pingback – Как фрилансеру найти своего клиента? - Александр 23.07.2020
Pingback – Shopify. Таймер для коллекции товаров - Александр 26.08.2020

Добавить комментарий

Your email address will not be published. Please mark all required fields.