Enterprise theme - Multi Column Section - Image Clickable

Linda_Ladley · January 10, 2024, 10:35pm

We use multi column layout via the Enterprise theme.

Can someone please confirm the code we need to use and where to place this in the multicolumn.liquid code to make the image clickable please without affecting number/size of images.

url - https://juniorbambinos.com

Thanks
Lind

{%- comment -%}theme-check-disable LiquidTag{%- endcomment -%}
{%- if section.blocks.size > 0 -%}
  {%- liquid
    # constants
    assign breakpoint_sm = 600
    assign breakpoint_md = 769
    assign breakpoint_lg = 1024

    if section.settings.layout == 'carousel'
      assign carousel = true
      if section.settings.column_size == 'small'
        assign grid_classes = 'grid-flow-col auto-cols-1 sm:auto-cols-2 md:auto-cols-3 lg:auto-cols-4 '
      elsif section.settings.column_size == 'medium'
        assign grid_classes = 'grid-flow-col auto-cols-1 md:auto-cols-2 lg:auto-cols-3'
      else
        assign grid_classes = 'grid-flow-col auto-cols-1 md:auto-cols-2'
      endif

    else
      assign carousel = false
    endif

    assign color_scheme = section.settings.color_scheme

    if section.settings.image_ratio == 'shortest'
      assign image_ratio = 0
      for block in section.blocks
        assign this_image_ratio = block.settings.image.aspect_ratio | default: 1.77
        if this_image_ratio > image_ratio
          assign image_ratio = this_image_ratio
        endif
      endfor
    elsif section.settings.image_ratio == 'tallest'
      assign image_ratio = 99
      for block in section.blocks
        assign this_image_ratio = block.settings.image.aspect_ratio | default: 1.77
        if this_image_ratio < image_ratio
          assign image_ratio = this_image_ratio
        endif
      endfor
    else
      assign image_ratio = section.settings.image_ratio
    endif
  -%}
  {%- if carousel == false -%}
    {% style %}
      {% if section.settings.column_size == 'small' %}
        @media (min-width: {{ breakpoint_sm }}px) {
          #{{ section.id }} .multi-column {
            width: calc(50% - var(--column-gap));
          }
        }
        @media (min-width: {{ breakpoint_md }}px) {
          #{{ section.id }} .multi-column {
            width: calc((100% / 3) - var(--column-gap));
          }
        }
        @media (min-width: {{ breakpoint_lg }}px) {
          #{{ section.id }} .multi-column {
            width: calc(25% - var(--column-gap));
          }
        }
      {% else %}
        @media (min-width: {{ breakpoint_md }}px) {
          #{{ section.id }} .multi-column {
            width: calc(50% - var(--column-gap));
          }
        }
        {% if section.settings.column_size == 'medium' %}
          @media (min-width: {{ breakpoint_lg }}px) {
            #{{ section.id }} .multi-column {
              width: calc((100% / 3) - var(--column-gap));
            }
          }
        {% endif %}
      {% endif %}
    {% endstyle %}
  {%- endif -%}

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

        

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

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

      

    {%- endif -%}

    {%- if carousel -%}
    
    {%- endif -%}
  

{%- endif -%}

