Кастомний банер + preload

Рекомендації

Важливо

Код потрібно вставляти у кінець секції head, можна деколи трішки вище, наприклад якщо нижче підключаються якісь додаткові скрипти, це вже залежить від пріорітету

Уважно

У деяких випадках випадках це може вплинути негативно, наприклад коли картинка не оптимізована, у такому випадку це тільки погіршить показники та збільшить час рендерингу сторінки

1. Створення секції у Shopify

Якщо використовується на сайті банер,а home page створена через якийсь білдер типу Ecomposer, є сенс в тому щоб для кращого завантаження перенести реалізацію банера у Shopify.! Весь код буде в кінці стоірнки, а зараз розглянем його реалізацію:

1-ий блок - просто обгортка в лінку, де ми задаєм динамічну лінку завдяки змінній routes.root_url, яка в залежності від мови браузера буде перенаправляти користувача на сторінку з відповідною мовою. Якщо мова браузера англійська, і є англійська версія сайту - то користувача переведе на англійську версію сторінки.

2-ий блок - ініціалізація змінни з інтерфейсу Shopify(її ми розглянем нижче).

• 1-ша змінна - вибір сторінки з метафілдами,на якій зберігаються наші картинки
• 2-га змінна та 3-тя змінна - ініціалізація мобільної та десктопної картинки, які будуть вставлятись в залежності від ширини екрану користувача

3-ій блок робить перевірку,чи ініціалізувались наші зміні, і вже в середині picture лежать дві source, які в залежності від ширини екрану користувача відобразять картинку через задану media. Також це дозволяє не підвантажувати лишні картнки(умовно картинку для декстопа на мобільній ширині екрану, у цьому випадку). Source можна розбивати на безліч media, це вже залежить від завдання. Якщо з source сталась якась помилка, то для цього є тег img, який спрацює як fallback і відобразить картинку яка задана для нього. Якщо і ця умова не спрацювала, то тоді виведеться p(параграф) з вказаним текстом.

Далі розглянем liquid схему:

1-ий блок - назва секції, яка буде відображатись у Shopify елементах

2-ий блок - елемент, в якому потрібно вибрати сторінку, на якій налаштовані наші метафілди. Налаштування сторінки з метафілдами

3-ій блок це наші поля, де потрібно ввести шлях до нашої картинки з створеної сторінки з метафілдами

2. Shopify налаштування

• Для поля page потрібно вибрати сторінку з метафілдами.
• Для полів з картинками потрібно вказати назву метафілда.
• Щоб знайти шлях до картинки: Settings > Custom Data > Pages > Обираєм потрібну картинку > Поле Namespace and key.

Вказувати потрібно без слова custom.

Код банерної секції

<a class="custom-image-section-link" href="https://dendraway.com{{ routes.root_url }}/collections/all-products">
  <div class="custom-image-section">
    {% assign page = section.settings.page %}
    {% assign mobile_image = section.settings.mobile_image_path %}
    {% assign desktop_image = section.settings.desktop_image_path %}
    <picture>
      {% if mobile_image or desktop_image %}
      {% if mobile_image %}
        <source
          media="(max-width: 767px)"
          srcset="{{ page.metafields.custom[mobile_image] | img_url: '767x' }}"
          type="image/webp"
        >
      {% endif %}
      {% if desktop_image %}
        <source
          media="(min-width: 768px)"
          srcset="{{ page.metafields.custom[desktop_image] | img_url: '1200x' }}"
          type="image/webp"
        >
      {% endif %}
      <img
        src="{{ page.metafields.custom[mobile_image] | img_url: '767x' }}"
        alt="Slider Image"
        fetchpriority="high"
        loading="eager"
        style="min-height: 161px;"
      >
                {% else %}
    <p>No image available</p>
  {% endif %}
    </picture>
  </div>
</a>

<style>
  .custom-image-section img {
    width: 100%;
    user-drag: none;
    -webkit-user-drag: none;
    pointer-events: none;
    user-select: none;
  }

  .custom-image-section {
    max-width: 1300px;
    padding: 32px 50px 0px;
    margin: 0 auto;
  }

  @media (max-width: 767px) {
    .custom-image-section {
      padding: 0px !important;
    }
  }

  @media (768px <= width <= 1024px) {
    .custom-image-section {
      padding: 32px 20px 0 !important;
    }

    .custom-image-section img {
      border-radius: 20px;
    }
  }

  @media (width > 1024px) {
    .custom-image-section {
      padding: 32px 50px 0 !important;
    }

    .custom-image-section img {
      border-radius: 20px;
    }
  }
</style>

{% schema %}
{
  "name": "Custom Banner Section",
  "settings": [
        {
      "type": "page",
      "id": "page",
      "label": "Select the desired page with metafields",
      "info": "Select the page (e.g., home page data)."
    },
    {
      "type": "text",
      "id": "desktop_image_path",
      "label": "Desktop Image Path",
      "info": "Enter the path to the desktop image (e.g., metafield value). example: slider_image_1"
    },
    {
      "type": "text",
      "id": "mobile_image_path",
      "label": "Mobile Image Path",
      "info": "Enter the path to the mobile image (e.g., metafield value). example: slider_image_1_mobile"
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "Custom Banner Section",
      "category": "Custom"
    }
  ]
}
{% endschema %}

3. Додати банерним картинкам вищий пріорітет завантаження

Для цього нам потрібно додати код вже у theme.liquid. Для початку розберем як код працює:

• 1-ий блок робить перевірку чи це головна сторінка
• 2-ий блок та 3-ій блок це вже лінки з потрібними властивостями та медіа, які не завантажують 2 картинки, а тільки ту, яка потрібна

Код:

{% if request.path == '/' %}
	<link
		rel="preload"
		as="image"
		href="{{ pages['homepage-data'].metafields.custom.slider_image_1_mobile | img_url: '767x' }}"
		media="(max-width: 767px)"
	>
	<link
		rel="preload"
		as="image"
		href="{{ pages['homepage-data'].metafields.custom.slider_image_1 | img_url: '1200x' }}"
		media="(min-width: 768px)"
	>
{% endif %}