How Can I change the "View All" Button Link of Collection List

[palettepaws]

Hi, Is there a simple way to change these two "View All" Button to 2 different custom link?

First Button of "View All"
from palettepaws.com/collections
to palettepaws.com/pages/exampleONE

Second Button "View All" 
from palettepaws.com/collections
to palettepaws.com/pages/exampleTWO

I'm new to Shopify and currently using the Dawn Theme.
If there is a simple way of solution, could anyone please show me how to do it?

[ZestardTech · Accepted solution]

Hello @palettepaws 

To customize the collection list section in your Shopify theme, follow these steps:

Step 1: Open Theme Editor

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find sections > collection-list.liquid.

Step 2: Add Button Link Schema

After the existing checkbox schema, add the following code:

{
  "id": "link",
  "type": "url",
  "label": "Button link"
},

Step 3: Update View All Link

Remove the existing code:

   {%- if section.settings.show_view_all and show_mobile_slider -%}
          <a href="{{ routes.collections_url }}" class="link underlined-link large-up-hide">{{ 'sections.collection_list.view_all' | t }}</a>
        {%- endif -%}

Replace it with:

{%- if section.settings.show_view_all and show_mobile_slider -%}
  <a href="{{ section.settings.link }}" class="link underlined-link large-up-hide">{{ 'sections.collection_list.view_all' | t }}</a>
{%- endif -%}

Step 4: Update View All Button

Remove the existing code:

{%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
  <div class="center collection-list-view-all{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
    <a href="{{ routes.collections_url }}" class="button">{{ 'sections.collection_list.view_all' | t }}</a>
  </div>
{%- endif -%}

Replace it with:

{%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
  <div class="center collection-list-view-all{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
    <a href="{{ section.settings.link }}" class="button">{{ 'sections.collection_list.view_all' | t }}</a>
  </div>
{%- endif -%}

[palettepaws]

Awesome. Your instructions are very clear. and it's really helpful. It works. Thank you so much!

[ZestardTech]

Hello @palettepaws 

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

If helpful then please Like and Accept Solution.

[tarek_guma]

Awesome man! This worked like a charm. Great job! Thanks so much.