{% schema %}
{
  "name": "Multi-column",
  "class": "cc-multi-column",
  "settings": [
    {
      "type": "header",
      "content": "Section header"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Multi-column"
    },
    {
      "type": "select",
      "id": "heading_align",
      "label": "Heading alignment",
      "options": [
        {
          "value": "text-start",
          "label": "Left"
        },
        {
          "value": "text-center",
          "label": "Center"
        },
        {
          "value": "text-end",
          "label": "Right"
        }
      ],
      "default": "text-start"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "View more label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "View more link"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        {
          "value": "carousel",
          "label": "Carousel"
        },
        {
          "value": "grid",
          "label": "Grid"
        }
      ],
      "default": "carousel"
    },
    {
      "type": "select",
      "id": "column_size",
      "label": "Column size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "medium"
    },
    {
      "type": "select",
      "id": "column_align",
      "label": "Content alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "media_align",
      "label": "Media alignment",
      "info": "Applies to small images with a \"Natural\" aspect ratio.",
      "options": [
        {
          "value": "text-left",
          "label": "Left"
        },
        {
          "value": "text-center",
          "label": "Center"
        }
      ],
      "default": "text-center"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Media aspect ratio",
      "options": [
        {
          "value": "natural",
          "label": "Natural"
        },
        {
          "value": "shortest",
          "label": "Height of shortest image"
        },
        {
          "value": "tallest",
          "label": "Height of tallest image"
        },
        {
          "value": "1.77",
          "label": "Landscape"
        },
        {
          "value": "1",
          "label": "Square"
        },
        {
          "value": "0.75",
          "label": "Portrait"
        }
      ],
      "default": "1"
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Color scheme",
      "options": [
        {
          "value": "none",
          "label": "Default"
        },
        {
          "value": "1",
          "label": "Scheme 1"
        },
        {
          "value": "2",
          "label": "Scheme 2"
        },
        {
          "value": "3",
          "label": "Scheme 3"
        }
      ],
      "default": "1"
    },
    {
      "type": "select",
      "id": "button_style",
      "label": "Buttons",
      "options": [
        {
          "value": "link",
          "label": "Link"
        },
        {
          "value": "btn btn--primary",
          "label": "Primary button"
        },
        {
          "value": "btn btn--secondary",
          "label": "Secondary button"
        }
      ],
      "default": "btn btn--secondary"
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "Column",
      "settings": [
        {
          "id": "enable_media",
          "type": "checkbox",
          "label": "Enable media",
          "default": true
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "video",
          "id": "video_shopify",
          "label": "Video upload",
          "info": "Hosted by Shopify. Video will autoplay and be muted. [Read more](https://cleancanvas.co.uk/support/enterprise/using-videos)"
        },
        {
          "type": "range",
          "id": "media_scale",
          "min": 65,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "Media scale",
          "default": 100
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Column"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "

Pair text with an image to focus on a product, collection or blog post. Add details on availability, style, or even provide a review.

"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label",
          "info": "Leave blank for an arrow button"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Multi-column",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": [
      "header",
      "footer",
      "aside"
    ]
  }
}
{% endschema %}

Made4uo-Ribe · January 10, 2024, 11:29pm

Hi @Linda_Ladley ,

This code is a section. Please follow the instructions below

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

Go to the Section folder, and add a new section.

Replaced the default code with your code. Make sure to SAVE.

Now, open the Theme Customizer, and add a section, look for the “Multi-column” section.

Please don’t forget to Like and Mark Solution to the post that helped you.

Dan-From-Ryviu · January 11, 2024, 9:16am

You can try to to use this code and check if it works

{%- comment -%}theme-check-disable LiquidTag{%- endcomment -%}
{%- if section.blocks.size > 0 -%}
  {%- liquid
    # constants
    assign breakpoint_sm = 600
    assign breakpoint_md = 769
    assign breakpoint_lg = 1024

    if section.settings.layout == 'carousel'
      assign carousel = true
      if section.settings.column_size == 'small'
        assign grid_classes = 'grid-flow-col auto-cols-1 sm:auto-cols-2 md:auto-cols-3 lg:auto-cols-4 '
      elsif section.settings.column_size == 'medium'
        assign grid_classes = 'grid-flow-col auto-cols-1 md:auto-cols-2 lg:auto-cols-3'
      else
        assign grid_classes = 'grid-flow-col auto-cols-1 md:auto-cols-2'
      endif

    else
      assign carousel = false
    endif

    assign color_scheme = section.settings.color_scheme

    if section.settings.image_ratio == 'shortest'
      assign image_ratio = 0
      for block in section.blocks
        assign this_image_ratio = block.settings.image.aspect_ratio | default: 1.77
        if this_image_ratio > image_ratio
          assign image_ratio = this_image_ratio
        endif
      endfor
    elsif section.settings.image_ratio == 'tallest'
      assign image_ratio = 99
      for block in section.blocks
        assign this_image_ratio = block.settings.image.aspect_ratio | default: 1.77
        if this_image_ratio < image_ratio
          assign image_ratio = this_image_ratio
        endif
      endfor
    else
      assign image_ratio = section.settings.image_ratio
    endif
  -%}
  {%- if carousel == false -%}
    {% style %}
      {% if section.settings.column_size == 'small' %}
        @media (min-width: {{ breakpoint_sm }}px) {
          #{{ section.id }} .multi-column {
            width: calc(50% - var(--column-gap));
          }
        }
        @media (min-width: {{ breakpoint_md }}px) {
          #{{ section.id }} .multi-column {
            width: calc((100% / 3) - var(--column-gap));
          }
        }
        @media (min-width: {{ breakpoint_lg }}px) {
          #{{ section.id }} .multi-column {
            width: calc(25% - var(--column-gap));
          }
        }
      {% else %}
        @media (min-width: {{ breakpoint_md }}px) {
          #{{ section.id }} .multi-column {
            width: calc(50% - var(--column-gap));
          }
        }
        {% if section.settings.column_size == 'medium' %}
          @media (min-width: {{ breakpoint_lg }}px) {
            #{{ section.id }} .multi-column {
              width: calc((100% / 3) - var(--column-gap));
            }
          }
        {% endif %}
      {% endif %}
    {% endstyle %}
  {%- endif -%}

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

        

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

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

      

    {%- endif -%}

    {%- if carousel -%}
    
    {%- endif -%}
  

