Create collection filter with photos

[LV_OnPar]

Hi,

My website is OnParShop. I'm trying to edit my collections landing page. My theme is Prestige.

https://onparshop.com/collections

What I'd like to achieve is to create a collections filter that combines pictures and text.

I added "List Collections Page"  but this redirects to a different landing page.

I also added the "Featured Collections" option which does what I want of filtering, the collection within the same tab. What I'd like to achieve is adding pictures to the "Featured Collections" so it does not show only text. So "Performance" would have a picture associated with and same for "Blade".

I would delete/remove the top section of "List Collections Page".

[DitalTek]

@LV_OnPar 

To hide a section, you can hover to it on section list and click to eye icon here make it hidden and then you click to save.

I added "List Collections Page"  but this redirects to a different landing page.

I also added the "Featured Collections" option which does what I want of filtering, the collection within the same tab. What I'd like to achieve is adding  pictures to the "Featured Collections" so it does not show only text. So "Performance" would have a picture associated with and same for "Blade".

Can you please make more detail those points you mention here?

[LV_OnPar]

Thanks @DitalTek ,

I've hid the "List collections page" so all I have now is the filter section, the question now becomes how can I add a picture to it?

I want to add a picture to have a visual representation of the different types of shirts, so that customers don't just rely on text when clicking on each picture.

Any thoughts?

As @hanji1 suggested, I need to use custom code; I'm just wondering what is the right code to include.

[hanji1]

It sounds like you're on the right track! To add pictures to the "Featured Collections," you might need to use custom code or see if there's an option in your theme settings. Removing the "List Collections Page" section should help streamline the look. Good luck!

[LV_OnPar]

UPDATE:

This is the CSS code I believe I need to modify. Any thoughts regarding what to change to have picture and text as the buttons?

{%- if section.blocks.size > 1 -%}
<div class="SectionHeader__TabList TabList" role="tablist">
{%- for block in section.blocks -%}
{%- assign collection = collections[block.settings.collection] -%}

<button class="Heading u-h1 TabList__Item {% if forloop.first %}is-active{% endif %}" data-action="toggle-tab" aria-controls="block-{{ block.id }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}" role="tab">
{%- if collection != empty -%}
{{- block.settings.title | default: collection.title -}}
{%- else -%}
{{- 'home_page.onboarding.collection_title' | t -}}
{%- endif -%}
</button>
{%- endfor -%}