Use a different image for mobile vs. desktop

Highlighted
New Member
1 0 1

I would like to know how to modify this section to use a different image for mobile vs desktop. I have given it a try based on some of the discussions but it doesn't seem to be working. Any help would be really helpful. This is part of the Prestige theme by Maestrooo. 

I was able to successfully add the field by adding this code. But I wasn't able to get the image to actually display properly. Any help would be appreciated. 

{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile Image"
}

 

<section class="Section {% unless section.settings.image %}Section--spacingNormal{% endunless %}">
  {%- capture section_content -%}
    <div class="FeatureText__ContentWrapper">
      <div class="FeatureText__Content">
        {%- if section.settings.subheading != blank or section.settings.title != blank -%}
          <header class="SectionHeader">
            {%- if section.settings.subheading != blank -%}
              <h3 class="SectionHeader__SubHeading Heading u-h6">{{ section.settings.subheading | escape }}</h3>
            {%- endif -%}

            {%- if section.settings.title != blank -%}
              <h2 class="SectionHeader__Heading Heading u-h1">{{ section.settings.title | escape }}</h2>
            {%- endif -%}

            {%- if section.settings.content != blank -%}
              <div class="SectionHeader__Description Rte">
                {{ section.settings.content }}
              </div>
            {%- endif -%}

            {%- if section.settings.link_text != blank -%}
              <a href="{{ section.settings.link_url }}" class="Link Link--underline">{{ section.settings.link_text | escape }}</a>
            {%- endif -%}
          </header>
        {%- endif -%}
      </div>
    </div>
  {%- endcapture -%}

  {%- capture section_image -%}
    {%- if section.settings.image != blank -%}
      <div class="FeatureText__ImageWrapper">
        {%- include 'image-size', sizes: '400,600,700,800,900,1000,1200', image: section.settings.image -%}

        <div class="AspectRatio" style="max-width: {{ section.settings.image.width }}px; --aspect-ratio: {{ section.settings.image.aspect_ratio }}">
          {%- assign image_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          <img class="Image--lazyLoad Image--slide{{ section.settings.image_position | capitalize }}" data-src="{{ image_url }}" data-expand="-200" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ section.settings.image.alt | escape }}">

          <noscript>
            <img src="{{ section.settings.image | img_url: '800x' }}" alt="{{ section.settings.image.alt | escape }}">
          </noscript>
        </div>
      </div>
    {%- endif -%}
  {%- endcapture -%}

  <div class="FeatureText {% if section.settings.image != blank %}FeatureText--withImage FeatureText--image{{ section.settings.image_position | capitalize }}{% endif %}">
    {%- if section.settings.image_position == 'left' -%}
      {{- section_image -}}
      {{- section_content -}}
    {%- else -%}
      {{- section_content -}}
      {{- section_image -}}
    {%- endif -%}
  </div>
</section>

{% schema %}
{
  "name": "Rich text with image",
  "class": "shopify-section--bordered",
  "settings": [
    {
      "type": "text",
      "id": "subheading",
      "label": "Sub-heading",
      "default": "Sub-heading"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Title"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image",
      "info": "1200 x 1200px .png recommended"
    },
    {
      "type": "select",
      "id": "image_position",
      "label": "Image position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "right"
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "Text",
      "default": "<p>Add your own custom content to give more information about your store, availability details...</p>"
    },
    {
      "type": "text",
      "id": "link_text",
      "label": "Link text"
    },
    {
      "type": "url",
      "id": "link_url",
      "label": "Link URL"
    }
  ],
  "presets": [
    {
      "category": "Text",
      "name": "Rich text with image",
      "settings": {}
    }
  ]
}
{% endschema %}

 

1 Like
Highlighted
Astronaut
1087 180 213

Hello nevinjethmalani,

Thank you for your question.

It would require Liquid/CSS knowledge to implement this feature, I'm afraid that unfortunately there is no simple copy-paste solution otherwise I'd happily guide you through.

In case you're unfamiliar with these technologies you'll likely want to hire a Shopify developer to assist you.

If it is of your wish, I present myself available to help you. I can get this done quickly for you.
I've been hired by 25+ people from this very forum, you can read their recommendations about my work clicking here.

Thank you!

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Shopify Partner
7687 1058 2673

Hello, @nevinjethmalani 

Welcome to the Shopify community!
and Thanks for your Good question.

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes