Unlock Dynamic Layouts: Adding Custom Bento Grid Sections to Your Shopify Kalles Theme

View original discussion by saqlain1 on Shopify Community →

Hey everyone! As a Shopify migration expert and someone who loves digging into what makes stores tick, I often see merchants looking for ways to push their theme's boundaries. A common challenge? Wanting a specific, eye-catching layout that isn't built into their theme's standard sections. That's exactly what happened in a recent community discussion I followed, centered around a store owner, @saqlain1, who was using the Kalles theme and wanted to replicate a unique 'cookware showcase' section they'd seen elsewhere. They felt it might not be possible without custom code, and you know what? They were right, but the community quickly stepped up with some fantastic solutions!

The section @saqlain1 was referring to, visible in their screenshot, is a beautiful example of what we often call a 'bento grid' or a 'mosaic layout.' It's a dynamic, responsive grid of tiles that can mix images, videos, and text-based 'stat cards' to create a really engaging visual story. Think of it as a highly customizable collage for your product features or brand story.

Screenshot 2026-08-01 230953

It's a fantastic way to showcase product features, brand values, or lifestyle content in a visually rich way. Luckily, a couple of brilliant minds in the Shopify community provided comprehensive code solutions, proving that with a little custom Liquid and CSS, you can achieve almost any layout you envision for your Shopify store.

Solution 1: The 'Cookware Showcase Grid' (Detailed Breakdown)

The first detailed response came from oscprofessional, who provided a complete custom section designed specifically for a 'cookware showcase.' This solution separates the Liquid logic from the CSS styling, which is often considered good practice for organization.

Key Features of this Section:

  • Flexible Media Blocks: Features a tall left media block and a wide right media block, both supporting images or autoplaying, muted videos.
  • Dynamic Stat Cards: Includes a row of customizable 'stat cards' where you can display numbers (e.g., "1000°F*") or logo images with descriptive labels.
  • Full-Width Banner: A prominent bottom banner section for additional messaging or imagery.
  • Theme Editor Control: Once installed, all content (images, videos, text, colors, spacing) is fully editable from the Shopify theme customizer, no further code needed!
  • Responsive Design: The grid intelligently rearranges for mobile, ensuring a great experience on any device.

How to Add the 'Cookware Showcase Grid' Section:

