Add a button for each column in Multicolumn section - Dawn 2.0

[raghid]

Hello,

I am trying to add a button for each column in the Multicolumn section. Currently, the Multicolumn section has one button by default that is under all the columns. However, what I am trying to do is have a button under the description for each column. For example, if I have 3 columns then I would have 3 buttons. Is this possible? If so, how? Any help is appreciated!

This is how it currently is, with one button under all the columns. I would like to have 3 buttons under each column. 

Store URL: https://ragid-abu-izz.myshopify.com

Password: frohdo

[JHKCreate]

Hi @raghid 

Would you mind if we requested Collaborator access and got this done for you? This would be free of charge not to worry.

Cheers!

[raghid]

Hi @JHKCreate,

Wow, that would be really great! Yes please go ahead and request Collaborator access. What sections do you need access to?

[JHKCreate]

Just the theme, nothing more!

[raghid]

Done, please let me know once the change is made so I can have a look. Thanks so much!

[JHKCreate · Accepted solution]

Hi @raghid 

This has been completed as per the below:

To hide the button just type "Hide" inside the "Button Text" field. Let me know if all is well on that!

[raghid]

Wow this is exactly what I needed, thank you so much!! 

[raghid]

Hi @JHKCreate,

Sorry one more thing. The button text seems to be the title of the column. Is there a way to make the button text what I enter in the textbox instead please?

Update: Nevermind, I figured it out. Thanks again!

[JHKCreate]

Awesome! If you wouldn't mind dropping us a quick star or written review here that would awesome.

Cheers!

[FCDev-761]

Hi,

Would you please be able to help me with this also?

Kind regards,

[raghid]

Hey guys, Im not a coder and I honestly don't really know how they were able to help me. They updated my code and it just worked. And so, Ill share my code for the multicolumn section below and feel free to copy it to your own store. I would recommend duplicating your store just in case this messes up anything. Hope this help 😄

multicolumn.liquid code:

{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>

<div class="multicolumn background-{{ section.settings.background_style }}{% if section.settings.title == blank %} no-heading{% endif %}">
  <div class="page-width">
    <div class="title-wrapper-with-link title-wrapper--self-padded-mobile{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
      <h2 class="title">
        {{ section.settings.title | escape }}
      </h2>
      {%- if section.settings.button_label != blank and section.settings.swipe_on_mobile -%}
        <a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">{{ section.settings.button_label | escape }}</a>
      {%- endif -%}
    </div>
    <slider-component class="slider-mobile-gutter">
      <ul class="multicolumn-list grid grid--1-col{% if section.blocks.size > 3 and section.settings.image_width != 'full' %} grid--2-col-tablet grid--4-col-desktop{% elsif section.blocks.size > 3 and section.settings.image_width == 'full' %} grid--2-col-tablet{% else %} grid--3-col-tablet{% endif %}{% if section.settings.swipe_on_mobile and section.blocks.size > 1 %} 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 -%}
          <li class="multicolumn-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}{% if section.settings.column_alignment == 'center' %} center{% endif %}" {{ block.shopify_attributes }}>
            <div class="multicolumn-card">
              {%- 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 %}>
                    <img
                      srcset="{%- if block.settings.image.width >= 275 -%}{{ block.settings.image | img_url: '275x' }} 275w,{%- endif -%}
                        {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | img_url: '550x' }} 550w,{%- endif -%}
                        {%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
                        {%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}
                        {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                      src="{{ block.settings.image | img_url: '550x' }}"
                      sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
                        (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
                        calc(100vw - 30px)"
                      alt="{{ block.settings.image.alt }}"
                      height="{{ block.settings.image.height }}"
                      width="{{ block.settings.image.width }}"
                      loading="lazy"
                    >
                  </div>
                </div>
              {%- endif -%}
              <div class="multicolumn-card__info">
                {%- if block.settings.title != blank -%}
                  <h3>{{ block.settings.title | escape }}</h3>
                {%- endif -%}
                {%- if block.settings.text != blank -%}
                  <div class="rte">{{ block.settings.text }}</div>
                {%- endif -%}
                
                {% if block.settings.title_button != "Hide" %}
                <a {% if block.settings.url_button != blank %} href="{{ block.settings.url_button }}"{% endif %} class="button button--primary" role="link">
          {{block.settings.title_button}}
        </a>
                {%endif%}
              </div>
            </div>
          </li>
        {%- endfor -%}
      </ul>

      {%- if section.settings.swipe_on_mobile -%}
        <div class="slider-buttons no-js-hidden medium-hide{% if section.blocks.size < 2 %} small-hide{% endif %}">
          <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
            <span class="slider-counter--total">{{ section.blocks.size }}</span>
          </div>
          <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
        </div>
      {%- endif -%}
    </slider-component>
    <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
      {%- if section.settings.button_label != blank -%}
        <a class="button button--primary"{% if section.settings.button_link == blank %} aria-disabled="true" role="link"{% else %} href="{{ section.settings.button_link }}"{% endif %}>
          {{ section.settings.button_label | escape }}
        </a>
      {%- endif-%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.multicolumn.name",
  "class": "spaced-section spaced-section--full-width",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Multicolumn",
      "label": "t:sections.multicolumn.settings.title.label"
    },
    {
      "type": "select",
      "id": "image_width",
      "options": [
        {
          "value": "third",
          "label": "t:sections.multicolumn.settings.image_width.options__1.label"
        },
        {
          "value": "half",
          "label": "t:sections.multicolumn.settings.image_width.options__2.label"
        },
        {
          "value": "full",
          "label": "t:sections.multicolumn.settings.image_width.options__3.label"
        }
      ],
      "default": "full",
      "label": "t:sections.multicolumn.settings.image_width.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.multicolumn.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.multicolumn.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.multicolumn.settings.image_ratio.options__3.label"
        },
        {
          "value": "circle",
          "label": "t:sections.multicolumn.settings.image_ratio.options__4.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.multicolumn.settings.image_ratio.label"
    },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.multicolumn.settings.column_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.multicolumn.settings.column_alignment.options__2.label"
        }
      ],
      "default": "left",
      "label": "t:sections.multicolumn.settings.column_alignment.label"
    },
    {
      "type": "select",
      "id": "background_style",
      "options": [
        {
          "value": "none",
          "label": "t:sections.multicolumn.settings.background_style.options__1.label"
        },
        {
          "value": "primary",
          "label": "t:sections.multicolumn.settings.background_style.options__2.label"
        },
        {
          "value": "secondary",
          "label": "t:sections.multicolumn.settings.background_style.options__3.label"
        }
      ],
      "default": "primary",
      "label": "t:sections.multicolumn.settings.background_style.label"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "t:sections.multicolumn.settings.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.multicolumn.settings.button_link.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.multicolumn.settings.swipe_on_mobile.label"
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "t:sections.multicolumn.blocks.column.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.multicolumn.blocks.column.settings.image.label"
        },
        {
          "type": "text",
          "id": "title",
          "default": "Column",
          "label": "t:sections.multicolumn.blocks.column.settings.title.label"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "t:sections.multicolumn.blocks.column.settings.text.label"
        },
 		{
          "type": "text",
          "id": "title_button",
          "default": "Test",
          "label": "Button Text"
        },
 		{
          "type": "url",
          "id": "url_button",
          "default": "/",
          "label": "Button Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.multicolumn.presets.name",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ]
}
{% endschema %}

section-mulitcolumn.css code:

.multicolumn .title {
  margin: 0;
}

.multicolumn.no-heading .title {
  display: none;
}

@media screen and (max-width: 749px) {
  .multicolumn.no-heading.background-secondary {
    padding-top: 5rem;
  }
}

@media screen and (min-width: 750px) {
  .multicolumn.no-heading:not(.background-secondary) {
    margin-top: calc(3rem + var(--page-width-margin));
  }
}

.multicolumn.background-secondary .title-wrapper-with-link {
  margin-top: 0;
}

