Shopify Brand Logo Grid – Showcase Partners & Affiliates
Add a responsive brand logo grid to your Shopify store with customizable layout, hover effects, and optional CTA button. Perfect for showcasing partners, affiliates, or featured brands.
Liquid Code
<!--
========================================
Section Name: Brand Logo Grid
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does:
- Displays a responsive grid of brand logos with customizable columns for different screen sizes.
- Features hover effects with subtle animations and optional links for each logo.
- Includes a customizable heading, descriptive text, and optional CTA button.
- Fully responsive design with flexible grid layout and spacing options.
Promotion:
Showcase your brand partnerships and affiliations with a professional logo grid. Perfect for building trust and highlighting business relationships. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
{% comment %}
Section: Brand Logo Grid
A responsive grid of brand logos with customizable heading and text
{% endcomment %}
<section class="brand-logo-section-{{ section.id }}" style="background-color: {{ section.settings.bg_color }}; padding: {{ section.settings.pad_top }}px 0 {{ section.settings.pad_bot }}px;">
<div class="brand-logo-container page-width">
<div class="brand-logo-header">
{% if section.settings.title != blank %}
<h2 class="brand-logo-heading">{{ section.settings.title }}</h2>
{% endif %}
{% if section.settings.text != blank %}
<div class="brand-logo-text">{{ section.settings.text }}</div>
{% endif %}
</div>
<div class="brand-logo-grid">
{% for block in section.blocks %}
{% if block.type == 'brand_logo' %}
<div class="brand-logo-item" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}" class="brand-logo-link">
{% endif %}
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url: 'medium' }}"
alt="{{ block.settings.image.alt | default: block.settings.name | default: 'Brand logo' }}"
class="brand-logo-image"
width="{{ section.settings.logo_width }}"
height="{{ section.settings.logo_height }}">
{% else %}
{{ 'brand' | placeholder_svg_tag: 'placeholder-svg brand-logo-placeholder' }}
{% endif %}
{% if block.settings.link != blank %}
</a>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
{% if section.settings.button_link != blank and section.settings.button_text != blank %}
<div class="brand-logo-button-container">
<a href="{{ section.settings.button_link }}" class="brand-logo-button" style="color: {{ section.settings.button_text_color }};">
{{ section.settings.button_text }}
</a>
</div>
{% endif %}
</div>
</section>
{% style %}
.brand-logo-section-{{ section.id }} {
overflow: hidden;
text-align: {{ section.settings.text_alignment }};
}
.brand-logo-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.brand-logo-header {
margin-bottom: 40px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.brand-logo-heading {
font-size: 28px;
margin-bottom: 15px;
font-weight: 600;
color: {{ section.settings.title_color }};
}
.brand-logo-text {
font-size: 16px;
line-height: 1.5;
color: {{ section.settings.text_color }};
}
.brand-logo-grid {
display: grid;
grid-template-columns: repeat({{ section.settings.columns_desktop }}, 1fr);
gap: {{ section.settings.grid_gap }}px;
margin-bottom: 30px;
}
.brand-logo-item {
display: flex;
align-items: center;
justify-content: center;
padding: {{ section.settings.logo_padding }}px;
border-radius: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: {{ section.settings.logo_bg_color }};
}
.brand-logo-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.brand-logo-image {
max-width: 100%;
max-height: {{ section.settings.logo_height }}px;
width: auto;
height: auto;
object-fit: contain;
}
.brand-logo-placeholder {
max-width: 100%;
max-height: {{ section.settings.logo_height }}px;
width: {{ section.settings.logo_width }}px;
height: {{ section.settings.logo_height }}px;
opacity: 0.7;
}
.brand-logo-button-container {
text-align: center;
margin-top: 20px;
}
.brand-logo-button {
display: inline-block;
padding: 10px 20px;
font-weight: 500;
text-decoration: none;
transition: opacity 0.3s ease;
}
.brand-logo-button:hover {
opacity: 0.8;
}
@media screen and (max-width: 989px) {
.brand-logo-grid {
grid-template-columns: repeat({{ section.settings.columns_tablet }}, 1fr);
gap: {{ section.settings.grid_gap | minus: 10 }}px;
}
.brand-logo-heading {
font-size: 24px;
}
}
@media screen and (max-width: 749px) {
.brand-logo-grid {
grid-template-columns: repeat({{ section.settings.columns_mobile }}, 1fr);
gap: {{ section.settings.grid_gap | minus: 15 }}px;
}
.brand-logo-heading {
font-size: 22px;
}
.brand-logo-item {
padding: {{ section.settings.logo_padding | minus: 5 }}px;
}
}
{% endstyle %}
{% schema %}
{
"name": "Brand Logo Grid",
"settings": [
{
"type": "range",
"id": "pad_top",
"label": "Padding Top",
"min": 0,
"max": 100,
"step": 5,
"default": 40
},
{
"type": "range",
"id": "pad_bot",
"label": "Padding Bottom",
"min": 0,
"max": 100,
"step": 5,
"default": 40
},
{
"type": "color",
"id": "bg_color",
"label": "Background Color",
"default": "#FFFFFF"
},
{
"type": "header",
"content": "Content"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Lorem ipsum dolor sit amet"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae fermentum metus. Sed eget pulvinar nunc, sit amet malesuada ligula.</p>"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "header",
"content": "Logo Settings"
},
{
"type": "range",
"id": "logo_width",
"label": "Logo Max Width",
"min": 50,
"max": 350,
"step": 10,
"default": 150,
"unit": "px"
},
{
"type": "range",
"id": "logo_height",
"label": "Logo Max Height",
"min": 30,
"max": 150,
"step": 10,
"default": 80,
"unit": "px"
},
{
"type": "range",
"id": "logo_padding",
"label": "Logo Padding",
"min": 10,
"max": 50,
"step": 5,
"default": 20,
"unit": "px"
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "title_color",
"label": "Heading Color",
"default": "#000000"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#4a4a4a"
},
{
"type": "color",
"id": "logo_bg_color",
"label": "Logo Background Color",
"default": "#FFFFFF"
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Lorem ipsum dolor"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#0066cc"
},
{
"type": "header",
"content": "Grid Layout"
},
{
"type": "range",
"id": "grid_gap",
"label": "Space Between Logos",
"min": 10,
"max": 60,
"step": 5,
"default": 30,
"unit": "px"
},
{
"type": "range",
"id": "columns_desktop",
"label": "Columns (Desktop)",
"min": 1,
"max": 6,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "columns_tablet",
"label": "Columns (Tablet)",
"min": 1,
"max": 4,
"step": 1,
"default": 2
},
{
"type": "range",
"id": "columns_mobile",
"label": "Columns (Mobile)",
"min": 1,
"max": 3,
"step": 1,
"default": 2
}
],
"blocks": [
{
"type": "brand_logo",
"name": "Brand Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Logo Image"
},
{
"type": "text",
"id": "name",
"label": "Brand Name",
"info": "Used for alt text if not provided by the image",
"default": "Lorem ipsum"
},
{
"type": "url",
"id": "link",
"label": "Brand Link"
}
]
}
],
"presets": [
{
"name": "Brand Logo Grid",
"blocks": [
{
"type": "brand_logo"
},
{
"type": "brand_logo"
},
{
"type": "brand_logo"
},
{
"type": "brand_logo"
},
{
"type": "brand_logo"
},
{
"type": "brand_logo"
}
]
}
]
}
{% endschema %}