Unlock Dynamic Layouts: Add a Custom Bento Grid Section to Your Shopify Kalles Theme
Unlocking Custom Layouts: How to Add a Dynamic Bento Grid Section to Your Shopify Kalles Theme
Ever found yourself browsing another store, admiring a unique layout, and thinking, "I wish I could have that on my Shopify store?" It's a common feeling, especially when you're using a popular theme like Kalles, which is fantastic but can sometimes feel a bit restrictive when you have a very specific vision in mind. That's exactly what happened recently in the Shopify community, and I wanted to share the insights from a thread that perfectly illustrates the power of custom code and community support.
Our fellow store owner, saqlain1, was looking to replicate a stylish, multi-media grid section they'd seen on another site, specifically for their Kalles theme. The frustration was palpable: "in kalles theme it is not possible so i have to add custum theme anyone help me". Sound familiar? The good news is, the community stepped up, proving that with a little custom Liquid and CSS, almost anything is possible!
What is a "Bento Grid" or "Showcase Grid" Section?
Before diving into the "how," let's quickly define what saqlain1 was after. The reference site showcased a dynamic layout often called a "bento grid" or "showcase grid." Think of it as a mosaic of tiles, each capable of holding different content: images, videos, text, or even key statistics. It's a highly visual and engaging way to present product features, brand stories, or key selling points, breaking away from the typical linear sections.
Here's a visual example of what a bento grid can look like, shared by ajaycodewiz in the thread:
The Community's Custom Code Solutions
Two fantastic solutions emerged from the thread, both providing complete custom sections that can be added to any Shopify theme, including Kalles. They both leverage Shopify's sections architecture, allowing you to manage content directly from the theme customizer once the code is in place. No ongoing code editing needed!
Option 1: The "Cookware Showcase Grid" by oscprofessional
This solution is a robust, pre-structured grid designed with specific areas: a tall left media block, a row of stat blocks, a wide right media block, and a full-width bottom banner. It's highly configurable through the theme editor, allowing you to set colors, padding, corner radius, and choose between images or autoplaying videos for your media blocks. It even includes a play/pause control for videos!
Here's the code provided:
{{ '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 -%}
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'tc-placeholder-svg' }}
{%- endif -%}
{%- if section.settings.left_show_pause_icon -%}
{%- 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 -%}
{%- 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 -%}
{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'tc-placeholder-svg' }}
{%- 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 %}
/* ==========================================================================
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. */
}
}
Option 2: The Flexible "Feature Bento Grid" by ajaycodewiz
This alternative offers a more generalized "bento" approach, allowing you to define different tile sizes (small, large, tall, wide, full-width) and arrange them into a responsive mosaic. It's incredibly versatile for mixing images, autoplaying muted videos (with poster images), stats, and headings. The code is also designed to collapse beautifully into a two-column layout on mobile, ensuring a great user experience across devices.
Here's the code for this flexible bento grid:
{%- comment -%}
Feature bento grid - mixed image/video/stat tiles in a mosaic.
Add via Online Store > Themes > Edit code > Sections > Add a new section.
{%- endcomment -%}
{%- 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 -%}
{%- 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\u00b0F)" },
{ "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\u00b0F", "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 %}
How to Add a Custom Section to Your Shopify Theme
Regardless of which custom grid solution you choose, the process for adding it to your Shopify theme is largely the same. Here’s a step-by-step guide:
- Access Your Theme Code: From your Shopify admin, go to Online Store > Themes. Find your current theme (or a duplicate if you want to test first, which is always recommended!), click the … (three dots) button, and select Edit code.
- Add the CSS File (for Cookware Showcase Grid):
- Under the Assets directory, click Add a new asset.
- Name the file
section-cookware-showcase.css. - Paste the CSS code provided by oscprofessional into this new file and Save. (Note: The "Feature Bento Grid" solution includes its CSS directly within the Liquid file, so you'd skip this step for that option.)
- Create the Section Liquid File:
- Under the Sections directory, click Add a new section.
- For oscprofessional's code, name it
cookware-showcase-section.liquid. - For ajaycodewiz's code, name it
feature-bento.liquid. - Delete any sample content in the new file, paste the respective Liquid code (including the
{% schema %}block), and Save.
- Add the Section to Your Store:
- Go back to your Shopify admin, Online Store > Themes, and click Customize on your theme.
- On the left sidebar, click Add section.
- You should now see your new section listed: "Cookware showcase grid" or "Feature bento grid."
- Click on it to add it to your page.
- Customize Your New Section:
- Once added, you can click on the section in the theme editor sidebar.
- Fill in your images, videos, headings, and stat card content using the intuitive settings provided. No more code editing needed!
It's pretty amazing how a bit of custom code can transform your store's look and feel, isn't it? The beauty of Shopify's theme architecture is that these custom sections integrate seamlessly into the theme customizer, giving you full control without needing to touch code again after the initial setup. This whole discussion really highlights the strength of the Shopify community – when you hit a wall, there's often an expert ready to share a solution that can take your store to the next level.