@media screen and (max-width: 749px) {
  .multicolumn .title-wrapper-with-link {
    margin-bottom: 3rem;
  }
}

.multicolumn-card__image-wrapper--third-width {
  width: 33%;
}

.multicolumn-card__image-wrapper--half-width {
  width: 50%;
}

.multicolumn-list__item.center
  .multicolumn-card__image-wrapper:not(.multicolumn-card__image-wrapper--full-width),
.multicolumn-list__item:only-child {
  margin-left: auto;
  margin-right: auto;
}

.multicolumn .button {
  margin-top: 1.5rem;
}

@media screen and (min-width: 750px) {
  .multicolumn .button {
    margin-top: 1rem;
    padding: 1.0rem 0.5rem 1.0rem;
    text-align: center;
  }
}

.multicolumn-list {
  margin-bottom: 0;
  padding: 0;
}

.multicolumn-list__item:only-child {
  max-width: 72rem;
}

.multicolumn:not(.background-none) .multicolumn-card {
  background: rgba(var(--color-foreground), 0.04);
  height: 100%;
}

.multicolumn.background-secondary .multicolumn-card {
  background: rgb(var(--color-background));
}

.multicolumn.background-secondary {
  padding: 4rem 0 5rem;
}

@media screen and (min-width: 750px) {
  .multicolumn.background-secondary {
    padding: calc(4rem + var(--page-width-margin)) 0
      calc(5rem + var(--page-width-margin));
  }
}

@media screen and (max-width: 749px) {
  .multicolumn.background-secondary .slider-buttons {
    margin-bottom: -2rem;
  }
}

.multicolumn:not(.background-secondary) {
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  .multicolumn:not(.background-secondary) {
    margin: calc(5rem + var(--page-width-margin)) 0;
  }
}

.multicolumn-list h3 {
  line-height: calc(1 + 0.5 / max(1, var(--font-heading-scale)));
  font-weight: bold;
}

.multicolumn-list h3,
.multicolumn-list p {
  margin: 0;
}

