[Debut Theme] Collections Page - Remove collection title and inser a banner instead

Solved
Tourist
3 0 1

Hi all,

 

Is there a way for me to hide the collection name on my website and show a banner instead? I would like to have a different banner for each collection page...

 

I would like to have the collection name only in the collections list in my shopify menu.

 

Thanks in advance.

 

collection title.png

0 Likes

Success.

Shopify Expert
165 40 66

@victorhugori 

 

You will add your collection banners to the collections themselves by going to Products > Collections. Once you click into the Collection you wish to edit, on the right-hand side there's a spot that says Collection Image. Put it there. 

 

To remove the page title from your collections, please see the screenshot below. I have commented out the collection.title for your reference so you know what to look for and remove. I would recommend commenting this out in case you ever want to bring it back. 

 

Please let me know if you have any questions. 

 

Screen Shot 2019-08-29 at 11.40.14 AM.png

 

Here is the code if you wanna copy and paste it: 

{% 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 and collection.image %}
      <div class="collection-hero">
        <div class="collection-hero__image ratio-container lazyload js"
             data-bgset="{% include 'bgset', image: collection.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-image: url('{{ collection.image | img_url: '300x300' }});"></div>
        <noscript>
          <div class="collection-hero__image" style="background-image: url({{ 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 %}
	{%- if product.type == 'GSC_HIDDEN_PRODUCT' -%}{%- continue -%}{%- endif -%}

          <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 %}
	{%- if product.type == 'GSC_HIDDEN_PRODUCT' -%}{%- continue -%}{%- endif -%}

          <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": "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 %}
Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
2 Likes
Tourist
3 0 1

One more question (last one), how do I change the product title font? By default it's bold, I don't want it bold anymore, I want the product price bold... 

 

Thanks a lot.

0 Likes

Success.

Shopify Expert
165 40 66

Online Store > Themes > Actions > Edit Code. Go to Assets > theme.scss.liquid. Search for: .product-card__title 

 

make it look like this:

 

.product-card__title {
  font-weight: 400; 
}

Please note that the font you're using dictates how bold or un-bold it can be. If 400 is too light, you can bump it up. Font weight goes in increments of 100. 900 being the heaviest and 100 being the lightest. 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
1 Like
Tourist
3 0 1

@shayOwensby thanks a lot for your support.

1 Like
New Member
3 0 0

Hi there! I am trying to do the exact same thing but can't seem to find which code I should comment out to no longer have the collection title displayed.

I'm probably not paying attention but I can't see in the screenshot where you've placed the comment.

 

Thanks!

0 Likes