modify this shopify section to be able to choose the product image and add the price of the product below the text section and replace the button link to the product automaticaly by choosing the product i want
{% comment %}
  © Sections Pro. You are free to use this section in your store. You may not redistribute this section in another Shopify app.
{% endcomment %}
<style>

  {{ section.settings.text_font | font_face }}
  {{ section.settings.headline_font | font_face }}

  #sp-split-image-{{ section.id }}.sp-split-image-wrap p,
  #sp-split-image-{{ section.id }}.sp-split-image-wrap p a {
    font-size: {{ section.settings.text_size }}px;
    font-family: {{ section.settings.text_font.family }}, {{ section.settings.text_font.fallback_families }};
    font-weight: {{ section.settings.text_font.weight }};
    {% if section.settings.text_line_height != 'inherit' %}line-height: {{ section.settings.text_line_height }};{% endif %}
  }

  #sp-split-image-{{ section.id }}.sp-split-image-wrap h2 {
    font-size: {{ section.settings.headline_size }}px;
    font-family: {{ section.settings.headline_font.family }}, {{ section.settings.headline_font.fallback_families }};
    font-weight: {{ section.settings.headline_font.weight }};
    {% if section.settings.headline_line_height != 'inherit' %}line-height: {{ section.settings.headline_line_height }};{% endif %}
  }

  #sp-split-image-{{ section.id }}.sp-split-image-wrap {
    background-image: {{section.settings.background_color}};
    width: 100%;
  }

  #sp-split-image-{{ section.id }} .sp-split-image-grid {
    position: relative;
    margin: 0 auto;
    max-width: {{ section.settings.max_width }}px;
    padding: {{ section.settings.padding_top }}px {{ section.settings.padding_right }}px {{ section.settings.padding_bottom }}px {{ section.settings.padding_left }}px;
  }
  
  #sp-split-image-{{ section.id }} .sp-split-image-grid-left {
    display: grid;
    {% if section.settings.image_aspect_ratio == "21 / 9" %}
    grid-template-columns: 3fr 1fr;
    {% elsif section.settings.image_aspect_ratio == "16 / 9"%}
    grid-template-columns: 2fr 1fr;
    {% else %}
    grid-template-columns: 1fr 1fr;
    {% endif %}
    align-items: center;
    gap: 30px;
  }

  #sp-split-image-{{ section.id }} .sp-split-image-grid-right {
    display: grid;
    {% if section.settings.image_aspect_ratio == "21 / 9" %}
    grid-template-columns: 1fr 3fr;
    {% elsif section.settings.image_aspect_ratio == "16 / 9"%}
    grid-template-columns: 1fr 2fr;
    {% else %}
    grid-template-columns: 1fr 1fr;
    {% endif %}
    align-items: center;
    gap: 20px;
  }

  @media only screen and (max-width: 900px) {
    #sp-split-image-{{ section.id }} .sp-split-image-grid-left,
    #sp-split-image-{{ section.id }} .sp-split-image-grid-right {
      display: block;
    }
  }

  #sp-split-image-{{ section.id }} .sp-split-image-mobile-text {
    display: none;
  }

  @media only screen and (max-width: 900px) {
    #sp-split-image-{{ section.id }} .sp-split-image-column {
      padding: 5px 0;
    }

    #sp-split-image-{{ section.id }} .sp-split-image-column-text {
      display: none;
      color: #111111;
    }

    #sp-split-image-{{ section.id }} .sp-split-image-mobile-text {
      display: block;
    }
  }

  #sp-split-image-{{ section.id }} .sp-split-image-grid img {
    aspect-ratio: {{ section.settings.image_aspect_ratio }};
    object-fit: cover;
    width: 100%;
    display: block;
    border-radius: {{ section.settings.border_radius }}px;
    aspect-ratio: 1 / 1;
    {% if section.settings.media_shadow %}box-shadow: 0 0 5px 0 rgba(0,0,0,0.20);{% endif %}
  }

  #sp-split-image-{{ section.id }} .sp-split-image-grid h2, 
  #sp-split-image-{{ section.id }} .sp-split-image-grid p {
    text-align: center;
    margin: 0 0 {{ section.settings.element_spacing }}px 0 !important;
    padding: 0 !important;
    color: var(--colorBtnPrimary);
  }

  #sp-split-image-{{ section.id }} .sp-split-image-grid p:last-child {
    margin: 0 !important;
    padding: 0;
  }

  #sp-split-image-{{ section.id }} a.sp-split-image-cta {
    display: inline-block;
    padding: 10px 20px;
    padding: {{ section.settings.button_padding_tb }}px {{ section.settings.button_padding_lr }}px;
    background: var(--colorBtnPrimary);
    border-radius: {{ section.settings.button_border_radius }}px;
    color: {{ section.settings.button_text_color }} !important;
    font-size: {{ section.settings.button_text_size }}px !important;
    text-decoration: none;
    cursor: pointer;
    text-shadow: none;
  }
