Debut Theme: How to use a different image on the collection thumbnail from the collection header?

Solved
Highlighted
Tourist
11 1 2

Hi everyone,
I would like to be able to use an image on a collections thumbnail different from the image that shows up in the header of the collection page.

Right now, the Debut theme has an option which allows me to upload a collection image, however the same image doesn't fit well in both the thumbnail and in the header section and I would like to be able to assign two different images for this. 
Is this possible? And how?

0 Likes

Could you share a link to the store's collection page? I'll take a look. 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscardiazserrat@gmail.com
Behance: behance.net/starseedscreative
0 Likes
Tourist
11 1 2

Hi Oscar, here is a dummy version of the store: https://8m6wpj21vqgopk19-6364528693.shopifypreview.com

 

I would like to have the image which is now in the RTE to be the one used as background image on the header section. The image used as background now fits well the thumbnail in the COLLECTIONS > ALL page, but not in the header.

Any help would be much appreciated!

0 Likes

Success.

Gotcha, I typically achieve this by creating a new admin setting that allows me to add a custom collection image to that specific section, and use the regular collection image for my thumbnails section. This gives you more flexibility when it comes to using different images depending on the layout. 

 

If you are familiar with Shopify's schema, you can create a new field on your collection admin settings. In this case I did it for you ;)

 

Go to your theme files and under sections look for collection-template.liquid and replace the entire code with this: DON'T TEST ON YOUR LIVE SITE, DUPLICATE THE THEME AND TEST ON A DUPLICATE THEME INSTEAD THAT WAY YOU DON'T AFFECT THE LIVE SITE YET ;)

 

{% case section.settings.grid %}
  {% when 2 %}
    {%- assign max_height = 530 -%}
  {% when 3 %}
    {%- assign max_height = 345 -%}
  {% when 4 %}
    {%- assign max_height = 250 -%}
  {% when 5 %}
    {%- assign max_height = 195 -%}
{% endcase %}

{% if section.settings.layout == 'grid' %}
  {%- assign limit = section.settings.grid | times: section.settings.rows -%}
{% else %}
  {%- assign limit = 16 -%}
{% endif %}

{% paginate collection.products by limit %}

