Shopify Fitness Benefits – Feature Grid with Icons
Add a professional fitness benefits grid to your Shopify store with customizable icons, responsive layout, and optional main image. Perfect for gyms, fitness programs, or health products.
Liquid Code
<!--
========================================
Section Name: Fitness Benefits
Tech Stack: Liquid, HTML, CSS, JavaScript, SVG
What This Section Does:
- Displays a responsive grid of fitness benefits with customizable icons and text content.
- Features built-in SVG icons for fitness themes like heart, dumbbell, yoga, with custom icon upload option.
- Includes flexible layout with configurable columns for desktop, tablet, and mobile devices.
- Supports optional main image with customizable border radius and content alignment options.
Promotion:
Showcase fitness benefits with a professional grid layout. Perfect for gym websites, fitness programs, or health product pages. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="fitness-benefits-section" style="background-color: {{ section.settings.bg_color }}; padding: {{ section.settings.pad_top }}px 0 {{ section.settings.pad_bot }}px;">
<div class="fitness-benefits-container page-width">
{% if section.settings.title != blank %}
<h2 class="fitness-benefits-heading" style="color: {{ section.settings.title_color }}; font-size: {{ section.settings.title_size }}px; text-align: {{ section.settings.title_alignment }};">
{{ section.settings.title }}
</h2>
{% endif %}
{% if section.settings.subtitle != blank %}
<div class="fitness-benefits-subtitle" style="color: {{ section.settings.subtitle_color }}; text-align: {{ section.settings.title_alignment }};">
{{ section.settings.subtitle }}
</div>
{% endif %}
{% if section.blocks.size > 0 %}
<div class="fitness-benefits-grid" style="grid-template-columns: repeat({{ section.settings.columns_desktop }}, 1fr); gap: {{ section.settings.grid_gap }}px;">
{% for block in section.blocks %}
<div class="fitness-benefit-item" {{ block.shopify_attributes }}>
<div class="fitness-benefit-icon-wrapper">
{% if block.settings.custom_icon != blank %}
<img src="{{ block.settings.custom_icon | img_url: '120x' }}" alt="{{ block.settings.title }}" class="fitness-benefit-icon">
{% elsif block.settings.icon_type != blank %}
<div class="fitness-benefit-svg-icon" style="color: {{ block.settings.icon_color }};">
{% case block.settings.icon_type %}
{% when 'heart' %}
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z" fill="currentColor"/>
</svg>
{% when 'dumbbell' %}
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.57 14.86L22 13.43L20.57 12L17 15.57L8.43 7L12 3.43L10.57 2L9.14 3.43L7.71 2L5.57 4.14L4.14 2.71L2.71 4.14L4.14 5.57L2 7.71L3.43 9.14L2 10.57L3.43 12L7 8.43L15.57 17L12 20.57L13.43 22L14.86 20.57L16.29 22L18.43 19.86L19.86 21.29L21.29 19.86L19.86 18.43L22 16.29L20.57 14.86Z" fill="currentColor"/>
</svg>
{% when 'weight' %}
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3C14.21 3 16 4.79 16 7S14.21 11 12 11 8 9.21 8 7 9.79 3 12 3M16 13.54C16 14.6 15.72 17.07 13.81 19.83L13 15L13.94 13.12C13.32 13.05 12.67 13 12 13S10.68 13.05 10.06 13.12L11 15L10.19 19.83C8.28 17.07 8 14.6 8 13.54C5.61 14.24 4 15.5 4 17V21H20V17C20 15.5 18.4 14.24 16 13.54Z" fill="currentColor"/>
</svg>
{% when 'food' %}
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5 21L14 8H16.23L15.1 3.46L16.84 3L18.09 8H22L20.5 21H15.5M5 11H10C11.66 11 13 12.34 13 14V21H12V17H3V21H2V14C2 12.34 3.34 11 5 11M5 12C4.45 12 4 12.45 4 13C4 13.55 4.45 14 5 14H10C10.55 14 11 13.55 11 13C11 12.45 10.55 12 10 12H5Z" fill="currentColor"/>
</svg>
{% when 'running' %}
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5 5.5C14.6 5.5 15.5 4.6 15.5 3.5C15.5 2.4 14.6 1.5 13.5 1.5C12.4 1.5 11.5 2.4 11.5 3.5C11.5 4.6 12.4 5.5 13.5 5.5M9.8 8.9L7 23H9.1L10.9 15L13 17V23H15V15.5L12.9 13.5L13.5 10.5C14.8 12 16.8 13 19 13V11C17.1 11 15.5 10 14.7 8.6L13.7 7C13.3 6.4 12.7 6 12 6C11.7 6 11.5 6.1 11.2 6.1L6 8.3V13H8V9.6L9.8 8.9Z" fill="currentColor"/>
</svg>
{% when 'yoga' %}
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 2C11.9 2 11 2.9 11 4C11 5.1 11.9 6 13 6C14.1 6 15 5.1 15 4C15 2.9 14.1 2 13 2M4 7V9H10V15L4.93 20.07L6.34 21.5L13 14.83L19.66 21.5L21.07 20.07L16 15V9H22V7H4Z" fill="currentColor"/>
</svg>
{% endcase %}
</div>
{% endif %}
</div>
<h3 class="fitness-benefit-title" style="color: {{ block.settings.title_color }}; font-size: {{ block.settings.title_size }}px;">
{{ block.settings.title }}
</h3>
<div class="fitness-benefit-description" style="color: {{ block.settings.text_color }}; font-size: {{ block.settings.text_size }}px;">
{{ block.settings.description }}
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if section.settings.show_image and section.settings.main_image != blank %}
<div class="fitness-benefits-image-wrapper">
<img src="{{ section.settings.main_image | img_url: '1200x' }}" alt="{{ section.settings.title }}" class="fitness-benefits-image">
</div>
{% endif %}
</div>
</section>
<style>
.fitness-benefits-section {
overflow: hidden;
position: relative;
}
.fitness-benefits-container {
max-width: {{ section.settings.container_width }}px;
margin: 0 auto;
padding: 0 20px;
}
.fitness-benefits-heading {
margin-bottom: 15px;
font-weight: {{ section.settings.title_weight }};
line-height: 1.2;
}
.fitness-benefits-subtitle {
margin-bottom: 40px;
font-size: {{ section.settings.subtitle_size }}px;
line-height: 1.5;
}
.fitness-benefits-grid {
display: grid;
margin-bottom: 40px;
}
.fitness-benefit-item {
padding: 20px;
text-align: {{ section.settings.item_alignment }};
display: flex;
flex-direction: column;
align-items: {% if section.settings.item_alignment == 'center' %}center{% else %}flex-start{% endif %};
}
.fitness-benefit-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
width: 64px;
height: 64px;
}
.fitness-benefit-icon {
max-width: 100%;
max-height: 100%;
}
.fitness-benefit-svg-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.fitness-benefit-title {
margin-bottom: 10px;
font-weight: 600;
}
.fitness-benefit-description {
line-height: 1.5;
}
.fitness-benefits-image-wrapper {
margin-top: 30px;
text-align: center;
}
.fitness-benefits-image {
max-width: 100%;
height: auto;
border-radius: {{ section.settings.image_border_radius }}px;
}
@media screen and (max-width: 990px) {
.fitness-benefits-grid {
grid-template-columns: repeat({{ section.settings.columns_tablet }}, 1fr);
}
}
@media screen and (max-width: 767px) {
.fitness-benefits-heading {
font-size: {{ section.settings.title_size | minus: 6 }}px;
}
.fitness-benefits-subtitle {
font-size: {{ section.settings.subtitle_size | minus: 2 }}px;
}
.fitness-benefits-grid {
grid-template-columns: repeat({{ section.settings.columns_mobile }}, 1fr);
}
}
</style>
{% schema %}
{
"name": "Fitness Benefits",
"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": "range",
"id": "container_width",
"label": "Container Width",
"min": 900,
"max": 1600,
"step": 50,
"default": 1200
},
{
"type": "header",
"content": "Heading Settings"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Lorem Ipsum Dolor Sit Amet"
},
{
"type": "range",
"id": "title_size",
"label": "Heading Size",
"min": 20,
"max": 60,
"step": 2,
"default": 36
},
{
"type": "select",
"id": "title_weight",
"label": "Heading Weight",
"options": [
{
"value": "400",
"label": "Regular"
},
{
"value": "500",
"label": "Medium"
},
{
"value": "600",
"label": "Semi-Bold"
},
{
"value": "700",
"label": "Bold"
}
],
"default": "600"
},
{
"type": "color",
"id": "title_color",
"label": "Heading Color",
"default": "#333333"
},
{
"type": "text",
"id": "subtitle",
"label": "Subtitle",
"default": "Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
},
{
"type": "range",
"id": "subtitle_size",
"label": "Subtitle Size",
"min": 12,
"max": 24,
"step": 1,
"default": 16
},
{
"type": "color",
"id": "subtitle_color",
"label": "Subtitle Color",
"default": "#666666"
},
{
"type": "select",
"id": "title_alignment",
"label": "Heading Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "header",
"content": "Grid Settings"
},
{
"type": "range",
"id": "columns_desktop",
"label": "Columns (Desktop)",
"min": 1,
"max": 4,
"step": 1,
"default": 2
},
{
"type": "range",
"id": "columns_tablet",
"label": "Columns (Tablet)",
"min": 1,
"max": 3,
"step": 1,
"default": 2
},
{
"type": "range",
"id": "columns_mobile",
"label": "Columns (Mobile)",
"min": 1,
"max": 3,
"step": 1,
"default": 1
},
{
"type": "range",
"id": "grid_gap",
"label": "Gap Between Items",
"min": 10,
"max": 60,
"step": 5,
"default": 30
},
{
"type": "select",
"id": "item_alignment",
"label": "Item Content Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
}
],
"default": "center"
},
{
"type": "header",
"content": "Main Image Settings"
},
{
"type": "checkbox",
"id": "show_image",
"label": "Show Main Image",
"default": true
},
{
"type": "image_picker",
"id": "main_image",
"label": "Main Image"
},
{
"type": "range",
"id": "image_border_radius",
"label": "Image Border Radius",
"min": 0,
"max": 30,
"step": 1,
"default": 8
}
],
"blocks": [
{
"type": "benefit",
"name": "Fitness Benefit",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Lorem Ipsum Dolor"
},
{
"type": "textarea",
"id": "description",
"label": "Description",
"default": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
},
{
"type": "select",
"id": "icon_type",
"label": "Icon Type",
"options": [
{
"value": "",
"label": "Custom Icon"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "dumbbell",
"label": "Dumbbell"
},
{
"value": "weight",
"label": "Weight"
},
{
"value": "food",
"label": "Food"
},
{
"value": "running",
"label": "Running"
},
{
"value": "yoga",
"label": "Yoga"
}
],
"default": "heart"
},
{
"type": "image_picker",
"id": "custom_icon",
"label": "Custom Icon (overrides Icon Type)"
},
{
"type": "color",
"id": "icon_color",
"label": "Icon Color",
"default": "#333333"
},
{
"type": "range",
"id": "title_size",
"label": "Title Size",
"min": 14,
"max": 36,
"step": 1,
"default": 18
},
{
"type": "color",
"id": "title_color",
"label": "Title Color",
"default": "#333333"
},
{
"type": "range",
"id": "text_size",
"label": "Text Size",
"min": 12,
"max": 20,
"step": 1,
"default": 14
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#666666"
}
]
}
],
"presets": [
{
"name": "Fitness Benefits",
"blocks": [
{
"type": "benefit",
"settings": {
"title": "Lorem Ipsum Dolor",
"description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"icon_type": "heart"
}
},
{
"type": "benefit",
"settings": {
"title": "Consectetur Adipiscing",
"description": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
"icon_type": "dumbbell"
}
},
{
"type": "benefit",
"settings": {
"title": "Sed Do Eiusmod",
"description": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"icon_type": "weight"
}
},
{
"type": "benefit",
"settings": {
"title": "Tempor Incididunt",
"description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.",
"icon_type": "food"
}
}
]
}
]
}
{% endschema %}