</style>



<div id="sp-split-image-{{ section.id }}" class="sp-split-image-wrap" sp-wrap>
  <div class="sp-split-image-grid sp-split-image-grid-{{ section.settings.image_location }}" sp-container>

    {%- if section.settings.image_location == "left" -%}
    <div class="sp-split-image-column" sp-column>
      {% if section.settings.image %}
        <img src="{{ section.settings.image | image_url: width: 600 }}"
          srcset="{{ section.settings.image | image_url: width: 600 }} 600w, {{ section.settings.image | image_url: width: 1100 }} 1100w">
      {% else %}
        <img src="data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 500 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect x='2' y='2' width='496' height='496' fill='%23D8D8D8' stroke='%23D8D8D8' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E">
      {% endif %}
    </div>
    <div class="sp-split-image-column sp-split-image-column-text" sp-column>
      <h2 class="heading">{{ section.settings.headline }}</h2>
      <p>{{ section.settings.content }}</p>
      <p><a class="sp-split-image-cta" href="{{ section.settings.link }}">{{ section.settings.link_text }}</a></p>
    </div>
    {%- endif -%}

    {%- if section.settings.image_location == "right" -%}
    <div class="sp-split-image-column sp-split-image-column-text" sp-column>
      <h2 class="heading">{{ section.settings.headline }}</h2>
      <p>{{ section.settings.content }}</p>
      <p><a class="sp-split-image-cta" href="{{ section.settings.link }}">{{ section.settings.link_text }}</a></p>
    </div>
    <div class="sp-split-image-column" sp-column>
      {% if section.settings.image %}
        <img src="{{ section.settings.image | image_url: width: 600 }}"
          srcset="{{ section.settings.image | image_url: width: 600 }} 600w, {{ section.settings.image | image_url: width: 1100 }} 1100w">
      {% else %}
        <img src="data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 500 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect x='2' y='2' width='496' height='496' fill='%23D8D8D8' stroke='%23D8D8D8' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E">
      {% endif %}
    </div>
    {%- endif -%}

    <div class="sp-split-image-mobile-text">
      <h2 class="heading">{{ section.settings.headline }}</h2>
      <p>{{ section.settings.content }}</p>
      <p><a class="sp-split-image-cta" href="{{ section.settings.link }}">{{ section.settings.link_text }}</a></p>
    </div>
    
  </div>
</div>