Before you start, remember the golden rule: always duplicate your theme first! This ensures you have a backup if anything goes awry. You can do this by going to your Shopify admin > Online Store > Themes, finding your Kalles theme, clicking 'Actions' > 'Duplicate'. Now, let's dive into the code:

  1. Open your Theme's Code Editor:
    • From your Shopify admin, go to Online Store > Themes.
    • Find your current Kalles theme and click Actions > Edit code.
  2. Create the CSS File:
    • Under the Assets directory, click Add a new asset (or Add a new file if that's the option).
    • Name the file section-cookware-showcase.css and paste in the CSS code provided below. Click Done or Save.
  3. Create the Liquid Section File:
    • Under the Sections directory, click Add a new section.
    • Name the file cookware-showcase-section.liquid.
    • Delete any pre-existing sample content in this new file and paste in the Liquid code provided below. Click Save.
  4. Add and Customize the Section:
    • Go back to your Shopify admin, then Online Store > Themes.
    • Click Customize on your current Kalles theme.
    • On any page where you want this section, click Add section in the left sidebar.
    • You'll now see 'Cookware showcase grid' as an option. Select it, and you can fill in all your images, videos, headings, and stat card content directly from the theme editor sidebar.

Code for cookware-showcase-section.liquid:

{{ 'section-cookware-showcase.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign left_media_type = section.settings.left_media_type
  assign right_media_type = section.settings.right_media_type
  assign stat_blocks = section.blocks | where: 'type', 'stat'
-%}



  


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

        {{ section.settings.top_heading }}
      

    {%- endif -%}

    


      {%- comment -%} ---------- LEFT TALL MEDIA BLOCK ---------- {%- endcomment -%}
      

        {%- if left_media_type == 'video' and section.settings.left_video != blank -%}
          

            {{ section.settings.left_video | video_tag: autoplay: true, loop: true, muted: true, controls: false, class: 'tc-media tc-video-el' }}
          

        {%- elsif section.settings.left_image != blank -%}
          

            {{ section.settings.left_image.alt | escape }}
          

        {%- else -%}
          
{{ 'image' | placeholder_svg_tag: 'tc-placeholder-svg' }}

        {%- endif -%}

        {%- if section.settings.left_show_pause_icon -%}
          
        {%- endif -%}

        

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

          {%- endif -%}
          {%- if section.settings.left_title != blank -%}
            
{{ section.settings.left_title }}

          {%- endif -%}
        

      


      {%- comment -%} ---------- STAT BLOCKS ---------- {%- endcomment -%}
      

        {%- for block in stat_blocks -%}
          

            {%- if block.settings.stat_style == 'logo_image' and block.settings.stat_image != blank -%}
              
            {%- else -%}
              {%- if block.settings.stat_value != blank -%}
                
{{ block.settings.stat_value }}

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

            {%- endif -%}
          

        {%- endfor -%}
      


      {%- comment -%} ---------- WIDE VIDEO/IMAGE BLOCK ---------- {%- endcomment -%}
      

        {%- if right_media_type == 'video' and section.settings.right_video != blank -%}
          

            {{ section.settings.right_video | video_tag: autoplay: true, loop: true, muted: true, controls: false, class: 'tc-media tc-video-el' }}
          

        {%- elsif section.settings.right_image != blank -%}
          

            {{ section.settings.right_image.alt | escape }}
          

        {%- else -%}
          
{{ 'lifestyle-1' | placeholder_svg_tag: 'tc-placeholder-svg' }}

        {%- endif -%}

        {%- if section.settings.right_show_pause_icon -%}
          
        {%- endif -%}
      


      {%- comment -%} ---------- FULL WIDTH BOTTOM BANNER ---------- {%- endcomment -%}
      

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

            {{ section.settings.bottom_image.alt | escape }}
          

        {%- else -%}
          
{{ 'lifestyle-2' | placeholder_svg_tag: 'tc-placeholder-svg' }}

        {%- endif -%}

        

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

          {%- endif -%}
          {%- if section.settings.bottom_title != blank -%}
            
{{ section.settings.bottom_title }}

          {%- endif -%}
          {%- if section.settings.bottom_description != blank -%}
            
{{ section.settings.bottom_description }}

          {%- endif -%}
        

      


    

  






{% schema %}
{
  "name": "Cookware showcase grid",
  "tag": "section",
  "class": "tc-showcase-section",
  "settings": [
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "container_width",
      "label": "Max content width (px)",
      "min": 960,
      "max": 1600,
      "step": 20,
      "default": 1200
    },
    {
      "type": "range",
      "id": "grid_gap",
      "label": "Grid gap (px)",
      "min": 0,
      "max": 40,
      "step": 2,
      "default": 16
    },
    {
      "type": "range",
      "id": "corner_radius",
      "label": "Corner radius (px)",
      "min": 0,
      "max": 32,
      "step": 2,
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding top - desktop (px)",
      "min": 0,
      "max": 120,
      "step": 4,
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding bottom - desktop (px)",
      "min": 0,
      "max": 120,
      "step": 4,
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_top_mobile",
      "label": "Padding top - mobile (px)",
      "min": 0,
      "max": 80,
      "step": 4,
      "default": 32
    },
    {
      "type": "range",
      "id": "padding_bottom_mobile",
      "label": "Padding bottom - mobile (px)",
      "min": 0,
      "max": 80,
      "step": 4,
      "default": 32
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "section_bg_color",
      "label": "Section background",
      "default": "#2b2926"
    },
    {
      "type": "color",
      "id": "card_bg_color",
      "label": "Stat card background",
      "default": "#3a3733"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Top heading"
    },
    {
      "type": "richtext",
      "id": "top_heading",
      "label": "Heading",
      "default": "
Cook like a pro in your own home with our chef-approved, high-performance titanium cookware built to last a lifetime.
"
    },
    {
      "type": "header",
      "content": "Left media block (Ultimate Performance)"
    },
    {
      "type": "select",
      "id": "left_media_type",
      "label": "Media type",
      "options": [
        { "value": "image", "label": "Image" },
        { "value": "video", "label": "Video" }
      ],
      "default": "image"
    },
    {
      "type": "image_picker",
      "id": "left_image",
      "label": "Image"
    },
    {
      "type": "video",
      "id": "left_video",
      "label": "Video (used if media type is Video)"
    },
    {
      "type": "checkbox",
      "id": "left_show_pause_icon",
      "label": "Show play/pause control",
      "default": true
    },
    {
      "type": "text",
      "id": "left_label",
      "label": "Eyebrow label",
      "default": "Designed for"
    },
    {
      "type": "text",
      "id": "left_title",
      "label": "Title",
      "default": "Ultimate Performance"
    },
    {
      "type": "header",
      "content": "Wide media block (lifestyle video)"
    },
    {
      "type": "select",
      "id": "right_media_type",
      "label": "Media type",
      "options": [
        { "value": "image", "label": "Image" },
        { "value": "video", "label": "Video" }
      ],
      "default": "image"
    },
    {
      "type": "image_picker",
      "id": "right_image",
      "label": "Image"
    },
    {
      "type": "video",
      "id": "right_video",
      "label": "Video (used if media type is Video)"
    },
    {
      "type": "checkbox",
      "id": "right_show_pause_icon",
      "label": "Show play/pause control",
      "default": true
    },
    {
      "type": "header",
      "content": "Bottom full-width banner"
    },
    {
      "type": "image_picker",
      "id": "bottom_image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "bottom_eyebrow",
      "label": "Eyebrow label",
      "default": "For now, for always"
    },
    {
      "type": "text",
      "id": "bottom_title",
      "label": "Title",
      "default": "Lasts a Lifetime"
    },
    {
      "type": "richtext",
      "id": "bottom_description",
      "label": "Description",
      "default": "
Powered by a fusion of ultra-durable, high-performance, non-toxic materials
"
    }
  ],
  "blocks": [
    {
      "type": "stat",
      "name": "Stat card",
      "settings": [
        {
          "type": "select",
          "id": "stat_style",
          "label": "Content type",
          "options": [
            { "value": "text", "label": "Number / text" },
            { "value": "logo_image", "label": "Logo image" }
          ],
          "default": "text"
        },
        {
          "type": "text",
          "id": "stat_value",
          "label": "Big value (e.g. 1000\u00b0F*)",
          "default": "1000\u00b0F*"
        },
        {
          "type": "image_picker",
          "id": "stat_image",
          "label": "Logo image (used if content type is Logo image)"
        },
        {
          "type": "text",
          "id": "stat_label",
          "label": "Label",
          "default": "high heat safe"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Cookware showcase grid",
      "blocks": [
        { "type": "stat", "settings": { "stat_style": "text", "stat_value": "1000\u00b0F*", "stat_label": "high heat safe (*Gold: 750\u00b0F)" } },
        { "type": "stat", "settings": { "stat_style": "logo_image", "stat_label": "" } },
        { "type": "stat", "settings": { "stat_style": "text", "stat_value": "300%", "stat_label": "harder than stainless steel" } }
      ]
    }
  ]
}
{% endschema %}

Code for section-cookware-showcase.css:

/* ==========================================================================
   Cookware Showcase Grid Section
   Place this file in your theme's /assets folder.
   ========================================================================== */

.tc-section {
  background: var(--tc-bg, #2b2926);
  color: var(--tc-text, #ffffff);
  padding-top: var(--tc-pt-mobile, 32px);
  padding-bottom: var(--tc-pb-mobile, 32px);
}

@media screen and (min-width: 750px) {
  .tc-section {
    padding-top: var(--tc-pt-desktop, 60px);
    padding-bottom: var(--tc-pb-desktop, 60px);
  }
}

.tc-container {
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (min-width: 750px) {
  .tc-container {
    padding: 0 32px;
  }
}

/* ---------- Heading ---------- */

.tc-heading {
  font-size: 22px;
  line-height: 1.35;
  font-family: var(--font-heading-family, Georgia, 'Times New Roman', serif);
  max-width: 720px;
  margin: 0 0 24px;
  color: var(--tc-text, #ffffff);
}

@media screen and (min-width: 750px) {
  .tc-heading {
    font-size: 28px;
    margin-bottom: 32px;
  }
}

.tc-heading p {
  margin: 0;
}

/* ---------- Grid ---------- */

.tc-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "left"
    "stats"
    "video"
    "bottom";
  gap: var(--tc-gap, 16px);
}

@media screen and (min-width: 750px) {
  .tc-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "left stats stats stats"
      "left video video video"
      "bottom bottom bottom bottom";
  }
}

.tc-left   { grid-area: left; }
.tc-stats  { grid-area: stats; }
.tc-video  { grid-area: video; }
.tc-bottom { grid-area: bottom; }

/* ---------- Generic cell ---------- */

.tc-cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--tc-radius, 0px);
  background: var(--tc-card-bg, #3a3733);
  min-height: 220px;
}

.tc-left {
  min-height: 320px;
}

@media screen and (min-width: 750px) {
  .tc-left {
    min-height: 100%;
  }
}

.tc-video {
  min-height: 220px;
}

@media screen and (min-width: 750px) {
  .tc-video {
    min-height: 0;
  }
}

.tc-bottom {
  min-height: 320px;
}

@media screen and (min-width: 990px) {
  .tc-bottom {
    min-height: 420px;
  }
}

/* ---------- Media ---------- */

.tc-media-wrap {
  position: absolute;
  inset: 0;
}

.tc-media,
.tc-media-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tc-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #444139;
}

.tc-placeholder-svg {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

/* ---------- Overlay text ---------- */

.tc-overlay-text {
  position: relative;
  z-index: 2;
  padding: 20px;
}

.tc-overlay-text--bottom {
  padding: 24px;
  max-width: 420px;
}

@media screen and (min-width: 990px) {
  .tc-overlay-text--bottom {
    padding: 40px;
  }
}

.tc-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  opacity: 0.85;
}

.tc-eyebrow--accent {
  color: #e07a4e;
  opacity: 1;
}

.tc-cell-title {
  font-family: var(--font-heading-family, Georgia, 'Times New Roman', serif);
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
}

@media screen and (min-width: 990px) {
  .tc-cell-title {
    font-size: 32px;
  }
}

.tc-bottom-desc {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 10px;
  opacity: 0.9;
  max-width: 320px;
}

.tc-bottom-desc p {
  margin: 0;
}

/* ---------- Stats row ---------- */

.tc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tc-gap, 16px);
}

@media screen and (max-width: 749px) {
  .tc-stats {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

.tc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 12px;
  min-height: 140px;
}

.tc-stat-value {
  font-family: var(--font-heading-family, Georgia, 'Times New Roman', serif);
  font-size: 26px;
  margin: 0 0 6px;
}

@media screen and (min-width: 990px) {
  .tc-stat-value {
    font-size: 32px;
  }
}

.tc-stat-label {
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  opacity: 0.85;
  max-width: 140px;
}

.tc-stat-logo {
  max-width: 70%;
  max-height: 70px;
  object-fit: contain;
  margin-bottom: 8px;
}

/* ---------- Pause / play control ---------- */

.tc-pause-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.tc-pause-btn:hover {
  background: rgba(0, 0, 0, 0.4);
}

.tc-pause-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .tc-media-wrap video {
    /* Still shows the video's poster frame; autoplay JS still runs
       but browsers largely respect reduced-motion via system settings. */
  }
}

Solution 2: The 'Feature Bento Grid' (Alternative Approach)

Another excellent contribution came from ajaycodewiz, offering a slightly different, but equally powerful, 'Feature bento grid' solution. This version combines the CSS directly into the Liquid file using a

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

{{ section.settings.heading }}

{%- endif -%}
{%- for block in section.blocks -%} {%- assign has_video = false -%} {%- if block.settings.video != blank or block.settings.mp4_url != blank -%}{%- assign has_video = true -%}{%- endif -%} {%- assign has_media = false -%} {%- if block.settings.image != blank or has_video -%}{%- assign has_media = true -%}{%- endif -%}
{%- if has_video -%} {%- elsif block.settings.image != blank -%} {{ block.settings.heading | escape }} {%- endif -%}
{%- if block.settings.eyebrow != blank -%}

{{ block.settings.eyebrow }}

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

{{ block.settings.stat }}

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

{{ block.settings.heading }}

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

{{ block.settings.text }}

{%- endif -%}
{%- endfor -%}
{% schema %} { "name": "Feature bento grid", "tag": "section", "class": "section-feature-bento", "settings": [ { "type": "text", "id": "heading", "label": "Heading", "default": "Cook like a pro in your own home." }, { "type": "range", "id": "heading_size", "min": 20, "max": 56, "step": 2, "unit": "px", "label": "Heading size", "default": 40 }, { "type": "color", "id": "text_color", "label": "Text color", "default": "#f4f2ee" }, { "type": "color", "id": "tile_bg", "label": "Empty tile background", "default": "#2b2926" }, { "type": "range", "id": "row_height", "min": 120, "max": 320, "step": 10, "unit": "px", "label": "Row height", "default": 230 }, { "type": "range", "id": "gap", "min": 6, "max": 32, "step": 2, "unit": "px", "label": "Gap", "default": 16 }, { "type": "range", "id": "max_width", "min": 800, "max": 1600, "step": 20, "unit": "px", "label": "Section max width", "default": 1200 }, { "type": "range", "id": "padding_top", "min": 0, "max": 120, "step": 4, "unit": "px", "label": "Padding top", "default": 48 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 120, "step": 4, "unit": "px", "label": "Padding bottom", "default": 48 } ], "blocks": [ { "type": "tile", "name": "Tile", "settings": [ { "type": "select", "id": "size", "label": "Tile size", "default": "small", "options": [ { "value": "small", "label": "Small (1x1)" }, { "value": "large", "label": "Large (1 wide, 2 tall)" }, { "value": "tall", "label": "Big (2x2)" }, { "value": "wide", "label": "Wide (3 wide)" }, { "value": "full", "label": "Full width banner" } ] }, { "type": "image_picker", "id": "image", "label": "Image (also used as video cover)" }, { "type": "video", "id": "video", "label": "Video (upload)" }, { "type": "text", "id": "mp4_url", "label": "or paste an MP4 URL" }, { "type": "text", "id": "eyebrow", "label": "Small label above" }, { "type": "text", "id": "stat", "label": "Big stat (e.g. 1000°F)" }, { "type": "text", "id": "heading", "label": "Heading" }, { "type": "text", "id": "text", "label": "Sub text" } ] } ], "max_blocks": 12, "presets": [ { "name": "Feature bento grid", "blocks": [ { "type": "tile", "settings": { "size": "large", "eyebrow": "Designed for", "heading": "Ultimate Performance" } }, { "type": "tile", "settings": { "size": "small", "stat": "1000°F", "text": "high heat safe" } }, { "type": "tile", "settings": { "size": "small", "heading": "Made without PFAS" } }, { "type": "tile", "settings": { "size": "small", "stat": "300%", "text": "harder than steel" } }, { "type": "tile", "settings": { "size": "wide", "heading": "In the pan" } }, { "type": "tile", "settings": { "size": "full", "eyebrow": "For now, for always", "heading": "Lasts a Lifetime" } } ] } ] } {% endschema %}

Important Considerations for Custom Code:

  • Always Back Up: I can't stress this enough. Duplicating your theme before any code changes is non-negotiable.
  • Testing is Key: After adding the section, thoroughly test it on different pages and devices to ensure it looks and functions as expected.
  • Future Theme Updates: If Kalles releases a major update, you might need to re-apply or adjust your custom sections. Keep a record of your changes.
  • Performance: While these sections are well-coded, extensive custom code can sometimes impact page load speed. Monitor your store's performance metrics.
  • Schema Magic: Notice the {% schema %} ... {% endschema %} blocks in the Liquid files? That's the secret sauce that makes these custom sections editable right from your Shopify theme customizer, no more diving into code for every content change!

It's truly inspiring to see how the Shopify community comes together to solve these kinds of challenges. Whether you go with the more structured 'Cookware showcase grid' or the flexible 'Feature bento grid,' you're now equipped to add a powerful, visually appealing section to your Kalles theme that truly stands out. Don't be afraid to experiment with the settings in the theme editor to make it perfectly align with your brand's aesthetic. Happy customizing!

Share:

Start with the tools

Explore migration tools

See options, compare methods, and pick the path that fits your store.

Explore migration tools