How to add like these section in dawn theme

Store Design
1

satyapal49_0-1713334553575.png
satyapal49_0-1713334553575.png1880×397 32 KB

2

Hello @satyapal49 ,

Go to online store > Themes > Customize
You can easily add this section with customization

theme_editor-de166fde48a3e3db627028ce88ad7e5b9e70f4a384aae756ba77624d09fc4c5f.png
theme_editor-de166fde48a3e3db627028ce88ad7e5b9e70f4a384aae756ba77624d09fc4c5f.png2078×1542 294 KB

3

Hello @satyapal49 ,
For adding Such type of Section you need to Create this Section
Please follow steps :

  1. Go to the Online Store-> Theme-> Edit code-> Create a New Section → Svg-Image-Section
    paste their Code
{{ 'svg-image.css' | asset_url | stylesheet_tag }}

  

    

      {% for block in section.blocks %}
        

          
          

            {{ block.settings.text }}
          

        

      {% endfor %}
    

  

{% schema %}
{
  "name": "SVG image section name",
  "blocks": [
    {
      "name": "Svg Image Section ",
      "type": "text",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text One",
          "default": "1-Year Hassle=Free Warranty"
        },
         {
            "id": "small-image",
            "type": "image_picker",
            "label": "SVG Small Image"
              }
      ]
    }
  ],
  "presets": [{
    "name": "Svg-Image-Section"
  }]

}
{% endschema %}
  1. For Adding CSS need to Create a css File for Creating a CSS file follow the Steps :
    Go to the Online Store and Create a css File Called name svg-image.css in assets folder paste this CSS in this file
.svg-main-container {
  width: 100%;
  background-color: rgb(238, 248, 255);
}

.svg-container {
  max-width: 1230px;
  margin: 0 auto;
  padding: 8px;
  max-width: 1230px;
  margin: 0 auto;
  padding: 22px 0 !important;
}

.svg-image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.image-test {
  display: flex;
  padding-right: 25px;
  align-items: center;
  max-width: 33.33%;
}
.svg-image-small {
  padding-right: 7px;
  width: 13%;
  height: auto;
  font-family: SofiaPro;
}
.svg-text {
  font-size: 18px;
  line-height: 24px;
  color: #283947;
  font-family: SofiaPro;
  font-weight: 400;
}
  1. Then Go to the Customization Section and search for Svg-Image-Section and then Customize.
    If their is anything Feel Free to ask we are here to help you.
4

not optimized

5

Hello @satyapal49 ,
Sure, here’s the optimized version of your code:

{{ 'svg-image.css' | asset_url | stylesheet_tag }}

  

    

      {% for block in section.blocks %}
        

          
          

{{ block.settings.text }}

        

      {% endfor %}

Here is the CSS:

.svg-main-container {
  width: 100%;
  background-color: rgb(238, 248, 255);
}

.svg-container {
  max-width: 1230px;
  margin: 0 auto;
  padding: 8px;
}

.svg-image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.image-test {
  display: flex;
  padding-right: 25px;
  align-items: center;
  max-width: 33.33%;
}

.svg-image-small {
  max-width: 100%;
  height: auto;
  font-family: SofiaPro;
}

.svg-text {
  font-size: 18px;
  line-height: 24px;
  color: #283947;
  font-family: SofiaPro;
  font-weight: 400;
}

I hope this will help.