Navigation Help Please

Solved
Gem3
Tourist
10 0 2

Hello

I am hoping someone can help me please.

Is it possible to change the navigation/redirection of a collection photo? 

Currently when you click on the home page collection photo it navigates to the products in the collection but I actually need it to navigate to a specific URL? 

I've been advised the "theme.liquid files" code need editing but I don't know how to.

Thank you

 

0 Likes
achieveapplabs
Shopify Partner
470 36 74

Hi @Gem3 ,

 

100% and yes you could edit theme.liquid but for the proper Shopify experience a URL field should be made available in your Theme Editor section settings. 

Please let us know your theme name? 

Best Regards,

Achieve Team

Install Approovly to create and track order approvals | We want to hear from you hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Custom Shopify Apps achieveapplabs.com
0 Likes
achieveapplabs
Shopify Partner
470 36 74

This is an accepted solution.

Hi @Gem3 ,

 

We went ahead and put a solution here for you. It honestly didn't take much time and was kind of fun. So it would appear you're using Debut Theme. We're assuming most if not all your template and section files are at default, so here goes:

 

1) In your Shopify Admin > Online Store > Themes open Actions and press "Edit code" 

2) Next on your left open the "Sections" folder. 

3) Look for "collections-list.liquid" and open it

4) Copy and past completely from the "Section 1" below these instructions

5) Save your file

6) Look for "collection-grid-item.liquid" and open it 

7) Copy and past completely from the "Section 2" below these instructions

Save your file 

9) Finally open your Theme editor and in your Collection list section you will see a URL field where you can set a custom URL. Leaving it blank will default to the collection URL. 

 

Section 1

