title: Shopify Image width slider not working
body: <p>I achieved success to  add new block in Shopify using schema and Shopify liquid. I have added schema which is expected to adjust the width of an image one on left side and one for right side.I am quite close but something missing here.Is there something wrong with <code>style="width:{{img_width}}vw"</code> or Image width schema ? Thanks</p>
  
  <p>Both image width slider does not make difference with image screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/3nPx3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3nPx3.png" alt="screenshot"></a></p>
  
  <pre><code>{% elsif block.type == 'side_by_side' %}
        &lt;div class="container"&gt;
          &lt;div class="eight columns image_column"&gt;
           {% if block.settings.image-left %}
                &lt;p&gt;
                   {% assign image_left_width = block.settings.image_width %}
                   &lt;img src="{{ block.settings.image-left | img_url: '300x', scale: 2}}" style="width:{{image_left_width}}vw" alt="{{block.settings.image-left.alt}}" class="lazyload transition-in"/&gt;
                &lt;/p&gt;    
              {% endif %}
          &lt;/div&gt;
  
          &lt;div class="eight columns image_column"&gt;
            {% if block.settings.image-right %}
          &lt;p&gt;
             {% assign image_rigth_width = block.settings.image_width %}            
           &lt;img src =" {{ block.settings.image-right | img_url: '300x', scale: 2}}" style="width:{{image_right_width}}vw" alt="{{block.settings.image-right.alt}}" class="lazyload transition-in" &gt;
          &lt;/p&gt;    
          {% endif %}
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Image block Schema</p>
  
  <pre><code>{
        "type": "side_by_side",
        "name": "side_by_side",
        "settings": [
          {
            "type": "image_picker",
            "id": "image-left",
            "label": "Image-left"
  
          },
          {
            "type": "range",
            "id": "image_left_width",
            "label": "Image width",
            "min": 50,
            "max": 100,
            "step": 5,
            "default": 100,
            "unit": "vw"
          },
          {
            "type": "image_picker",
            "id": "image-right",
            "label": "Image-right"
          },
          {
            "type": "range",
            "id": "image_right_width",
            "label": "Image width",
            "min": 50,
            "max": 100,
            "step": 5,
            "default": 100,
            "unit": "vw"
          },
          {
            "type": "select",
            "id": "layout",
            "label": "Layout",
            "default": "left",
            "options": [
              {
                "value": "left",
                "label": "Image on left"
              },
              {
                "value": "right",
                "label": "Image on right"
              }
            ]
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Side by Side Engineering "
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "&lt;p&gt;Pair text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.&lt;/p&gt;"
          },
          {
            "type": "select",
            "id": "text_alignment",
            "label": "Text alignment",
            "options": [
              {
                "value": "left",
                "label": "Left"
              },
              {
                "value": "center",
                "label": "Center"
              },
              {
                "value": "right",
                "label": "Right"
              }
            ],
            "default": "left"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          }
        ]
      },
  </code></pre>