← Back to Sections
Logo List
A responsive logo showcase section designed to display client logos, partner brands, or featured companies in an organized grid layout. Ideal for building trust and credibility by highlighting the brands you work with or have been featured by.
Key Features:
- Clean grid layout with separate controls for desktop, tablet, and mobile columns
- Independent spacing controls for horizontal and vertical gaps across all devices
- Image opacity controls to create subtle, professional logo displays
- Rich text heading support with responsive typography scaling
- Comprehensive padding controls for perfect section spacing on every screen size
- Flexible color options: inherit your theme's styling or apply custom backgrounds and text colors
- Individual alt text support for each logo ensuring accessibility compliance
- Loading optimization with lazy/eager image loading options
Perfect for: Client testimonials sections, partner showcases, "As featured in" displays, certification logos, brand collaborations, or any professional logo grid that builds credibility and trust.
{%- style -%}
.section-{{ section.id }} {
{% if section.settings.use_custom_colors %}
background-color: {{ section.settings.background_color }};
color: {{ section.settings.text_color }};
{% else %}
color: rgb(var(--color-foreground));
{% endif %}
padding-top: {{ section.settings.desktop_padding_top }}px;
padding-bottom: {{ section.settings.desktop_padding_bottom }}px;
padding-left: {{ section.settings.desktop_padding_horizontal }}px;
padding-right: {{ section.settings.desktop_padding_horizontal }}px;
{% if section.settings.top_border_thickness > 0 %}
border-top: {{ section.settings.top_border_thickness }}px solid {{ section.settings.border_color }};
{% endif %}
{% if section.settings.bottom_border_thickness > 0 %}
border-bottom: {{ section.settings.bottom_border_thickness }}px solid {{ section.settings.border_color }};
{% endif %}
}
.section-{{ section.id }} .bc-logo-list-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
}
.section-{{ section.id }} .bc-logo-list-heading * {
font-size: clamp({{ section.settings.heading_size | times: section.settings.heading_mobile_scale_ratio }}rem, 4vw, {{ section.settings.heading_size }}rem) !important;
line-height: {{ section.settings.heading_line_height }};
max-width: {{ section.settings.heading_max_width }}ch;
margin: 0;
text-align: center;
}
.section-{{ section.id }} .bc-logo-list-grid {
display: grid;
grid-row-gap: {{ section.settings.desktop_row_gap }}px;
grid-column-gap: {{ section.settings.desktop_column_gap }}px;
grid-template-columns: repeat({{ section.settings.columns }}, minmax(0, 1fr));
justify-content: start;
align-items: center;
width: 100%;
}
.section-{{ section.id }} .bc-logo-list-logo {
width: 100%;
max-width: {{ section.settings.logo_max_width }}px;
height: auto;
opacity: {{ section.settings.logo_opacity }}%;
object-fit: contain;
display: block;
}
/* Tablet adjustments */
@media (max-width: 991px) {
.section-{{ section.id }} {
padding-left: {{ section.settings.tablet_padding_horizontal }}px;
padding-right: {{ section.settings.tablet_padding_horizontal }}px;
}
.section-{{ section.id }} .bc-logo-list-grid {
grid-template-columns: repeat({{ section.settings.tablet_columns }}, minmax(0, 1fr));
grid-column-gap: {{ section.settings.tablet_column_gap }}px;
grid-row-gap: {{ section.settings.tablet_row_gap }}px;
}
}
/* Mobile adjustments */
@media (max-width: 767px) {
.section-{{ section.id }} {
padding-left: {{ section.settings.mobile_padding_horizontal }}px;
padding-right: {{ section.settings.mobile_padding_horizontal }}px;
}
.section-{{ section.id }} .bc-logo-list-grid {
grid-template-columns: repeat({{ section.settings.mobile_columns }}, minmax(0, 1fr));
grid-column-gap: {{ section.settings.mobile_column_gap }}px;
grid-row-gap: {{ section.settings.mobile_row_gap }}px;
}
}
{%- endstyle -%}
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
<section class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
<div class="bc-logo-list-section">
{% if section.settings.heading != blank %}
<div class="bc-logo-list-heading">{{ section.settings.heading }}</div>
{% endif %}
<div class="bc-logo-list-grid">
{% for block in section.blocks %}
{% if block.settings.image != blank %}
<img
src="{{ block.settings.image | img_url: 'master' }}"
alt="{{ block.settings.image_alt | default: 'Logo' }}"
class="bc-logo-list-logo"
loading="{% if section.settings.image_loading == 'eager' %}eager{% else %}lazy{% endif %}"
>
{% endif %}
{% endfor %}
</div>
</div>
</section>
{% schema %}
{
"name": "BC Logo List",
"settings": [
{
"type": "header",
"content": "Colors"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color Scheme",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "use_custom_colors",
"label": "Use custom colors instead of a Dawn color scheme",
"default": false
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "#000000"
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "range",
"id": "desktop_padding_top",
"label": "Desktop Padding Top",
"min": 0,
"max": 150,
"step": 5,
"default": 60,
"unit": "px"
},
{
"type": "range",
"id": "desktop_padding_bottom",
"label": "Desktop Padding Bottom",
"min": 0,
"max": 150,
"step": 5,
"default": 60,
"unit": "px"
},
{
"type": "range",
"id": "desktop_padding_horizontal",
"label": "Desktop Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"default": 50,
"unit": "px"
},
{
"type": "range",
"id": "tablet_padding_horizontal",
"label": "Tablet Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"default": 80,
"unit": "px"
},
{
"type": "range",
"id": "mobile_padding_horizontal",
"label": "Mobile Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "top_border_thickness",
"label": "Top Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "bottom_border_thickness",
"label": "Bottom Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"default": 0,
"unit": "px"
},
{
"type": "header",
"content": "Text"
},
{
"type": "richtext",
"id": "heading",
"label": "Heading",
"default": "<h2>Your Heading Goes Here</h2>"
},
{
"type": "range",
"id": "heading_size",
"label": "Heading Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 3,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "heading_line_height",
"label": "Heading Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.2
},
{
"type": "range",
"id": "heading_max_width",
"label": "Heading Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 60,
"unit": "ch"
},
{
"type": "range",
"id": "heading_mobile_scale_ratio",
"label": "Heading Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.7,
"unit": "×",
"info": "Controls how much heading text shrinks on smaller screens"
},
{
"type": "header",
"content": "Media"
},
{
"type": "range",
"id": "logo_opacity",
"label": "Logo Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "logo_max_width",
"label": "Logo Max Width",
"min": 50,
"max": 500,
"step": 10,
"default": 250,
"unit": "px"
},
{
"type": "select",
"id": "image_loading",
"label": "Image Loading",
"options": [
{
"value": "lazy",
"label": "Lazy"
},
{
"value": "eager",
"label": "Eager"
}
],
"default": "lazy"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "columns",
"label": "Desktop Columns",
"min": 1,
"max": 8,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "tablet_columns",
"label": "Tablet Columns",
"min": 1,
"max": 6,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "mobile_columns",
"label": "Mobile Columns",
"min": 1,
"max": 4,
"step": 1,
"default": 2
},
{
"type": "range",
"id": "desktop_column_gap",
"label": "Desktop Column Gap",
"min": 0,
"max": 100,
"step": 2,
"default": 50,
"unit": "px"
},
{
"type": "range",
"id": "desktop_row_gap",
"label": "Desktop Row Gap",
"min": 0,
"max": 100,
"step": 2,
"default": 16,
"unit": "px"
},
{
"type": "range",
"id": "tablet_column_gap",
"label": "Tablet Column Gap",
"min": 0,
"max": 100,
"step": 2,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "tablet_row_gap",
"label": "Tablet Row Gap",
"min": 0,
"max": 100,
"step": 2,
"default": 16,
"unit": "px"
},
{
"type": "range",
"id": "mobile_column_gap",
"label": "Mobile Column Gap",
"min": 0,
"max": 100,
"step": 2,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "mobile_row_gap",
"label": "Mobile Row Gap",
"min": 0,
"max": 100,
"step": 2,
"default": 60,
"unit": "px"
},
{
"type": "header",
"content": "Advanced Options"
}
],
"blocks": [
{
"type": "logo",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Logo Image"
},
{
"type": "text",
"id": "image_alt",
"label": "Logo Alt Text",
"placeholder": "e.g. Company Name Logo"
}
]
}
],
"presets": [
{
"name": "BC Logo List"
}
]
}
{% endschema %}