<div class="page-width">
  {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h2>{{ section.settings.title | escape }}</h2>
    </div>
  {% endif %}

  {% 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 %}

  <div class="collection-grid">
    <ul class="grid grid--uniform">
      {% for block in section.blocks limit: section.blocks.size %}
        <li class="grid__item {{ grid_item_width }}" {{ block.shopify_attributes }}>
          {%- assign collection = collections[block.settings.collection] -%}
          {% include 'collection-grid-item', collection: collection, custom_url: block.settings.custom_url %}
        </li>
      {% endfor %}
    </ul>
  </div>

  {% if section.blocks.size == 0 %}
    {% include 'no-blocks' %}
  {% endif %}
</div>



{% schema %}
{
  "name": {
    "cs": "Seznam kolekcí",
    "da": "Kollektionsliste",
    "de": "Kategorien-Liste",
    "en": "Collection list",
    "es": "Lista de colecciones",
    "fi": "Kokoelmaluettelo",
    "fr": "Liste des collections",
    "hi": "कलेक्शन सूची",
    "it": "Elenco delle collezioni",
    "ja": "コレクションリスト",
    "ko": "컬렉션 목록",
    "nb": "Samlingsliste",
    "nl": "Collectielijst",
    "pl": "Lista kolekcji",
    "pt-BR": "Lista de coleções",
    "pt-PT": "Lista de coleções",
    "sv": "Kollektionslista",
    "th": "รายการคอลเลกชัน",
    "tr": "Koleksiyon listesi",
    "vi": "Danh sách bộ sưu tập",
    "zh-CN": "产品系列列表",
    "zh-TW": "商品系列清單"
  },
  "class": "index-section",
  "max_blocks": 12,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": {
        "cs": "Nadpis",
        "da": "Overskrift",
        "de": "Titel",
        "en": "Heading",
        "es": "Título",
        "fi": "Otsake",
        "fr": "En-tête",
        "hi": "शीर्षक",
        "it": "Heading",
        "ja": "見出し",
        "ko": "제목",
        "nb": "Overskrift",
        "nl": "Kop",
        "pl": "Nagłówek",
        "pt-BR": "Título",
        "pt-PT": "Título",
        "sv": "Rubrik",
        "th": "ส่วนหัว",
        "tr": "Başlık",
        "vi": "Tiêu đề",
        "zh-CN": "标题",
        "zh-TW": "標題"
      },
      "default": {
        "cs": "Seznam kolekcí",
        "da": "Kollektionsliste",
        "de": "Kategorien-Liste",
        "en": "Collection list",
        "es": "Lista de colecciones",
        "fi": "Kokoelmaluettelo",
        "fr": "Page de liste des collections",
        "hi": "कलेक्शन सूची",
        "it": "Elenco delle collezioni",
        "ja": "コレクションリスト",
        "ko": "컬렉션 목록",
        "nb": "Samlingsliste",
        "nl": "Collectielijst",
        "pl": "Lista kolekcji",
        "pt-BR": "Lista de coleções",
        "pt-PT": "Lista de coleções",
        "sv": "Kollektionslista",
        "th": "รายการคอลเลกชัน",
        "tr": "Koleksiyon listesi",
        "vi": "Danh sách bộ sưu tập",
        "zh-CN": "产品系列列表",
        "zh-TW": "商品系列清單"
      }
    },
    {
      "type": "range",
      "id": "grid",
      "label": {
        "cs": "Počet kolekcí na řádek",
        "da": "Kollektioner pr. række",
        "de": "Kategorien per Reihe",
        "en": "Collections per row",
        "es": "Colecciones por fila",
        "fi": "Kokoelmia per rivi",
        "fr": "Collections par rangée",
        "hi": "प्रति पंक्ति कलेक्शन",
        "it": "Collezioni per riga",
        "ja": "行あたりのコレクション数",
        "ko": "열 별 컬렉션",
        "nb": "Samlinger per rad",
        "nl": "Collecties per rij",
        "pl": "Liczba kolekcji na wiersz",
        "pt-BR": "Coleções por linha",
        "pt-PT": "Coleções por linha",
        "sv": "Produktserier per rad",
        "th": "คอลเลกชันต่อแถว",
        "tr": "Satır başına koleksiyon",
        "vi": "Số bộ sưu tập trên mỗi hàng",
        "zh-CN": "每行产品系列数",
        "zh-TW": "每列商品系列數"
      },
      "min": 2,
      "max": 5,
      "step": 1,
      "default": 3
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": {
        "cs": "Kolekce",
        "da": "Kollektion",
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fi": "Kokoelma",
        "fr": "Collection",
        "hi": "कलेक्शन",
        "it": "Collezione",
        "ja": "コレクション",
        "ko": "컬렉션",
        "nb": "Samling",
        "nl": "Collectie",
        "pl": "Kolekcja",
        "pt-BR": "Coleção",
        "pt-PT": "Coleção",
        "sv": "Produktserie",
        "th": "คอลเลกชัน",
        "tr": "Koleksiyon",
        "vi": "Bộ sưu tập",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      },
      "settings": [
        {
          "label": {
            "cs": "Kolekce",
            "da": "Kollektion",
            "de": "Kategorie",
            "en": "Collection",
            "es": "Colección",
            "fi": "Kokoelma",
            "fr": "Collection",
            "hi": "कलेक्शन",
            "it": "Collezione",
            "ja": "コレクション",
            "ko": "컬렉션",
            "nb": "Samling",
            "nl": "Collectie",
            "pl": "Kolekcja",
            "pt-BR": "Coleção",
            "pt-PT": "Coleção",
            "sv": "Produktserie",
            "th": "คอลเลกชัน",
            "tr": "Koleksiyon",
            "vi": "Bộ sưu tập",
            "zh-CN": "收藏",
            "zh-TW": "商品系列"
          },
          "id": "collection",
          "type": "collection"
        },
		{
         "type": "url",
         "id": "custom_url",
         "label": "Collection URL"
		}
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "cs": "Seznam kolekcí",
        "da": "Kollektionsliste",
        "de": "Kategorien-Liste",
        "en": "Collection list",
        "es": "Lista de colecciones",
        "fi": "Kokoelmaluettelo",
        "fr": "Page de liste des collections",
        "hi": "कलेक्शन सूची",
        "it": "Elenco delle collezioni",
        "ja": "コレクションリスト",
        "ko": "컬렉션 목록",
        "nb": "Samlingsliste",
        "nl": "Collectielijst",
        "pl": "Lista kolekcji",
        "pt-BR": "Lista de coleções",
        "pt-PT": "Lista de coleções",
        "sv": "Kollektionslista",
        "th": "รายการคอลเลกชัน",
        "tr": "Koleksiyon listesi",
        "vi": "Danh sách bộ sưu tập",
        "zh-CN": "产品系列列表",
        "zh-TW": "商品系列清單"
      },
      "category": {
        "cs": "Kolekce",
        "da": "Kollektion",
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fi": "Kokoelma",
        "fr": "Collection",
        "hi": "कलेक्शन",
        "it": "Collezione",
        "ja": "コレクション",
        "ko": "컬렉션",
        "nb": "Samling",
        "nl": "Collectie",
        "pl": "Kolekcja",
        "pt-BR": "Coleção",
        "pt-PT": "Coleção",
        "sv": "Produktserie",
        "th": "คอลเลกชัน",
        "tr": "Koleksiyon",
        "vi": "Bộ sưu tập",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      },
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}

 

