How to add button on to each column of multicolumn - Dawn

[erika_brandlab1]

Please help with adding a 'LEARN MORE' button for each column in Multicolumn section. 

Currently I have this:

And I want it to look like this:

Thank you.

Link: https://kfhkg0ouanjj983j-68790550809.shopifypreview.com

Password: teagau

[mics]

To add a "LEARN MORE" button for each column in the Multicolumn section of the Dawn theme on Shopify, you can follow these steps:

1. Go to your Shopify admin and navigate to the Online Store > Themes section.
2. Click on the "Actions" button next to the Dawn theme and select "Edit code".
3. In the left sidebar, click on the "Sections" folder to expand it, and then click on the "multicolumn.liquid" file.
4. Scroll down to find the "multicolumn-item" section. This is where you will add the button code.
5. Add the following code underneath the "{{item.content}}" line:

phpCopy code

<div class="learn-more"> <a href="{{item.settings.link}}" class="btn">LEARN MORE</a> </div>

1. Save the file and go back to your Shopify admin.
2. Click on "Customize" to preview your changes.
3. To add a link for each button, go to each column in the multicolumn section and click on the "Edit" button. Then, add a link in the "Link" field under the "Item settings" section.

This should add a "LEARN MORE" button for each column in the multicolumn section of the Dawn theme on Shopify.

[erika_brandlab1]

I'm sorry, this didnt work. This is the code as of now:

{{ '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>

<style>

{%- style -%}

  .section-{{ section.id }}-padding {

    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;

    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;

  }

  @media screen and (min-width: 750px) {

    .section-{{ section.id }}-padding {

      padding-top: {{ section.settings.padding_top }}px;

      padding-bottom: {{ section.settings.padding_bottom }}px;

    }

  }

{%- endstyle -%}

{%- liquid

  assign columns_mobile_int = section.settings.columns_mobile | plus: 0

  assign show_mobile_slider = false

  if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int

    assign show_mobile_slider = true

  endif

-%}

<div class="multicolumn color-{{ section.settings.color_scheme }} gradient{% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}{% if section.settings.title == blank %} no-heading{% endif %}">

  <div class="page-width section-{{ section.id }}-padding isolate">

    {%- unless section.settings.title == blank -%}

      <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin">

        <h2 class="title {{ section.settings.heading_size }}">

          {{ section.settings.title | escape }}

        </h2>

        {%- if section.settings.button_label != blank and show_mobile_slider -%}

          <a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">{{ section.settings.button_label | escape }}</a>

        {%- endif -%}

      </div>

    {%- endunless -%}

    <slider-component class="slider-mobile-gutter">

      <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 }}" {{ block.shopify_attributes }}>

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

                    {%- capture 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){%- endcapture -%}

                    {{ block.settings.image | image_url: width: 1420 | image_tag:

                      loading: 'lazy',

                      sizes: sizes,

                      widths: '275, 550, 710, 1420',

                      class: 'multicolumn-card__image'

                    }}

                  </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.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>

      {%- if show_mobile_slider -%}

        <div class="slider-buttons no-js-hidden medium-hide">

          <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.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">{{ 'general.slider.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="{{ 'general.slider.next_slide' | t }}">{% render 'icon-caret' %}</button>

        </div>

      {%- endif -%}

    </slider-component>

    <div class="center{% if show_mobile_slider %} small-hide medium-hide{% endif %}">

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

        <a class="button button--primary"{% if section.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ section.settings.button_link }}"{% endif %}>

          {{ section.settings.button_label | escape }}

        </a>

      {%- endif -%}

    </div>

  </div>

</div>

{% schema %}

{

  "name": "t:sections.multicolumn.name",

  "class": "section",

  "tag": "section",

  "settings": [

    {

      "type": "text",

      "id": "title",

      "default": "Multicolumn",

      "label": "t:sections.multicolumn.settings.title.label"

    },

    {

      "type": "select",

      "id": "heading_size",

      "options": [

        {

          "value": "h2",

          "label": "t:sections.all.heading_size.options__1.label"

        },

        {

          "value": "h1",

          "label": "t:sections.all.heading_size.options__2.label"

        },

        {

          "value": "h0",

          "label": "t:sections.all.heading_size.options__3.label"

        }

      ],

      "default": "h1",

      "label": "t:sections.all.heading_size.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": "range",

      "id": "columns_desktop",

      "min": 1,

      "max": 6,

      "step": 1,

      "default": 3,

      "label": "t:sections.multicolumn.settings.columns_desktop.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"

        }

      ],

      "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": "select",

      "id": "color_scheme",

      "options": [

        {

          "value": "accent-1",

          "label": "t:sections.all.colors.accent_1.label"

        },

        {

          "value": "accent-2",

          "label": "t:sections.all.colors.accent_2.label"

        },

        {

          "value": "background-1",

          "label": "t:sections.all.colors.background_1.label"

        },

        {

          "value": "background-2",

          "label": "t:sections.all.colors.background_2.label"

        },

        {

          "value": "inverse",

          "label": "t:sections.all.colors.inverse.label"

        }

      ],

      "default": "background-1",

      "label": "t:sections.all.colors.label"

    },

    {

      "type": "header",

      "content": "t:sections.multicolumn.settings.header_mobile.content"

    },

    {

      "type": "select",

      "id": "columns_mobile",

      "options": [

        {

          "value": "1",

          "label": "t:sections.multicolumn.settings.columns_mobile.options__1.label"

        },

        {

          "value": "2",

          "label": "t:sections.multicolumn.settings.columns_mobile.options__2.label"

        }

      ],

      "default": "1",

      "label": "t:sections.multicolumn.settings.columns_mobile.label"

    },

    {

      "type": "checkbox",

      "id": "swipe_on_mobile",

      "default": false,

      "label": "t:sections.multicolumn.settings.swipe_on_mobile.label"

    },

    {

      "type": "header",

      "content": "t:sections.all.padding.section_padding_heading"

    },

    {

      "type": "range",

      "id": "padding_top",

      "min": 0,

      "max": 100,

      "step": 4,

      "unit": "px",

      "label": "t:sections.all.padding.padding_top",

      "default": 36

    },

    {

      "type": "range",

      "id": "padding_bottom",

      "min": 0,

      "max": 100,

      "step": 4,

      "unit": "px",

      "label": "t:sections.all.padding.padding_bottom",

      "default": 36

    }

  ],

  "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": "link_label",

          "label": "t:sections.multicolumn.blocks.column.settings.link_label.label"

        },

        {

          "type": "url",

          "id": "link",

          "label": "t:sections.multicolumn.blocks.column.settings.link.label"

        }

      ]

    }

  ],

  "presets": [

    {

      "name": "t:sections.multicolumn.presets.name",

      "blocks": [

        {

          "type": "column"

        },

        {

          "type": "column"

        },

        {

          "type": "column"

        }

      ]

    }

  ]

}

{% endschema %}

[Typostore]

Hello @erika_brandlab1 ,

you can enable section this on site, I'll check for you

because i don't see section this, so I can't give you code for it

thank you

[erika_brandlab1]

i activate this section on the site: 

https://kfhkg0ouanjj983j-68790550809.shopifypreview.com

same password.