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

Solved

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

raghid
Tourist
6 0 3

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. 

Screen Shot 2021-11-13 at 11.17.15 PM.png

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

Password: frohdo

Accepted Solution (1)
JHKCreate
Shopify Partner
3571 638 927

This is an accepted solution.

Hi @raghid 

This has been completed as per the below:

JHKCreate_0-1636836779643.png


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

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

View solution in original post

Replies 26 (26)

JHKCreate
Shopify Partner
3571 638 927

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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
raghid
Tourist
6 0 3

Hi @JHKCreate,

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

 

JHKCreate
Shopify Partner
3571 638 927

Just the theme, nothing more!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
raghid
Tourist
6 0 3

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

JHKCreate
Shopify Partner
3571 638 927

This is an accepted solution.

Hi @raghid 

This has been completed as per the below:

JHKCreate_0-1636836779643.png


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

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
raghid
Tourist
6 0 3

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

raghid
Tourist
6 0 3

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
Shopify Partner
3571 638 927

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

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
FCDev-761
Tourist
4 0 1

Hi,

 

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

 

Kind regards,

 

 

raghid
Tourist
6 0 3

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
Shopify Partner
3571 638 927

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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
FCDev-761
Tourist
4 0 1

Hi guys,

 

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

 

Its greatly appreciated!

 

Kind regards

JHKCreate
Shopify Partner
3571 638 927

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


Cheers

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
FCDev-761
Tourist
4 0 1

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
New Member
5 0 0

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
Visitor
1 0 0

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
Visitor
1 0 1

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

FCDev-761
Tourist
4 0 1

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
Visitor
1 0 0

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
Shopify Partner
3571 638 927

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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Ben1000
Trailblazer
262 3 71

Hi @JHKCreate 

 

Thank you for the solution.

 

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

 

Ben1000_0-1649105628160.png

 

Thanks

Bluewaterindust
New Member
4 0 0

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? 

Bluewaterindust_0-1652942842092.png

 

JHKCreate
Shopify Partner
3571 638 927

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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Ben1000
Trailblazer
262 3 71

Hi @JHKCreate 

 

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

Minutiaethelbl
Visitor
1 0 0

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

Bluewaterindust
New Member
4 0 0

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