← Back to Sections
Values Icons Image
{%- 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.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
padding-left: {{ section.settings.padding_horizontal }}px;
padding-right: {{ section.settings.padding_horizontal }}px;
}
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
.section-{{ section.id }} .bc-heading,
.section-{{ section.id }} .bc-heading h1,
.section-{{ section.id }} .bc-heading h2,
.section-{{ section.id }} .bc-heading h3,
.section-{{ section.id }} .bc-heading h4,
.section-{{ section.id }} .bc-heading h5,
.section-{{ section.id }} .bc-heading h6,
.section-{{ section.id }} .bc-heading p {
font-size: clamp({{ section.settings.heading_size | times: section.settings.mobile_scale_ratio }}rem, 4vw, {{ section.settings.heading_size }}rem) !important;
line-height: {{ section.settings.heading_line_height }} !important;
max-width: {{ section.settings.heading_max_width }}ch;
text-align: center;
margin: 0;
}
.section-{{ section.id }} .bc-subheading * {
font-size: clamp({{ section.settings.subheading_size | times: section.settings.mobile_scale_ratio }}rem, 4vw, {{ section.settings.subheading_size }}rem) !important;
line-height: {{ section.settings.subheading_line_height }};
max-width: {{ section.settings.subheading_max_width }}ch;
font-weight: 600;
margin-bottom: 10px;
text-align: center;
}
.section-{{ section.id }} .bc-paragraph * {
font-size: clamp({{ section.settings.paragraph_size | times: section.settings.mobile_scale_ratio }}rem, 4vw, {{ section.settings.paragraph_size }}rem) !important;
line-height: {{ section.settings.paragraph_line_height }};
max-width: {{ section.settings.paragraph_max_width }}ch;
text-align: center;
}
{% if section.settings.use_custom_button_style %}
.section-{{ section.id }} .bc-button {
padding: {{ section.settings.button_padding_vertical }}px {{ section.settings.button_padding_horizontal }}px;
background-color: {{ section.settings.button_color }};
color: {{ section.settings.button_text_color }};
border-radius: {{ section.settings.button_border_radius }}px;
border: {{ section.settings.button_border_width }}px solid {{ section.settings.button_border_color }};
margin-top: {{ section.settings.button_top_margin }}px;
}
.section-{{ section.id }} .bc-button:hover {
background-color: {{ section.settings.button_hover_color }};
color: {{ section.settings.button_text_hover_color }};
transition-duration: .2s;
transition-timing-function: ease-out;
}
{% endif %}
.section-{{ section.id }} .bc-values-grid-section {
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
.section-{{ section.id }} .bc-values-grid-header-div {
width: 100%;
border-top: solid;
border-bottom: solid;
border-color: {{ section.settings.border_color }};
border-width: {{ section.settings.border_thickness }}px;
justify-content: center;
align-items: center;
display: flex;
padding-top: {{ section.settings.header_padding_top }}px;
padding-bottom: {{ section.settings.header_padding_bottom }}px;
}
.section-{{ section.id }} .bc-values-grid-big-div {
width: 100%;
border-bottom: solid;
border-color: {{ section.settings.border_color }};
border-width: {{ section.settings.border_thickness }}px;
justify-content: center;
align-items: center;
display: flex;
}
.section-{{ section.id }} .bc-values-grid-div-left {
width: 33%;
}
.section-{{ section.id }} .bc-values-grid-div-center {
width: 34%;
height: 680px;
border-left: solid;
border-right: solid;
border-color: {{ section.settings.border_color }};
border-width: {{ section.settings.border_thickness }}px;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
.section-{{ section.id }} .bc-values-grid-div-right {
width: 33%;
}
.section-{{ section.id }} .bc-values-grid-div-top-left {
height: 340px;
border-bottom: solid;
border-color: {{ section.settings.border_color }};
border-width: {{ section.settings.border_thickness }}px;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
.section-{{ section.id }} .bc-values-grid-div-bottom-left {
height: 340px;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
.section-{{ section.id }} .bc-values-grid-div-top-right {
height: 340px;
border-bottom: solid;
border-color: {{ section.settings.border_color }};
border-width: {{ section.settings.border_thickness }}px;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
.section-{{ section.id }} .bc-values-grid-div-bottom-right {
height: 340px;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
.section-{{ section.id }} .bc-icon {
width: {{ section.settings.icon_size }}px;
height: {{ section.settings.icon_size }}px;
margin-bottom: 25px;
color: {{ section.settings.icon_color }};
}
.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;
}
.section-{{ section.id }} .bc-values-grid-center-image {
width: 85%;
max-height: 80%;
object-fit: cover;
margin-bottom: 25px;
{% if section.settings.image_opacity %}
opacity: {{ section.settings.image_opacity }}%;
{% endif %}
}
.section-{{ section.id }} .bc-values-grid-center-video {
width: 85%;
max-height: 80%;
object-fit: cover;
margin-bottom: 25px;
{% if section.settings.video_opacity %}
opacity: {{ section.settings.video_opacity }}%;
{% endif %}
}
.section-{{ section.id }} .bc-box-text-container {
display: flex;
flex-direction: column;
align-items: center;
}
@media screen and (max-width: 991px) {
.section-{{ section.id }} .bc-values-grid-header-div {
padding: 20px;
}
.section-{{ section.id }} .bc-values-grid-big-div {
flex-direction: column;
}
.section-{{ section.id }} .bc-values-grid-div-left {
width: 100%;
}
.section-{{ section.id }} .bc-values-grid-div-center {
width: 100%;
padding: 40px;
display: none;
}
.section-{{ section.id }} .bc-values-grid-div-right {
width: 100%;
}
.section-{{ section.id }} .bc-values-grid-div-top-left {
height: auto;
padding: 40px;
}
.section-{{ section.id }} .bc-values-grid-div-bottom-left {
height: auto;
border-bottom: {{ section.settings.border_thickness }}px solid {{ section.settings.border_color }};
padding: 40px;
}
.section-{{ section.id }} .bc-values-grid-div-top-right {
height: auto;
padding: 40px;
}
.section-{{ section.id }} .bc-values-grid-div-bottom-right {
height: auto;
padding: 40px;
}
.section-{{ section.id }} .bc-values-grid-center-image,
.section-{{ section.id }} .bc-values-grid-center-video {
max-height: 85%;
}
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} .bc-values-grid-center-image,
.section-{{ section.id }} .bc-values-grid-center-video {
width: 100%;
}
}
@media screen and (max-width: 479px) {
.section-{{ section.id }} .bc-values-grid-div-center {
height: 550px;
padding: 20px;
}
}
{% if section.settings.background_image != blank %}
.section-{{ section.id }} {
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 %}
background-image: linear-gradient(rgba(255,255,255,{{ 100 | minus: section.settings.background_image_opacity | divided_by: 100.0 }}), rgba(255,255,255,{{ 100 | minus: section.settings.background_image_opacity | divided_by: 100.0 }})), url({{ section.settings.background_image | img_url: 'original' }});
{% endif %}
}
{% endif %}
{%- endstyle -%}
<section class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
<div class="bc-values-grid-section">
<div class="bc-values-grid-header-div">
<div class="bc-heading">{{ section.settings.heading_text | default: 'Your Heading Here' }}</div>
</div>
<div class="bc-values-grid-big-div">
<div class="bc-values-grid-div-left">
<div class="bc-values-grid-div-top-left">
<div class="bc-icon">
{% if section.settings.icon_image_1 != blank %}
<img src="{{ section.settings.icon_image_1 | img_url: 'original' }}" alt="{{ section.settings.icon_image_alt_1 | default: 'Icon 1' }}" {% if section.settings.image_loading == 'lazy' %}loading="lazy"{% endif %}>
{% else %}
{{ section.settings.icon_svg_1 }}
{% endif %}
</div>
<div class="bc-box-text-container">
<div class="bc-subheading">{{ section.settings.box_1_subtitle | default: 'Subheading 1' }}</div>
<div class="bc-paragraph">{{ section.settings.box_1_text | default: '<p>Short description goes here. Add details about this point to give more information to your customers.</p>' }}</div>
</div>
</div>
<div class="bc-values-grid-div-bottom-left">
<div class="bc-icon">
{% if section.settings.icon_image_2 != blank %}
<img src="{{ section.settings.icon_image_2 | img_url: 'original' }}" alt="{{ section.settings.icon_image_alt_2 | default: 'Icon 2' }}" {% if section.settings.image_loading == 'lazy' %}loading="lazy"{% endif %}>
{% else %}
{{ section.settings.icon_svg_2 }}
{% endif %}
</div>
<div class="bc-box-text-container">
<div class="bc-subheading">{{ section.settings.box_2_subtitle | default: 'Subheading 2' }}</div>
<div class="bc-paragraph">{{ section.settings.box_2_text | default: '<p>Short description goes here. Add details about this point to give more information to your customers.</p>' }}</div>
</div>
</div>
</div>
<div class="bc-values-grid-div-center">
{% if section.settings.center_video != blank %}
{{ section.settings.center_video | video_tag: controls: false, autoplay: true, loop: true, muted: true, preload: "auto", class: "bc-values-grid-center-video" }}
{% elsif section.settings.center_image != blank %}
<img src="{{ section.settings.center_image | img_url: 'master' }}" alt="{{ section.settings.center_image_alt | default: 'Center image' }}" {% if section.settings.image_loading == 'lazy' %}loading="lazy"{% endif %} class="bc-values-grid-center-image">
{% endif %}
{% if section.settings.button_text != blank and section.settings.button_link != blank %}
<a href="{{ section.settings.button_link }}" class="button{% if section.settings.use_theme_button_class %} {{ section.settings.theme_button_class }}{% endif %}{% if section.settings.use_custom_button_style %} bc-button{% endif %}">{{ section.settings.button_text | default: 'Click Me' }}</a>
{% endif %}
</div>
<div class="bc-values-grid-div-right">
<div class="bc-values-grid-div-top-right">
<div class="bc-icon">
{% if section.settings.icon_image_3 != blank %}
<img src="{{ section.settings.icon_image_3 | img_url: 'original' }}" alt="{{ section.settings.icon_image_alt_3 | default: 'Icon 3' }}" {% if section.settings.image_loading == 'lazy' %}loading="lazy"{% endif %}>
{% else %}
{{ section.settings.icon_svg_3 }}
{% endif %}
</div>
<div class="bc-box-text-container">
<div class="bc-subheading">{{ section.settings.box_3_subtitle | default: 'Subheading 3' }}</div>
<div class="bc-paragraph">{{ section.settings.box_3_text | default: '<p>Short description goes here. Add details about this point to give more information to your customers.</p>' }}</div>
</div>
</div>
<div class="bc-values-grid-div-bottom-right">
<div class="bc-icon">
{% if section.settings.icon_image_4 != blank %}
<img src="{{ section.settings.icon_image_4 | img_url: 'original' }}" alt="{{ section.settings.icon_image_alt_4 | default: 'Icon 4' }}" {% if section.settings.image_loading == 'lazy' %}loading="lazy"{% endif %}>
{% else %}
{{ section.settings.icon_svg_4 }}
{% endif %}
</div>
<div class="bc-box-text-container">
<div class="bc-subheading">{{ section.settings.box_4_subtitle | default: 'Subheading 4' }}</div>
<div class="bc-paragraph">{{ section.settings.box_4_text | default: '<p>Short description goes here. Add details about this point to give more information to your customers.</p>' }}</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% schema %}
{
"name": "BC Values Icons Image",
"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": "Borders Color",
"default": "#000000"
},
{
"type": "color",
"id": "icon_color",
"label": "Icon Color",
"default": "#4CAF50"
},
{
"type": "color",
"id": "button_color",
"label": "Button Background Color",
"default": "#DFF799"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_hover_color",
"label": "Button Hover Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_text_hover_color",
"label": "Button Text Hover Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_border_color",
"label": "Button Border Color",
"default": "#000000"
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "range",
"id": "padding_top",
"label": "Padding Top",
"min": 0,
"max": 150,
"step": 5,
"default": 50,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding Bottom",
"min": 0,
"max": 150,
"step": 5,
"default": 50,
"unit": "px"
},
{
"type": "range",
"id": "padding_horizontal",
"label": "Padding Horizontal",
"min": 0,
"max": 150,
"step": 5,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "border_thickness",
"label": "Borders Thickness",
"min": 1,
"max": 30,
"step": 1,
"default": 1,
"unit": "px"
},
{
"type": "range",
"id": "header_padding_top",
"label": "Header Padding Top",
"min": 0,
"max": 150,
"step": 5,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "header_padding_bottom",
"label": "Header Padding Bottom",
"min": 0,
"max": 150,
"step": 5,
"default": 40,
"unit": "px"
},
{
"type": "header",
"content": "Text"
},
{
"type": "richtext",
"id": "heading_text",
"label": "Heading Text",
"default": "<h2>Your Heading Here</h2>"
},
{
"type": "select",
"id": "heading_tag",
"label": "Heading Tag",
"options": [
{
"value": "h1",
"label": "H1"
},
{
"value": "h2",
"label": "H2"
},
{
"value": "h3",
"label": "H3"
},
{
"value": "p",
"label": "Paragraph"
}
],
"default": "h2"
},
{
"type": "richtext",
"id": "box_1_subtitle",
"label": "Box 1 Subheading",
"default": "<p>Subheading 1</p>"
},
{
"type": "richtext",
"id": "box_1_text",
"label": "Box 1 Text",
"default": "<p>Short description goes here. Add details about this point to give more information to your customers.</p>"
},
{
"type": "richtext",
"id": "box_2_subtitle",
"label": "Box 2 Subheading",
"default": "<p>Subheading 2</p>"
},
{
"type": "richtext",
"id": "box_2_text",
"label": "Box 2 Text",
"default": "<p>Short description goes here. Add details about this point to give more information to your customers.</p>"
},
{
"type": "richtext",
"id": "box_3_subtitle",
"label": "Box 3 Subheading",
"default": "<p>Subheading 3</p>"
},
{
"type": "richtext",
"id": "box_3_text",
"label": "Box 3 Text",
"default": "<p>Short description goes here. Add details about this point to give more information to your customers.</p>"
},
{
"type": "richtext",
"id": "box_4_subtitle",
"label": "Box 4 Subheading",
"default": "<p>Subheading 4</p>"
},
{
"type": "richtext",
"id": "box_4_text",
"label": "Box 4 Text",
"default": "<p>Short description goes here. Add details about this point to give more information to your customers.</p>"
},
{
"type": "range",
"id": "heading_size",
"label": "Heading Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 2.2,
"unit": "rem"
},
{
"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": 50,
"unit": "ch"
},
{
"type": "range",
"id": "subheading_size",
"label": "Subheading Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.2,
"unit": "rem"
},
{
"type": "range",
"id": "subheading_line_height",
"label": "Subheading Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "subheading_max_width",
"label": "Subheading Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 36,
"unit": "ch"
},
{
"type": "range",
"id": "paragraph_size",
"label": "Paragraph Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1,
"unit": "rem"
},
{
"type": "range",
"id": "paragraph_line_height",
"label": "Paragraph Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.5
},
{
"type": "range",
"id": "paragraph_max_width",
"label": "Paragraph Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 30,
"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": "header",
"content": "Media"
},
{
"type": "image_picker",
"id": "background_image",
"label": "Background Image",
"info": "Recommended width 2200px."
},
{
"type": "range",
"id": "background_image_vertical_position",
"label": "Background Image Vertical Position",
"min": 0,
"max": 100,
"step": 1,
"default": 50,
"unit": "%"
},
{
"type": "range",
"id": "background_image_opacity",
"label": "Background Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "image_picker",
"id": "center_image",
"label": "Center Image",
"info": "Recommended width 1000px."
},
{
"type": "text",
"id": "center_image_alt",
"label": "Center Image Alt Text",
"placeholder": "e.g. Product showcase"
},
{
"type": "video",
"id": "center_video",
"label": "Center Video",
"info": "Video takes precedence over image if both are uploaded"
},
{
"type": "range",
"id": "image_opacity",
"label": "Center Image/Video Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "video_opacity",
"label": "Video Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "select",
"id": "image_loading",
"label": "Image Loading",
"options": [
{
"value": "lazy",
"label": "Lazy"
},
{
"value": "eager",
"label": "Eager"
}
],
"default": "lazy",
"info": "Choose lazy for images below the fold, eager for above the fold"
},
{
"type": "image_picker",
"id": "icon_image_1",
"label": "Icon 1 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_1",
"label": "Icon 1 Image Alt Text",
"placeholder": "e.g. Quality icon"
},
{
"type": "image_picker",
"id": "icon_image_2",
"label": "Icon 2 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_2",
"label": "Icon 2 Image Alt Text",
"placeholder": "e.g. Speed icon"
},
{
"type": "image_picker",
"id": "icon_image_3",
"label": "Icon 3 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_3",
"label": "Icon 3 Image Alt Text",
"placeholder": "e.g. Support icon"
},
{
"type": "image_picker",
"id": "icon_image_4",
"label": "Icon 4 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_4",
"label": "Icon 4 Image Alt Text",
"placeholder": "e.g. Trust icon"
},
{
"type": "textarea",
"id": "icon_svg_1",
"label": "Icon 1 SVG 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.",
"default": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 12l3 3 5-5\"/></svg>"
},
{
"type": "textarea",
"id": "icon_svg_2",
"label": "Icon 2 SVG 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.",
"default": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 12l3 3 5-5\"/></svg>"
},
{
"type": "textarea",
"id": "icon_svg_3",
"label": "Icon 3 SVG 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.",
"default": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 12l3 3 5-5\"/></svg>"
},
{
"type": "textarea",
"id": "icon_svg_4",
"label": "Icon 4 SVG 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.",
"default": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 12l3 3 5-5\"/></svg>"
},
{
"type": "range",
"id": "icon_size",
"label": "Icon Size",
"min": 20,
"max": 100,
"step": 5,
"default": 50,
"unit": "px"
},
{
"type": "header",
"content": "Buttons"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Button Text",
"placeholder": "Button Text"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
},
{
"type": "checkbox",
"id": "use_theme_button_class",
"label": "Use theme button styling",
"info": "Only enable this if your theme uses a different class than 'button' for its primary buttons.",
"default": false
},
{
"type": "text",
"id": "theme_button_class",
"label": "Theme button class",
"info": "Enter your theme's main button class (e.g. 'btn', 'primary-button') if it's not 'button'.",
"placeholder": "e.g. btn btn--primary"
},
{
"type": "checkbox",
"id": "use_custom_button_style",
"label": "Use custom button styling",
"info": "Enable this to apply custom styles (padding, colors, radius, etc.) to this section's buttons.",
"default": false
},
{
"type": "range",
"id": "button_padding_horizontal",
"label": "Button Padding - Horizontal",
"min": 0,
"max": 100,
"step": 1,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "button_padding_vertical",
"label": "Button Padding - Vertical",
"min": 0,
"max": 50,
"step": 1,
"default": 8,
"unit": "px"
},
{
"type": "range",
"id": "button_border_radius",
"label": "Button Border Radius",
"min": 0,
"max": 50,
"step": 1,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "button_border_width",
"label": "Button Border Width",
"min": 0,
"max": 12,
"step": 1,
"default": 0,
"unit": "px",
"info": "Set to 0 to hide border."
},
{
"type": "range",
"id": "button_top_margin",
"label": "Button Top Margin",
"min": 0,
"max": 100,
"step": 5,
"default": 30,
"unit": "px"
}
],
"presets": [
{
"name": "BC Values Icons Image"
}
]
}
{% endschema %}