<div data-section-id="{{ section.id }}" data-section-type="collection-template">
  <header class="collection-header">
    {%- assign is_filter_by_available = false -%}
    {%- if section.settings.tags_enable and collection.all_tags.size > 0 -%}
      {%- assign is_filter_by_available = true -%}
    {%- endif -%}

    {%- assign is_vendor_or_type_collection = false -%}
    {%- if collection.current_type != blank or collection.current_vendor != blank -%}
      {%- assign is_vendor_or_type_collection = true -%}
    {%- endif -%}

    {% if section.settings.show_collection_image %}
      <div class="collection-hero">
        <div class="collection-hero__image ratio-container lazyload js"
             data-bgset="{% include 'bgset', image: custom_collection_image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-image: url('{{ section.settings.custom_collection_image | img_url: '1920x' }});"></div>
        <noscript>
          <div class="collection-hero__image" style="background-image: url({{ section.settings.custom_collection_image | img_url: '2048x600', crop: 'top' }});"></div>
        </noscript>
        <div class="collection-hero__title-wrapper">
          <h1 class="collection-hero__title page-width">
            <span role="text">
              <span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
              {{ collection.title }}
            </span>
          </h1>
        </div>
      </div>
      {% if is_filter_by_available == false and section.settings.sort_enable == false %}
        <div class="page-width">
          <span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
        </div>
      {% endif %}
      {% if collection.description != blank %}
        <div class="rte collection-description page-width">
          {{ collection.description }}
        </div>
      {% endif %}
    {% else %}
      <div class="page-width">
        <div class="section-header text-center">
          <h1>
            <span role="text">
              <span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
              {{ collection.title }}
            </span>
          </h1>
          {% if collection.description != blank %}
            <div class="rte">
              {{ collection.description }}
            </div>
          {% endif %}
          {% if is_filter_by_available == false and section.settings.sort_enable == false %}
            <span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
          {% endif %}
        </div>
      </div>
    {% endif %}

    {% if is_filter_by_available or section.settings.sort_enable %}
      <div class="filters-toolbar-wrapper{% if is_filter_by_available %} filters-toolbar--has-filter{% endif %}">
        <div class="page-width">
          <div class="filters-toolbar">
            <div class="filters-toolbar__item-wrapper">
              {% if section.settings.tags_enable and is_vendor_or_type_collection == false %}
                {% unless collection.all_tags.size == 0 %}
                  <div class="filters-toolbar__item-child">
                    <label class="filters-toolbar__label select-label" for="FilterTags">{{ 'collections.filters.title_tags' | t }}</label>
                    <div class="filters-toolbar__input-wrapper select-group">
                      <select class="filters-toolbar__input hidden" name="FilterTags" id="FilterTags" aria-describedby="a11y-refresh-page-message a11y-selection-message">
                        {% if current_tags %}
                          {% if collection.handle %}
                            <option value="/collections/{{ collection.handle }}">{{ 'collections.filters.all_tags' | t }}</option>
                          {% elsif collection.current_type %}
                            <option value="{{ collection.current_type | url_for_type }}">{{ 'collections.filters.all_tags' | t }}</option>
                          {% elsif collection.current_vendor %}
                            <option value="{{ collection.current_vendor | url_for_vendor }}">{{ 'collections.filters.all_tags' | t }}</option>
                          {% endif %}
                        {% else %}
                          <option value="">{{ 'collections.filters.all_tags' | t }}</option>
                        {% endif %}
                        {% for tag in collection.all_tags %}
                          <option value="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
                        {% endfor %}
                      </select>
                      {% include 'icon-chevron-down' %}
                    </div>
                  </div>
                {% endunless %}
              {% endif %}

              {% if section.settings.sort_enable %}
                <div class="filters-toolbar__item-child">
                  {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
                  <label class="filters-toolbar__label select-label" for="SortBy">{{ 'collections.sorting.title' | t }}</label>
                  <div class="filters-toolbar__input-wrapper select-group">
                    <select name="sort_by" id="SortBy"
                      class="filters-toolbar__input hidden"
                      aria-describedby="a11y-refresh-page-message a11y-selection-message"
                      data-default-sortby="{{ collection.default_sort_by }}"
                    >
                      {%- for option in collection.sort_options -%}
                        <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
                      {%- endfor -%}
                    </select>
                    {% include 'icon-chevron-down' %}
                  </div>
                </div>
              {% endif %}
            </div>

            <div class="filters-toolbar__item filters-toolbar__item--count">
              <span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  </header>

  <div class="page-width" id="Collection">
    {% if section.settings.layout == 'grid' %}
      {% case section.settings.grid %}
      {% when 2 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
      {% when 3 %}
        {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
      {% when 4 %}
        {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
      {% when 5 %}
        {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
      {% endcase %}

      <ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
        {% for product in collection.products %}
          <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height %}
          </li>
        {% else %}
          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
            <li class="grid__item">
              <div class="grid grid--uniform">
                {% for i in (1..limit) %}
                  <div class="grid__item {{ grid_item_width }}">
                    <div class="grid-view-item">
                      <a href="#" class="grid-view-item__link">
                        <div class="grid-view-item__image">
                          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                        </div>
                        <div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                        <div class="grid-view-item__meta">
                          <span class="product-price__price">$19.99</span>
                        </div>
                      </a>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </li>
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
      </ul>
    {% else %}
      <ul class="list-view-items">
        {% for product in collection.products %}
          <li class="list-view-item">
            {% include 'product-card-list', product: product %}
          </li>
        {% else %}

          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
            {% for i in (1..4) %}
              <li class="list-view-item">
                <a href="#" class="list-view-item__link">
                  <div class="list-view-item__image-column">
                    <div class="list-view-item__image-wrapper">
                      <div class="list-view-item__image">
                        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
                        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                      </div>
                    </div>
                  </div>

                  <div class="list-view-item__title-column">
                    <div class="list-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                  </div>

                  <div class="list-view-item__price-column">
                    <span class="product-price__price">$19.99</span>
                  </div>
                </a>
              </li>
            {% endfor %}
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
      </ul>
    {% endif %}

    {% if is_empty_collection %}
      <div class="grid__item small--text-center">
        <p class="text-center">{{ 'collections.general.no_matches' | t }}</p>
      </div>
    {% endif %}

    {% if paginate.pages > 1 %}
      {% include 'pagination' %}
    {% endif %}
  </div>
</div>

{% endpaginate %}



{% schema %}
{
  "name": {
    "de": "Kategorie-Seiten",
    "en": "Collection pages",
    "es": "Páginas de colección",
    "fr": "Pages de collections",
    "it": "Pagine delle collezioni",
    "ja": "コレクションページ",
    "nl": "Collectiepagina's",
    "pt-BR": "Páginas de coleções",
    "zh-CN": "产品系列页面",
    "zh-TW": "商品系列頁面"
  },
  "settings": [
    {
      "type": "select",
      "id": "layout",
      "label": {
        "de": "Layout",
        "en": "Layout",
        "es": "Diseño",
        "fr": "Mise en page",
        "it": "Layout",
        "ja": "レイアウト",
        "nl": "Indeling",
        "pt-BR": "Layout",
        "zh-CN": "布局",
        "zh-TW": "版面配置"
      },
      "default": "grid",
      "options": [
        {
          "value": "grid",
          "label": {
            "de": "Raster",
            "en": "Grid",
            "es": "Cuadrícula",
            "fr": "Grille",
            "it": "Griglia",
            "ja": "グリッド",
            "nl": "Raster",
            "pt-BR": "Grade",
            "zh-CN": "网格",
            "zh-TW": "網格"
          }
        },
        {
          "value": "list",
          "label": {
            "de": "Liste",
            "en": "List",
            "es": "Lista",
            "fr": "Liste",
            "it": "Elenco",
            "ja": "リスト",
            "nl": "Lijst",
            "pt-BR": "Lista",
            "zh-CN": "列表",
            "zh-TW": "清單"
          }
        }
      ]
    },
    {
      "type": "range",
      "id": "grid",
      "label": {
        "de": "Produkte per Reihe (nur Raster)",
        "en": "Products per row (grid only)",
        "es": "Productos por fila (solo cuadrícula)",
        "fr": "Produits par rangée (grille uniquement)",
        "it": "Prodotti per riga (solo griglia)",
        "ja": "行あたりの商品数(グリッドのみ)",
        "nl": "Producten per rij (alleen raster)",
        "pt-BR": "Produtos por linha (somente grade)",
        "zh-CN": "每行产品数(仅限网格)",
        "zh-TW": "每列產品數 (僅限網格)"
      },
      "default": 4,
      "min": 2,
      "max": 5,
      "step": 1
    },
    {
      "type": "range",
      "id": "rows",
      "label": {
        "de": "Reihen per Seite (nur Raster)",
        "en": "Rows per page (grid only)",
        "es": "Filas por página (solo cuadrícula)",
        "fr": "Rangées par page (grille uniquement)",
        "it": "Righe per pagina (solo griglia)",
        "ja": "ページあたりの行数(グリッドのみ)",
        "nl": "Rijen per pagina (alleen raster)",
        "pt-BR": "Linhas por página (somente grade)",
        "zh-CN": "每行产品数(仅限网格)",
        "zh-TW": "每頁列數 (僅限網格)"
      },
      "default": 2,
      "min": 2,
      "max": 8,
      "step": 1
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "label": {
        "de": "Kategorie-Foto anzeigen",
        "en": "Show collection image",
        "es": "Mostrar imagen de la colección",
        "fr": "Afficher l'image de la collection",
        "it": "Mostra immagine collezione",
        "ja": "コレクションの画像を表示する",
        "nl": "Collectieafbeelding weergeven",
        "pt-BR": "Exibir imagem da coleção",
        "zh-CN": "显示产品系列图片",
        "zh-TW": "顯示商品系列圖片"
      },
      "default": true
    },
    {
        "type": "image_picker",
        "id": "custom_collection_image",
        "label": "Select Collection Image"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": {
        "de": "Produkt-Lieferanten anzeigen",
        "en": "Show product vendors",
        "es": "Mostrar proveedores del producto",
        "fr": "Afficher les vendeurs",
        "it": "Mostra fornitori prodotto",
        "ja": "商品の販売元を表示する",
        "nl": "Productleveranciers weergeven",
        "pt-BR": "Exibir fornecedores do produto",
        "zh-CN": "显示产品厂商",
        "zh-TW": "顯示產品廠商"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "sort_enable",
      "label": {
        "de": "Sortieren erlauben",
        "en": "Enable sorting",
        "es": "Habilitar la función ordenar",
        "fr": "Activer le tri",
        "it": "Permetti di ordinare",
        "ja": "並べ替えを有効にする",
        "nl": "Sortering inschakelen",
        "pt-BR": "Ativar classificação",
        "zh-CN": "启用排序",
        "zh-TW": "啟用排序"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "tags_enable",
      "label": {
        "de": "Tag-Filtern erlauben",
        "en": "Enable tag filtering",
        "es": "Habilitar filtro de etiquetas",
        "fr": "Activer le filtrage par balises",
        "it": "Attiva filtro tag",
        "ja": "タグでの絞り込みを有効にする",
        "nl": "Filteren op tags inschakelen",
        "pt-BR": "Ativar filtragem de tags",
        "zh-CN": "启用标签筛选",
        "zh-TW": "啟用標籤篩選功能"
      },
      "default": true
    }
  ]
}
{% endschema %}

I built an image picker that allows you to select a custom image for that specific part of the page. PLEASE JUST NOTE THAT IF YOU HAVE MODIFIED THIS FILE WITH ANY CUSTOM CLASSES, IT WILL BE OVERWRITTEN. 

 

Now, this works with the main collection template, but since all of your collections are pulling from the same template, the same custom image will show on all of your collections, to fix this, you need to create a new template per each collection, and a new section per each collection. This will essentially separate all of your settings and allow for more custom control over the images you want to show on each collection. 

 

This video shows the results: https://www.loom.com/share/fe667f977f364f0f8a1bc9fa60e2a3b5 

 

Hope it works ;) If you found my answer useful please mark it as a solution, and like my post :)

 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscardiazserrat@gmail.com
Behance: behance.net/starseedscreative
0 Likes
Tourist
11 1 2

Thank you for your suggestion, Oscar!

It seems like a clever solution, however I'm afraid the creation of a new template for each new collection would be too complicated for the client.

Do you think there is a way to avoid the creation of a new template for a new collection?

0 Likes

I personally recommend the approach because it allows for more flexibility and control over the layout, but it does require some basic knowledge of liquid. I haven't tried a different approach but I'm very sure it's possible. Maybe another partner here can expand :)

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscardiazserrat@gmail.com
Behance: behance.net/starseedscreative
0 Likes
Tourist
11 1 2

I'm still hoping for a possibility of adding more than one image to a collection without having to create a new template for every single new collection, but, still, your solution works well enough for now, though!
Thank you, Oscar!

0 Likes

Sounds great! I'll be playing around with it later, if I find an easier way I'll let you know, love these challenges ;)

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscardiazserrat@gmail.com
Behance: behance.net/starseedscreative
1 Like
New Member
1 0 0

How do I create a new template per each collection, and a new section per each collection. This will essentially separate all of your settings and allow for more custom control over the images you want to show on each collection?

0 Likes