Code below is my image with text section which parts ı should change for gettint new class ID such as " media with text custom " on my editor
{% style %}
{% if section.settings.color_scheme == “custom” %}
.section-id-{{ section.id }} {
background: {{ section.settings.color_bg }};
–cust-text-color: {{ section.settings.color_text }};
}
{% if section.settings.button_style == ‘auto’ %}
#section-id-{{ section.id }} .button:hover {
background-color: {{ section.settings.color_text }};
color: {{ section.settings.color_bg }};
border-color: {{ section.settings.color_bg }};
}
{% endif %}
{% endif %}
@media(min-width: 768px) {
.section-id-{{ section.id }} .image-with-text__image__inner {
{% if section.settings.media_size == “cover” %}
transform: scale({{ section.settings.image_width | times: 0.01 }});
{% elsif section.settings.media_size == “contain” %}
height: auto !important;
width: {{ section.settings.image_width }}% !important;
{% endif %}
}
.section-id-{{ section.id }} .feature-header {
{%- assign title_size_medium = section.settings.title_size | times: 0.7 -%}
font-size: {{ title_size_medium }}px;
}
.section-id-{{ section.id }} .image-with-text__text {
flex-basis: {{ section.settings.text_width }}%;
}
.section-id-{{ section.id }} .image-with-text__image__inner .rimage-outer-wrapper {
background-size: {{ section.settings.media_size }};
}
}
@media (min-width: 992px) {
.section-id-{{ section.id }} .feature-header {
font-size: {{ section.settings.title_size }}px;
}
}
{% endstyle %}
{% capture image_html %}
{%- if section.settings.image == blank and section.settings.video == blank -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- elsif section.settings.video == blank -%}
{%- else -%}
{% render 'inline-video', video: section.settings.video, image: section.settings.image %}
{% endif %}
{% endcapture %}
{% if section.settings.image_position == ‘left’ %}{{ image_html }}{% endif %}
{% if section.settings.subheading != blank %}
{{ section.settings.subheading | escape }}
{% endif %}
{% if section.settings.title != blank %}
{{ section.settings.title | newline_to_br }}
{% endif %}
{{ section.settings.text }}
{% if section.settings.button_label != blank %}
{% endif %}
{% if section.settings.image_position == ‘right’ %}{{ image_html }}{% endif %}
{% schema %}
{
“name”: “Media with text”,
“class”: “section-image-with-text”,
“settings”: [
{
“type”: “header”,
“content”: “Text”
},
{
“type”: “text”,
“id”: “subheading”,
“label”: “Subheading”
},
{
“type”: “textarea”,
“id”: “title”,
“label”: “Heading”,
“default”: “Media with text”
},
{
“type”: “range”,
“id”: “title_size”,
“min”: 16,
“max”: 100,
“step”: 2,
“unit”: “px”,
“label”: “Heading text size”,
“default”: 28
},
{
“type”: “richtext”,
“id”: “text”,
“label”: “Text”,
“default”: “
Use this text to share information about your store with your customers. Describe product, share announcements, or welcome customers to your store.
”
},
{
“type”: “text”,
“id”: “button_label”,
“label”: “Button”
},
{
“type”: “url”,
“id”: “button_link”,
“label”: “Button link”
},
{
“type”: “select”,
“id”: “text_alignment”,
“label”: “Text alignment”,
“default”: “center”,
“options”: [
{
“label”: “Left”,
“value”: “left”
},
{
“label”: “Center”,
“value”: “center”
},
{
“label”: “Right”,
“value”: “right”
}
]
},
{
“type”: “range”,
“id”: “text_width”,
“min”: 30,
“max”: 70,
“step”: 1,
“unit”: “%”,
“label”: “Text width”,
“default”: 50
},
{
“type”: “select”,
“id”: “button_style”,
“label”: “Button style”,
“default”: “auto”,
“options”: [
{
“label”: “Button - primary”,
“value”: “primary”
},
{
“label”: “Button - secondary”,
“value”: “secondary”
},
{
“label”: “Button - auto”,
“value”: “auto”
},
{
“label”: “Link”,
“value”: “link”
}
]
},
{
“type”: “header”,
“content”: “Media”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”,
“info”: “If you’re using an mp4 video, it’s recommended to also add an image, which will be shown while the video loads”
},
{
“id”: “video”,
“type”: “text”,
“label”: “MP4 video URL”,
“info”: “E.g.
https://example.com/video.mp4 - will not work with YouTube or Vimeo.
Learn more”
},
{
“type”: “range”,
“id”: “image_width”,
“min”: 40,
“max”: 100,
“step”: 1,
“unit”: “%”,
“label”: “Media scale”,
“default”: 100
},
{
“type”: “select”,
“id”: “image_position”,
“label”: “Media position”,
“default”: “right”,
“options”: [
{
“value”: “right”,
“label”: “Right”
},
{
“value”: “left”,
“label”: “Left”
}
]
},
{
“type”: “select”,
“id”: “media_size”,
“label”: “Media size”,
“options”: [
{
“value”: “cover”,
“label”: “Fill”
},
{
“value”: “contain”,
“label”: “Natural”
}
],
“default”: “cover”
},
{
“type”: “header”,
“content”: “Style”
},
{
“type”: “radio”,
“id”: “color_scheme”,
“label”: “Color scheme”,
“default”: “standard”,
“options”: [
{
“value”: “standard”,
“label”: “Standard”
},
{
“value”: “alt”,
“label”: “Alternate colors”
},
{
“value”: “custom”,
“label”: “Custom colors”
}
]
},
{
“type”: “color”,
“id”: “color_bg”,
“label”: “Custom background color”
},
{
“type”: “color”,
“id”: “color_text”,
“label”: “Custom text color”
}
],
“presets”: [
{
“name”: “Media with text”,
“settings”: {}
}
]
}
{% endschema %}