.multicolumn-card-spacing {
  padding-top: 2.5rem;
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

.multicolumn-card__info > :nth-child(2) {
  margin-top: 1rem;
}

.multicolumn-list__item.center .media--adapt,
.multicolumn-list__item .media--adapt img {
  width: auto;
}

.multicolumn-list__item.center .media--adapt img {
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 749px) {
  .multicolumn .page-width {
    padding: 0;
  }

  .multicolumn-list {
    margin: 0;
    width: 100%;
  }

  .multicolumn-list__item {
    margin: 0 0 1rem;
    padding: 0;
  }

  .multicolumn-list:not(.slider) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .multicolumn-list.slider .multicolumn-list__item {
    width: calc(100% - 3rem);
  }

  .multicolumn-list.slider .multicolumn-list__item + .multicolumn-list__item {
    padding-left: 0.5rem;
  }
}

@media screen and (min-width: 750px) {
  .multicolumn-list.slider,
  .multicolumn-list.grid--4-col-desktop {
    padding: 0;
  }

  .multicolumn-list__item,
  .grid--4-col-desktop .multicolumn-list__item {
    padding-bottom: 0;
  }

  .grid--2-col-tablet .multicolumn-list__item {
    margin-top: 1rem;
    max-width: 50%;
  }

  .background-none .grid--2-col-tablet .multicolumn-list__item {
    margin-top: 4rem;
  }

  .grid--2-col-tablet .multicolumn-list__item:nth-of-type(-n + 2) {
    margin-top: 0;
  }
}

@media screen and (min-width: 990px) {
  .grid--2-col-tablet.grid--4-col-desktop .multicolumn-list__item {
    max-width: 25%;
  }

  .grid--2-col-tablet.grid--4-col-desktop
    .multicolumn-list__item:nth-of-type(-n + 4) {
    margin-top: 0;
  }
}

.background-none .multicolumn-card-spacing {
  padding: 0;
  margin: 0;
}

.multicolumn-card__info {
  padding: 2.5rem 2.5rem;
}

.background-none .multicolumn-card__info {
  padding-top: 1;
  padding-left: 0;
  padding-right: 0;
}

.background-none .multicolumn-card__image-wrapper + .multicolumn-card__info {
  padding-top: 7%;
}

.background-none .slider .multicolumn-card__info {
  padding-left: 0.5rem;
}

.background-none
  .slider
  .multicolumn-card__image-wrapper
  + .multicolumn-card__info {
  padding-left: 1.5rem;
}

.background-none
  .multicolumn-list:not(.slider)
  .center
  .multicolumn-card__info {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

@media screen and (min-width: 750px) {
  .background-none .multicolumn-card__image-wrapper {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .background-none .multicolumn-list .multicolumn-card__info,
  .background-none
    .multicolumn-list:not(.slider)
    .center
    .multicolumn-card__info {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

[JHKCreate]

Hello Everyone!

The solution is to take @raghid 's code as is, alternatively you should only add the following pieces of code:

{% if block.settings.title_button != "Hide" %}
<a {% if block.settings.url_button != blank %} href="{{ block.settings.url_button }}"{% endif %} class="button button--primary" role="link">
{{block.settings.title_button}}
</a>

Then add the schema below:

{
          "type": "text",
          "id": "title_button",
          "default": "Test",
          "label": "Button Text"
        },
 		{
          "type": "url",
          "id": "url_button",
          "default": "/",
          "label": "Button Link"
        }

Let me know if this helps!

[FCDev-761]

Hi guys,

Thank you so much for the help and the incredibly quick response! It worked perfectly!!

Its greatly appreciated!

Kind regards

[JHKCreate]

You're welcome @FCDev-761 ! Don't forget to like our answers to highlight them to the community better!

Cheers

[FCDev-761]

Yes sure, of course! Another quick question, is there a way we could hide the buttons too? As I use the multicolumn customizer on my home page, which shows 3 products with a buy now button. However I also use to multicolumn customizer to show testimonials, and I do not want a button showed underneath here.

Hi, SORRY I FOUND OUT HOW TO DO IT. THANK YOU AGAIN

[tayajane]

Hello, hope your well. 

I am wondering if this code would work in Booklyn Theme? If so where would i need to add it in?

[KJ24]

Hi @JHKCreate ,

I've found your instructions above on how to add buttons to a multicolumn and have now added buttons successfully to a Refresh theme - amazing, thank you!

The issue I have now is with the style of the button.  All my other buttons on my site have a shadow.  However, with these buttons, the shadow is only appearing when the cursor is hovering over the button.  I can't see where to change this to make it fixed.  Any ideas please? 

Thanks, 

KJ

[janiciabenjamin]

Hi, I’m also trying to get the buttons under the different columns. How was this done?

[FCDev-761]

Hi,

Would you be able to show me how you would do this? 

I am also looking to add a button under each column (3 columns)

Kind regards,

[BondiBC]

Hi @JHKCreate,

I am also having the same issue. Would you be able to shed some light on what was done to create this option within the multicolumn?

Thanks in advance!

[JHKCreate]

Hi @BondiBC 

If you're using the Dawn 2.0 , replace all the code of the file mentioned above to get the functionality. You can also hide the buttons by typing "Hide" in the button text field.

Let me know if you require further assistance!

[Ben1000]

Hi @JHKCreate 

Thank you for the solution.

How can I add an option to use the outline button style, like in rich text section:

Thanks

[Bluewaterindust]

Thanks @JHKCreate for the info,

Im just playing around with the code change and was wondering If its possible could to make the buttons the same as the standard Dawn theme and not Black? 

[JHKCreate]

Hi @Bluewaterindust !

This should be a simple fix, you can check what the HTML class for the standard button and replace the classes we have. 

If you'd like to share your website's link we can tell you what to do in more detail. Thanks!

[Ben1000]

Hi @JHKCreate 

I have the same problem, it's not working well with the Dawn 2.0

[Minutiaethelbl]

Hello, I tried this however it shows the word hide, please can you help ? Thanks 

[Bluewaterindust]

Try typing it in as Hide and make sure there’s no space in front