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]

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!

[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,

[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 }}

  

    

      ## 
        {{ section.settings.title | escape }}
      
      {%- if section.settings.button_label != blank and section.settings.swipe_on_mobile -%}
        {{ section.settings.button_label | escape }}
      {%- endif -%}
    

    
    

      {%- if section.settings.button_label != blank -%}
        
          {{ section.settings.button_label | escape }}
        
      {%- endif-%}
    

  

{% 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": "

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.

",
          "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" %}

{{block.settings.title_button}}

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

[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