← Back to Sections
Values and Icons Bar
A clean, professional section for showcasing your brand's core values or key features with customizable icons and text. Perfect for highlighting what makes your business unique - whether it's "Free Shipping," "24/7 Support," "Quality Guaranteed," or your company's mission statements.
Key Features:
- Display up to 4 values/features in a responsive grid layout
- Fully customizable inline SVG icons (Lucide-compatible) with color controls
- Rich text support for formatted descriptions
- Responsive typography that scales beautifully on all devices
- Flexible styling options: use your theme's colors or apply custom branding
- Mobile-optimized layout that stacks vertically on smaller screens
Perfect for: Trust badges, brand values, service highlights, company principles, or any content that combines icons with descriptive text.
{%- 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 %}
border-top: {{ section.settings.top_border_thickness }}px solid {{ section.settings.top_border_color }};
border-bottom: {{ section.settings.bottom_border_thickness }}px solid {{ section.settings.bottom_border_color }};
{% if section.settings.background_image != blank %}
background-image: url({{ section.settings.background_image | img_url: 'original' }});
background-size: cover;
background-position-y: {{ section.settings.background_image_vertical_position }}%;
{% if section.settings.background_image_opacity < 100 %}
position: relative;
{% endif %}
{% endif %}
}
{% if section.settings.background_image != blank and section.settings.background_image_opacity < 100 %}
.section-{{ section.id }}::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: {{ section.settings.background_color | default: '#ffffff' }};
opacity: {{ 100 | minus: section.settings.background_image_opacity | divided_by: 100.0 }};
pointer-events: none;
}
{% endif %}
.section-{{ section.id }} .bc-values-and-icons {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
flex-direction: row;
justify-content: center;
align-items: center;
display: flex;
position: relative;
overflow: hidden;
}
.section-{{ section.id }} .bc-value {
display: flex;
grid-column-gap: {{ section.settings.text_image_spacing }}px;
align-items: center;
}
.section-{{ section.id }} .bc-value-div {
grid-column-gap: {{ section.settings.column_spacing }}px;
align-items: center;
display: flex;
}
.section-{{ section.id }} .bc-icon {
width: {{ section.settings.icons_size }}px;
height: {{ section.settings.icons_size }}px;
{% if section.settings.use_custom_colors %}
color: {{ section.settings.icons_color }};
{% else %}
color: rgb(var(--color-foreground));
{% endif %}
}
.section-{{ section.id }} .bc-value-text {
font-size: clamp({{ section.settings.text_size | times: section.settings.mobile_scale_ratio }}rem, 5vw, {{ section.settings.text_size }}rem);
line-height: {{ section.settings.text_line_height }};
max-width: {{ section.settings.text_max_width }}ch;
{% unless section.settings.use_custom_colors %}
color: rgb(var(--color-foreground));
{% endunless %}
}
.section-{{ section.id }} .bc-value-text * {
font-size: clamp({{ section.settings.text_size | times: section.settings.mobile_scale_ratio }}rem, 5vw, {{ section.settings.text_size }}rem) !important;
line-height: {{ section.settings.text_line_height }};
max-width: {{ section.settings.text_max_width }}ch;
}
.section-{{ section.id }} p {
text-align: center;
}
.section-{{ section.id }} .bc-icon svg {
width: 100%;
height: 100%;
display: block;
}
.section-{{ section.id }} .bc-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
@media screen and (max-width: 991px) {
.section-{{ section.id }} .bc-values-and-icons {
grid-auto-columns: 1fr;
padding-top: {{ section.settings.mobile_padding_top }}px;
padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
}
.section-{{ section.id }} .bc-value-div {
grid-column-gap: {{ section.settings.column_spacing | times: 0.5 | round: 0 }}px;
flex-direction: column;
display: grid;
grid-template-columns: 1fr 1fr;
}
.section-{{ section.id }} .bc-value {
flex-direction: column;
margin-bottom: 50px;
}
.section-{{ section.id }} .bc-icon {
width: {{ section.settings.icons_size | times: 1.5 | round: 0 }}px;
height: {{ section.settings.icons_size | times: 1.5 | round: 0 }}px;
margin-bottom: 25px;
}
.section-{{ section.id }} .bc-value-text {
text-align: center;
}
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} .bc-values-and-icons {
min-height: auto;
padding-left: 45px;
padding-right: 45px;
}
.section-{{ section.id }} .bc-value-div {
grid-column-gap: {{ section.settings.column_spacing | times: 0.35 | round: 0 }}px;
}
.section-{{ section.id }} .bc-icon {
width: 32px;
height: 32px;
margin-bottom: 10px;
}
.section-{{ section.id }} .bc-value {
margin-bottom: 20px;
}
}
@media screen and (max-width: 479px) {
.section-{{ section.id }} .bc-values-and-icons {
grid-row-gap: 54px;
grid-template-columns: 1fr;
padding-left: 45px;
padding-right: 45px;
}
}
{%- 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-values-and-icons">
<div class="bc-value-div">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'value' -%}
<div class="bc-value" {{ block.shopify_attributes }}>
<div class="bc-icon" style="color: {{ block.settings.icon_color }};">
{% if block.settings.icon_image != blank %}
<img src="{{ block.settings.icon_image | img_url: 'original' }}" alt="{{ block.settings.icon_image_alt | default: 'Icon' }}" loading="lazy">
{% else %}
{{ block.settings.icon_svg }}
{% endif %}
</div>
<div class="bc-value-text">
{{ block.settings.text_content | default: '<p>Brand Value Goes Here</p>' }}
</div>
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</section>
{% schema %}
{
"name": "BC Values and Icons",
"max_blocks": 4,
"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": "top_border_color",
"label": "Top Border Color",
"default": "#000000"
},
{
"type": "color",
"id": "bottom_border_color",
"label": "Bottom Border Color",
"default": "#000000"
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Padding Top",
"default": 50
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Padding Bottom",
"default": 50
},
{
"type": "range",
"id": "top_border_thickness",
"label": "Top Border Thickness",
"min": 0,
"max": 30,
"step": 1,
"default": 0,
"unit": "px",
"info": "Set to 0 to hide border. If section above has a bottom border applied, do not use."
},
{
"type": "range",
"id": "bottom_border_thickness",
"label": "Bottom Border Thickness",
"min": 0,
"max": 30,
"step": 1,
"default": 0,
"unit": "px",
"info": "Set to 0 to hide border. If section above has a bottom border applied, do not use."
},
{
"type": "image_picker",
"id": "background_image",
"label": "Background Image",
"info": "Recommended width 2200px."
},
{
"type": "range",
"id": "background_image_opacity",
"label": "Background Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "background_image_vertical_position",
"label": "Background Image Vertical Position",
"min": 0,
"max": 100,
"step": 1,
"default": 50,
"unit": "%"
},
{
"type": "header",
"content": "Text"
},
{
"type": "range",
"id": "text_size",
"label": "Text Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.2,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)."
},
{
"type": "range",
"id": "text_line_height",
"label": "Text Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "text_max_width",
"label": "Text Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "mobile_scale_ratio",
"label": "Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.8,
"unit": "×",
"info": "Controls how much ALL text shrinks on smaller screens"
},
{
"type": "range",
"id": "text_image_spacing",
"label": "Text-Image Spacing",
"min": 10,
"max": 50,
"step": 5,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "column_spacing",
"label": "Column Spacing",
"min": 10,
"max": 120,
"step": 5,
"default": 60,
"unit": "px"
},
{
"type": "header",
"content": "Media"
},
{
"type": "range",
"id": "icons_size",
"label": "Icons Size",
"min": 16,
"max": 100,
"step": 2,
"default": 32,
"unit": "px"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "range",
"id": "mobile_padding_top",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Mobile Padding Top",
"default": 40
},
{
"type": "range",
"id": "mobile_padding_bottom",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Mobile Padding Bottom",
"default": 40
}
],
"blocks": [
{
"name": "Value",
"type": "value",
"settings": [
{
"type": "image_picker",
"id": "icon_image",
"label": "Icon Image (Optional)",
"info": "Upload an image to use as the icon. This takes precedence over SVG code if both are provided."
},
{
"type": "text",
"id": "icon_image_alt",
"label": "Icon Image Alt Text",
"placeholder": "e.g. Shipping icon"
},
{
"type": "textarea",
"id": "icon_svg",
"label": "SVG Icon Code",
"info": "Paste the inline SVG code here. You can copy icons directly from https://lucide.dev/icons using the 'Copy SVG' button. Make sure the SVG uses 'stroke=\"currentColor\"' or 'fill=\"currentColor\"' so the color setting works."
},
{
"type": "color",
"id": "icon_color",
"label": "Icon Color",
"default": "#000000"
},
{
"type": "richtext",
"id": "text_content",
"label": "Text Content",
"default": "<p>Brand Value Goes Here</p>"
}
]
}
],
"presets": [
{
"name": "BC Values and Icons"
}
]
}
{% endschema %}