Section 2

{% comment %}
    Renders a list of products from a collection

    Accepts:
    - collection: {Object} Collection Liquid object (required)

    Usage:
    {% include 'collection-grid-item', collection: collection %}
{% endcomment %}
{% if collection.image %}
  {%- assign collection_image = collection.image -%}
{% elsif collection.products.first and collection.products.first.media != empty %}
  {%- assign collection_image = collection.products.first.featured_media.preview_image -%}
{% else %}
  {% assign collection_image = blank %}
{% endif %}

<div class="collection-grid-item">

  <a href="{% if collection.products == empty %}#{%endif%}{% if custom_url == blank %}{{collection.url}}{%else%}{{ custom_url }}{% endif %}" class="collection-grid-item__link">
    {% unless collection_image == blank %}
      <div class="collection-grid-item__overlay box ratio-container lazyload js"
        data-bgset="{% include 'bgset', image: collection_image %}"
        data-sizes="auto"
        data-parent-fit="cover"
        data-image-loading-animation>
      </div>
      <noscript>
        <div class="collection-grid-item__overlay" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
      </noscript>
    {% else %}
      {% if collection == empty %}
        <div class="collection-grid-item__overlay">
          {% capture current %}{% cycle 1, 2, 3 %}{% endcapture %}
          {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {% else %}
        <div class="collection-grid-item__overlay" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
      {% endif %}
    {% endunless %}

    <div class="collection-grid-item__title-wrapper">
      <div class="collection-grid-item__title h3">
        {% if collection.title == blank %}
          {{ 'homepage.onboarding.collection_title' | t }}
        {% else %}
          {{ collection.title }}
        {% endif %}
      </div>
    </div>
  </a>
</div>

 

Best Regards,

Achieve Team

Install Approovly to create and track order approvals | We want to hear from you hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Custom Shopify Apps achieveapplabs.com
Gem3
Tourist
10 0 2

Hi, thanks so much for responding!

I am using Debut theme.

 

0 Likes
Gem3
Tourist
10 0 2

Thanks so much for your help @achieveapplabs 

I have tried your solution but am getting error responses when pasting in the code from section 1  and I also cant see a "collection-grid-item.liquid" in sections.

I am guessing these two pieces of code enable the URL field to appear but I really have no idea about code so I am not sure what I am doing wrong.

These are the error codes I got from the  "collections-list.liquid" section

  • Line 287 — Liquid syntax error: Duplicate entries for tag: schema
    • Line 529 — Liquid syntax error: Unknown tag 'endschema

Hopefully there is a simple fix and thanks so much for your time!

 

0 Likes
achieveapplabs
Shopify Partner
470 36 74

This is an accepted solution.

Hi @Gem3 ,

 

Our apologies please look for collection-grid-item located in snippets/. Please make sure the entire content is being copied and pasted into those files.

 

Best,

Achieve Team

 

Install Approovly to create and track order approvals | We want to hear from you hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Custom Shopify Apps achieveapplabs.com
Gem3
Tourist
10 0 2

Thank you so much @achieveapplabs 

This solution works perfectly!

EveHiller
New Member
1 0 0

Hi, unfortunaterly when i use this code and insert the page url in the editor it does not work. When clicked on the collection a # is added between the domain url and the page, so the page won't load the custom url. Do you know why this # is inserted?

 

thank you so much for the help

0 Likes
achieveapplabs
Shopify Partner
470 36 74

Hi @EveHiller ,

I believe the issue you're having is with this line of code:

 <a href="{% if collection.products == empty %}#{%endif%}{% if custom_url == blank %}{{collection.url}}{%else%}{{ custom_url }}{% endif %}" class="collection-grid-item__link">

 

Please change it this this line below:

 <a href="{% if custom_url == blank %}{{collection.url}}{%else%}{{ custom_url }}{% endif %}" class="collection-grid-item__link">

 

Not sure why I was checking for an empty collection then returning #. Please let me know if that works for you. 

 

Sincerely,

Sam - Owner @ Achieve Applabs

Install Approovly to create and track order approvals | We want to hear from you hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Custom Shopify Apps achieveapplabs.com
0 Likes