{% schema %}
  {
    "name": "🚀SP - Image with Text",
    "settings": [
      {
        "type": "header",
        "content": "Text",
        "info": "Set the text size for your widget"
      },
      {
        "type": "font_picker",
        "id": "text_font",
        "label": "Text Font",
        "default": "sans-serif"
      },
      {
        "type": "range",
        "id": "text_size",
        "min": 10,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Text Size",
        "default": 15
      },
      {
        "type": "select",
        "id": "text_line_height",
        "label": "Line Height",
        "options": [
          {
            "value": "0.75",
            "label": "0.75"
          },
          {
            "value": "1.0",
            "label": "1.0"
          },
          {
            "value": "1.1",
            "label": "1.1"
          },
          {
            "value": "1.2",
            "label": "1.2"
          },
          {
            "value": "1.3",
            "label": "1.3"
          },
          {
            "value": "1.4",
            "label": "1.4"
          },
          {
            "value": "1.5",
            "label": "1.5"
          },
          {
            "value": "1.6",
            "label": "1.6"
          },
          {
            "value": "1.7",
            "label": "1.7"
          },
          {
            "value": "1.8",
            "label": "1.8"
          },
          {
            "value": "1.9",
            "label": "1.9"
          },
          {
            "value": "2.0",
            "label": "2.0"
          },
          {
            "value": "inherit",
            "label": "Inherit"
          }
        ],
        "default": "inherit"
      },
      {
        "type": "color",
        "id": "text_color",
        "default": "#111111",
        "label": "Text Color"
      },
      {
        "type": "font_picker",
        "id": "headline_font",
        "label": "Headline Font",
        "default": "sans-serif"
      },
      {
        "type": "range",
        "id": "headline_size",
        "min": 10,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Headline Size",
        "default": 25
      },
      {
        "type": "select",
        "id": "headline_line_height",
        "label": "Line Height",
        "options": [
          {
            "value": "0.75",
            "label": "0.75"
          },
          {
            "value": "1.0",
            "label": "1.0"
          },
          {
            "value": "1.1",
            "label": "1.1"
          },
          {
            "value": "1.2",
            "label": "1.2"
          },
          {
            "value": "1.3",
            "label": "1.3"
          },
          {
            "value": "1.4",
            "label": "1.4"
          },
          {
            "value": "1.5",
            "label": "1.5"
          },
          {
            "value": "1.6",
            "label": "1.6"
          },
          {
            "value": "1.7",
            "label": "1.7"
          },
          {
            "value": "1.8",
            "label": "1.8"
          },
          {
            "value": "1.9",
            "label": "1.9"
          },
          {
            "value": "2.0",
            "label": "2.0"
          },
          {
            "value": "inherit",
            "label": "Inherit"
          }
        ],
        "default": "inherit"
      },
      {
        "type": "header",
        "content": "Colors",
        "info": "Set colors for the section."
      },
      {
        "type": "color_background",
        "id": "background_color",
        "default": "linear-gradient(164deg, #FFF 0%, #FFF 100%)",
        "label": "Background Color"
      },
      {
        "type": "header",
        "content": "Dimensions",
        "info": "Set the section dimensions in pixels."
      },
      {
        "type": "number",
        "id": "max_width",
        "default": 1000,
        "label": "Max Width of Section"
      },
      {
        "type": "number",
        "id": "padding_top",
        "default": 25,
        "label": "Padding Top"
      },
      {
        "type": "number",
        "id": "padding_bottom",
        "default": 25,
        "label": "Padding Bottom"
      },
      {
        "type": "number",
        "id": "padding_left",
        "default": 10,
        "label": "Padding Left"
      },
      {
        "type": "number",
        "id": "padding_right",
        "default": 10,
        "label": "Padding Right"
      },
      {
        "type": "number",
        "id": "element_spacing",
        "default": 20,
        "label": "Element Spacing"
      },
      {
        "type": "header",
        "content": "Content",
        "info": "Set image and text for section"
      },
      {
        "type": "select",
        "id": "image_location",
        "label": "Image Location",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ],
        "default": "left"
      },
      {
        "type": "select",
        "id": "image_aspect_ratio",
        "label": "Image Aspect Ratio",
        "options": [
          {
            "value": "21 / 9",
            "label": "21:9"
          },
          {
            "value": "16 / 9",
            "label": "16:9"
          },
          {
            "value": "4 / 3",
            "label": "4:3"
          }
        ],
        "default": "21 / 9"
      },
      {
        "type": "number",
        "id": "border_radius",
        "default": 5,
        "label": "Image Border Radius"
      },
      {
        "type": "checkbox",
        "id": "media_shadow",
        "default": true,
        "label": "Subtle Shadow on Image"
      },
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "inline_richtext",
        "id": "headline",
        "label": "Headline",
        "default": "Sample headline"
      },
      {
        "type": "inline_richtext",
        "id": "content",
        "label": "Content",
        "default": "Sample content"
      },
      {
        "type": "header",
        "content": "Button Style",
        "info": "Set the look and feel of the button"
      },
      {
        "type": "color_background",
        "id": "button_background_color",
        "default": "linear-gradient(164deg, #111 0%, #333 100%)",
        "label": "Button Background Color"
      },
      {
        "type": "color",
        "id": "button_text_color",
        "default": "#fff",
        "label": "Button Text Color"
      },
      {
        "type": "range",
        "id": "button_text_size",
        "min": 10,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Text Size",
        "default": 15
      },
      {
        "type": "number",
        "id": "button_padding_tb",
        "default": 10,
        "label": "Padding Top/Bottom"
      },
      {
        "type": "number",
        "id": "button_padding_lr",
        "default": 25,
        "label": "Padding Left/Right"
      },
      {
        "type": "number",
        "id": "button_border_radius",
        "default": 5,
        "label": "Border Radius"
      },
      {
        "type": "inline_richtext",
        "id": "link_text",
        "label": "Link Text",
        "default": "Shop More"
      },
      {
        "type": "url",
        "id": "link",
        "label": "Link"
      }
    ],
    "presets": [
      {
        "name": "🚀SP - Image with Text"
      }
    ]
  }
{% endschema %}