{%- endif -%}

{% schema %}
{
  "name": "Multi-column",
  "class": "cc-multi-column",
  "settings": [
    {
      "type": "header",
      "content": "Section header"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Multi-column"
    },
    {
      "type": "select",
      "id": "heading_align",
      "label": "Heading alignment",
      "options": [
        {
          "value": "text-start",
          "label": "Left"
        },
        {
          "value": "text-center",
          "label": "Center"
        },
        {
          "value": "text-end",
          "label": "Right"
        }
      ],
      "default": "text-start"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "View more label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "View more link"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        {
          "value": "carousel",
          "label": "Carousel"
        },
        {
          "value": "grid",
          "label": "Grid"
        }
      ],
      "default": "carousel"
    },
    {
      "type": "select",
      "id": "column_size",
      "label": "Column size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "medium"
    },
    {
      "type": "select",
      "id": "column_align",
      "label": "Content alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "media_align",
      "label": "Media alignment",
      "info": "Applies to small images with a \"Natural\" aspect ratio.",
      "options": [
        {
          "value": "text-left",
          "label": "Left"
        },
        {
          "value": "text-center",
          "label": "Center"
        }
      ],
      "default": "text-center"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Media aspect ratio",
      "options": [
        {
          "value": "natural",
          "label": "Natural"
        },
        {
          "value": "shortest",
          "label": "Height of shortest image"
        },
        {
          "value": "tallest",
          "label": "Height of tallest image"
        },
        {
          "value": "1.77",
          "label": "Landscape"
        },
        {
          "value": "1",
          "label": "Square"
        },
        {
          "value": "0.75",
          "label": "Portrait"
        }
      ],
      "default": "1"
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Color scheme",
      "options": [
        {
          "value": "none",
          "label": "Default"
        },
        {
          "value": "1",
          "label": "Scheme 1"
        },
        {
          "value": "2",
          "label": "Scheme 2"
        },
        {
          "value": "3",
          "label": "Scheme 3"
        }
      ],
      "default": "1"
    },
    {
      "type": "select",
      "id": "button_style",
      "label": "Buttons",
      "options": [
        {
          "value": "link",
          "label": "Link"
        },
        {
          "value": "btn btn--primary",
          "label": "Primary button"
        },
        {
          "value": "btn btn--secondary",
          "label": "Secondary button"
        }
      ],
      "default": "btn btn--secondary"
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "Column",
      "settings": [
        {
          "id": "enable_media",
          "type": "checkbox",
          "label": "Enable media",
          "default": true
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "video",
          "id": "video_shopify",
          "label": "Video upload",
          "info": "Hosted by Shopify. Video will autoplay and be muted. [Read more](https://cleancanvas.co.uk/support/enterprise/using-videos)"
        },
        {
          "type": "range",
          "id": "media_scale",
          "min": 65,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "Media scale",
          "default": 100
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Column"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "

Pair text with an image to focus on a product, collection or blog post. Add details on availability, style, or even provide a review.

"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label",
          "info": "Leave blank for an arrow button"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Multi-column",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": [
      "header",
      "footer",
      "aside"
    ]
  }
}
{% endschema %}

Linda_Ladley · January 12, 2024, 8:26am

You’re an absolute star Dan - thank you this worked perfectly

Dan-From-Ryviu · January 12, 2024, 8:33am

I’m glad it could be helpful!

Topic		Replies	Views
Dawn Theme multicolumn: reduce padding between label and image, and make image clickable Store Design	6	23	May 4, 2022
Make Multicolumn Image Clickable in Trade Theme Store Design design , shopify-themes	5	43	April 15, 2025
Make the multicolumn images clickable Studio Team Store Design customizations	2	9	February 17, 2024
Make column clickable for multi-column section on craft theme Store Design design , customizations , collection-page , html	9	33	April 8, 2024
How can I make multicolumn images clickable in Sense Theme? Store Design	6	20	November 14, 2023

Enterprise theme - Multi Column Section - Image Clickable

Topic summary

Related topics