Laying multicard info over multicolumn - Dawn theme

[twsmith]

Hi I’m trying to lay the multicard info (title and button) over the multicolumn card.

Using the position absolute I have managed to lay the element over the image but the multicard info appears seperate to the wrapper and not the same size.

To put simply I want to lay the title and button over the image in multicolumn in dawn theme, and have the ability to CSS move them where I would like on different images.

Thanks!

[mageplaza-cs]

Hi @twsmith

To overlay the title and button on the image inside the multicolumn section of the Dawn theme, and make sure they scale/align properly with the image, follow these steps:

Step 1: Structure Overview
In the Dawn theme, the multicolumn section usually has this structure per column card (simplified):

  

    
  

  
    ### Title
    Shop now
  

You want the .multicolumn-card__info (or its children) to sit over the image.

Step 2: Wrap the Content for Overlay
In the sections/multicolumn.liquid file, find where each card is rendered (usually inside a loop) and restructure it like this:

  

    {{ block.settings.image | image_url: width: 800 | image_tag }}
  

  
  
    

      ### {{ block.settings.title }}
      {{ block.settings.button_label }}
    

  

Note: Add relative to .multicolumn-card and absolute inset-0 to .multicolumn-card__overlay.

Step 3: Add CSS
Add this in your theme’s CSS (either base.css or through Theme > Edit Code > Assets > base.css):

.multicolumn-card {
  position: relative;
  overflow: hidden;
}

.multicolumn-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* if you don't want the overlay to block image click */
}

.text-overlay-content {
  pointer-events: auto;
  color: white; /* or any contrasting color */
}

/* Optional: for individual card positioning */
.multicolumn-card.card-1 .text-overlay-content {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1rem;
  text-align: left;
}

.multicolumn-card.card-2 .text-overlay-content {
  justify-content: flex-end;
  align-items: flex-end;
  padding: 2rem;
  text-align: right;
}

Tips

• To target each card individually, you can loop through the blocks and add a dynamic class like card-{{ forloop.index }}.
• Use inset-0, top-0, left-0, etc., for flexible positioning using Tailwind classes or custom CSS.

Please let me know if it works as expected!

Best regards

[twsmith]

Hi @mageplaza-cs thanks for your reply, I had a look and my code is structured slightly differently around wrapper etc; do you think it could still work?

Pasting the multicolumn liquid below;

{{ ‘section-multicolumn.css’ | asset_url | stylesheet_tag }}

{{ 'component-slider.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 -%}

{%- 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 -%}
• {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %} {% assign spaced_image = true %} {% endif %}

  {%- endif -%}

  {%- if block.settings.title != blank -%}

  {{ block.settings.title | escape }}

  {%- endif -%} {%- if block.settings.text != blank -%}

  {{ block.settings.text }}

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

{%- endfor -%}

{%- if section.settings.swipe_on_mobile -%}

{% render 'icon-caret' %}

1 / {{ 'accessibility.of' | t }} {{ section.blocks.size }}

{% render 'icon-caret' %}

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