Modify Tablist buttons to include photo and text

[LV_OnPar]

Hi,

My company website is https://onparshop.com/collections

I'm trying to modify the "Featured Collections" tablist which does what I want of filtering the collection within the same URL. What I'd like to achieve is adding pictures to each of the texts.

This is the code I need to edit based on what I can gather; however, I'm having a hard time modifying it to include both a photo and text as my filter buttons.

Any thoughts regarding what to change to have the buttons include picture and text?

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

 

[LuffyOnePiece · Accepted solution]

Hi,

You can use the collection image as the image.

Here is the sample code.

 {%- 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.image %}
      <img src="{{ collection | img_url: '50x50' }}" alt="{{ collection.image.alt }}" />
    {% else %}
      <img src="{{ collection.products.first | img_url: '50x50' }}" alt="{{ collection.title | escape  }}" />
    {% endif %}
    {%- if collection != empty -%}
      {{- block.settings.title | default: collection.title -}}
    {%- else -%}
      {{- 'home_page.onboarding.collection_title' | t -}}
    {%- endif -%}
  </button>
{%- endfor -%}
</div>

Please don't hesitate to reach out if you need further help optimizing or customizing your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece