Linking multicolumn sections to collections hiding underlining

Andrecolap
Tourist
31 0 0

Hi there,

I would like to link my multicolumn sections to the respective collections and not to have the text underlined or to have the link only on a button. I would like the images, the title and the descriptions to be linked to the respective collections.

Any suggestions?

Thank you

 

Andrecolap_0-1703932009060.png

 

Replies 2 (2)

devmont-digital
Shopify Partner
30 3 4

Hi @Andrecolap ,

If you want to these changes then follow the steps below:


Step 1:

Go to "Online Store."
Edit Code.
Search for the "multicolumn.liquid" file.
Locate the {% schema %} tag and paste the provided code.

1.png

2.png

3.png

{
  "type": "url",
  "id": "link-1",
   "label": "Image Link"
 },

 

(Include the provided screenshot for reference)

tempsnip.png

 

Step 2:

Find the <ul> element with the class "multicolumn-list."
Replace the existing code.

<ul
        class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if show_mobile_slider %} slider slider--mobile grid--peek{% endif %}"
        id="Slider-{{ section.id }}"
        role="list"
      >
        {%- liquid
          assign highest_ratio = 0
          for block in section.blocks
            if block.settings.image.aspect_ratio > highest_ratio
              assign highest_ratio = block.settings.image.aspect_ratio
            endif
          endfor
        -%}
        {%- for block in section.blocks -%}
          {%- assign empty_column = '' -%}
          {%- if block.settings.image == blank
            and block.settings.title == blank
            and block.settings.text == blank
            and block.settings.link_label == blank
          -%}
            {%- assign empty_column = ' multicolumn-list__item--empty' -%}
          {%- endif -%}

          <li
            id="Slide-{{ section.id }}-{{ forloop.index }}"
            class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}{{ empty_column }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            {{ block.shopify_attributes }}
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style="--animation-order: {{ forloop.index }};"
            {% endif %}
          >
            <div class="multicolumn-card content-container">
              {%- if block.settings.image != blank -%}
                {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
                  {% assign spaced_image = true %}
                {% endif %}
                <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
                  <div
                    class="media media--transparent media--{{ section.settings.image_ratio }}"
                    {% if section.settings.image_ratio == 'adapt' %}
                      style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
                    {% endif %}
                  >
                    {%- liquid
                      assign number_of_columns = section.settings.columns_desktop
                      assign number_of_columns_mobile = section.settings.columns_mobile
                      assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
                      assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
                      assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px'
                      if section.settings.image_width == 'half'
                        assign image_width = 0.5
                      elsif section.settings.image_width == 'third'
                        assign image_width = 0.33
                      else
                        assign image_width = 1
                      endif
                    -%}
                    {% capture sizes %}
                      (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} /  {{ number_of_columns }}),
                      (min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}),
                      (min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}),
                      calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }})
                    {% endcapture %}
                    {{
                      block.settings.image
                      | image_url: width: 3200
                      | image_tag:
                        loading: 'lazy',
                        widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200',
                        sizes: sizes,
                        class: 'multicolumn-card__image'
                    }}
                  </div>
                </div>
              {%- endif -%}
              <div class="multicolumn-card__info">
                {%- if block.settings.title != blank -%}
                  <h3 class="inline-richtext">{{ block.settings.title }}</h3>
                {%- endif -%}
                {%- if block.settings.text != blank -%}
                  <div class="rte">{{ block.settings.text }}</div>
                {%- endif -%}
                {%- if block.settings.link_label != blank -%}
                  <a
                    class="link animate-arrow"
                    {% if block.settings.link == blank %}
                      role="link" aria-disabled="true"
                    {% else %}
                      href="{{ block.settings.link }}"
                    {% endif %}
                  >
                    {{- block.settings.link_label | escape -}}
                    <span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span></a
                  >
                {%- endif -%}
              </div>
            </div>
          </li>
        {%- endfor -%}
      </ul>

 

To this

<ul
        class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if show_mobile_slider %} slider slider--mobile grid--peek{% endif %}"
        id="Slider-{{ section.id }}"
        role="list"
      >
        {%- liquid
          assign highest_ratio = 0
          for block in section.blocks
            if block.settings.image.aspect_ratio > highest_ratio
              assign highest_ratio = block.settings.image.aspect_ratio
            endif
          endfor
        -%}
        {%- for block in section.blocks -%}
          {%- assign empty_column = '' -%}
          {%- if block.settings.image == blank
            and block.settings.title == blank
            and block.settings.text == blank
            and block.settings.link_label == blank
          -%}
            {%- assign empty_column = ' multicolumn-list__item--empty' -%}
          {%- endif -%}

          <li
            id="Slide-{{ section.id }}-{{ forloop.index }}"
            class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}{{ empty_column }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            {{ block.shopify_attributes }}
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style="--animation-order: {{ forloop.index }};"
            {% endif %}
          >
            <div class="multicolumn-card content-container">
              {%- if block.settings.image != blank -%}
                {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
                  {% assign spaced_image = true %}
                {% endif %}
                <div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
                  
                <!-- Link Condition Start -->
                  {%- if block.settings['link-1'] == blank -%}
                    <a href="#">
                      <div
                        class="media media--transparent media--{{ section.settings.image_ratio }}"
                        {% if section.settings.image_ratio == 'adapt' %}
                          style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
                        {% endif %}
                      >
                        {%- liquid
                          assign number_of_columns = section.settings.columns_desktop
                          assign number_of_columns_mobile = section.settings.columns_mobile
                          assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
                          assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
                          assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px'
                          if section.settings.image_width == 'half'
                            assign image_width = 0.5
                          elsif section.settings.image_width == 'third'
                            assign image_width = 0.33
                          else
                            assign image_width = 1
                          endif
                        -%}
                        {% capture sizes %}
                      (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} /  {{ number_of_columns }}),
                      (min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}),
                      (min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}),
                      calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }})
                    {% endcapture %}
                        {{
                          block.settings.image
                          | image_url: width: 3200
                          | image_tag:
                            widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200',
                            sizes: sizes,
                            class: 'multicolumn-card__image'
                        }}
                      </div>
                    </a>
                  {%- else -%}
                    <a href="{{ block.settings.link-1 }}">
                      <div
                        class="media media--transparent media--{{ section.settings.image_ratio }}"
                        {% if section.settings.image_ratio == 'adapt' %}
                          style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
                        {% endif %}
                      >
                        {%- liquid
                          assign number_of_columns = section.settings.columns_desktop
                          assign number_of_columns_mobile = section.settings.columns_mobile
                          assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
                          assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
                          assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px'
                          if section.settings.image_width == 'half'
                            assign image_width = 0.5
                          elsif section.settings.image_width == 'third'
                            assign image_width = 0.33
                          else
                            assign image_width = 1
                          endif
                        -%}
                        {% capture sizes %}
                      (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} /  {{ number_of_columns }}),
                      (min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}),
                      (min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}),
                      calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }})
                    {% endcapture %}
                        {{
                          block.settings.image
                          | image_url: width: 3200
                          | image_tag:
                            widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200',
                            sizes: sizes,
                            class: 'multicolumn-card__image'
                        }}
                      </div>
                    </a>
                  {%- endif -%}
                </div>
              {%- endif -%}
              <div class="multicolumn-card__info">
                {%- if block.settings.title != blank -%}
                  <h3 class="section-{{ section.id }} inline-richtext">{{ block.settings.title }}</h3>
                {%- endif -%}
                {%- if block.settings.text != blank -%}
                  <div class="section-{{ section.id }} rte">{{ block.settings.text }}</div>
                {%- endif -%}
                {%- if block.settings.link_label != blank -%}
                  <a
                    class="link animate-arrow"
                    {% if block.settings.link == blank %}
                      role="link" aria-disabled="true"
                    {% else %}
                      href="{{ block.settings.link }}"
                    {% endif %}
                  >
                    {{- block.settings.link_label | escape -}}
                    <span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span></a
                  >
                {%- endif -%}
              </div>
            </div>
          </li>
        {%- endfor -%}
      </ul>

 

(Include the provided screenshot for reference)

screencapture-admin-shopify-store-teamhr-store-themes-138408755413-2024-01-02-17_33_10 (1).png

 

Step 3:

Find the <style> tag in this file.

Paste the provided code.

.section-{{ section.id }}.inline-richtext a, .section-{{ section.id }}.rte p a {
    text-decoration: none;
}

 

(Include the provided screenshot for reference)

tempsnip.png

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at info@devmontdigital.io
Andrecolap
Tourist
31 0 0

Hi @devmont-digital 

Thank you very much for the detailed instructions.

I followed a tutorial on youtube and I managed to include anchor links on the images, and I think I will stay with the site as it is, but thanks again for your time.

With best

Andrea