Добавление графического баннера на каждую страницу коллекции Shopify

Question

Мне нужна помощь. У меня есть сайт, над которым я работаю для клиента, использующего Shopify.

На сайте нужен баннер для каждой страницы коллекции, основанный на изображении коллекции, загруженном при создании коллекции.

I мне сказали, что я могу использовать этот код для этого ...

{% if collection.image %}{{ collection.image | img_url: 'medium' }}{% endif %}

Я просмотрел раздел редактирования кода Shopify и проверил код collection.liquid в разделе шаблона, но не сделал увидеть место, чтобы добавить этот код. Затем я проверил часть collection-template.liquid в разделе section, но я все еще не вижу места, в котором было бы целесообразно добавить его.

Куда мне добавить этот код?

Я не знаком с системой кода Shopify Liquid. Я знаю только, как кодировать HTML и CSS.

Если это поможет, я использую тему Main Everything.

Answer 1

Мне не удалось найти тему под названием «Все главное», но я могу показать вам, как это сделать, с помощью одной из бесплатных. В этом примере я использую «Supply».

Итак, прежде всего вы открываете файл /sections/collection-template.liquid и ищите этот код:

        <header class="section-header">
          <h1 class="section-header--title h1">{{ collection.title }}</h1>
          <div class="rte rte--header">
            {{ collection.description }}
          </div>
       </header>

Показывает описание коллекции, если оно не пустое. Теперь, если вы хотите показать изображение коллекции, этот фрагмент будет выглядеть примерно так:

        <header class="section-header">
          <h1 class="section-header--title h1">{{ collection.title }}</h1>
          <div class="rte rte--header">
            {{ collection.description }}
          </div>
          {% if collection.image %}<div><img src="{{ collection.image | img_url: 'medium' }}" /></div>{% endif %}
       </header>

Поэтому, если изображение не пустое, вставляется контейнер с вашим изображением.

Roman