Changing Testimonial Section Background on Mobile only

Store Design
1

Good day everyone, I hope everyone’s day is going well

I am trying to add a separate background to my testimonial section on mobile because it looks cut. But i can’t seem to figure out how to do it with code.

I already added the file to my assets on the store:

File name: assets/Testemonial Back Mobile.jpg
File URL:
login (2.3 KB)
https://little-wonders-curacao.myshopify.com/admin/themes/134077612256?key=assets/Testemonial%20Back%20Mobile.jpg

Here is how to section looks on Descktop:

e4bdb4c9-e05d-462b-ae3f-ebb0f9e4ef32.png
e4bdb4c9-e05d-462b-ae3f-ebb0f9e4ef32.png1701×1157 144 KB

This is what it looks like on mobile:

05e5b225-6e7e-493c-a057-ba3bc04301cd.png
05e5b225-6e7e-493c-a057-ba3bc04301cd.png479×500 43.1 KB

As you can see it’s cut on mobile

Store URL: https://little-wonders-curacao.myshopify.com/
Password: jumana

Any help would be appreciated, thanks in advance!

2

Hi @NZA ,

Please send me the code of testimonial.liquid file, I will help you add options for it

1 Like
3

Hello, @LitCommerce Thank you for the reply,

Wouldn’t it be easier if i just gave you access to the store?
Please share your email so i can add you.

But anyway here is the code for the testimonial section:

{% comment %}
** Testimonial - homepage partial **
- Draggable section
- Uses blocks
{% endcomment %}

{% if section.settings.wide_display == false %}

  

{% endif %}

{% if section.blocks.size > 0 %}
  

    {% for block in section.blocks %}
        

            {% assign image = block.settings.image %}
            {% if image != nil %}
                {% include 'image-element', image: image, alt: image.alt, stretch_width: true, additional_classes: 'testimonial-image' %}
              {% if block.settings.darken_bg %}

{% endif %}
            {% endif %}
            
                

                  {% if block.settings.title != blank %}
                    

                      {{ block.settings.title }}
                    

                    

                  {% endif %}
                  
                    {{ block.settings.testimonial }}
                    

                      {% if block.settings.name != blank %}
                        {{ block.settings.name }}

                      {% endif %}

                      {% if block.settings.store_name != blank %}
                        {% if block.settings.link != blank %}{% endif %}
                          **{{ block.settings.store_name }}**
                        {% if block.settings.link != blank %}{% endif %}
                      {% endif %}
                    

                  

                

              

        

    {% endfor %}
  

{% endif %}

{% if section.settings.wide_display == false %}
  

{% endif %}

{% schema %}

{
  "name": "Testimonials",
  "class": "testimonial-section",
  "settings": [
    {
      "type": "checkbox",
      "id": "wide_display",
      "label": "Wide display",
      "default": true
    },
    {
      "type": "select",
      "id": "testimonial_text_animation",
      "label": "Text animation",
      "options": [
        {
          "value": "",
          "label": "None"
        },
        {
          "value": "fadeIn",
          "label": "Fade In"
        },
        {
          "value": "fadeInUp",
          "label": "Fade Up"
        },
        {
          "value": "fadeInDown",
          "label": "Fade Down"
        }
      ],
      "default": "fadeInDown"
    },
    {
      "type": "range",
      "id": "testimonial_speed",
      "label": "Change testimonials every",
      "min": 0,
      "max": 12,
      "step": 1,
      "default": 6,
      "unit": "sec"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Customer Testimonial"
        },
        {
          "type": "richtext",
          "id": "testimonial",
          "label": "Testimonial",
          "default": "

Include some of your favorite customer quotes and feedback here as social proof, to build credibility and trust for your services and products.

"
        },
        {
          "type": "text",
          "id": "name",
          "label": "Customer name"
        },
        {
          "type": "text",
          "id": "store_name",
          "label": "Store name"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Store link"
        },
        {
          "type": "select",
          "id": "text_position",
          "label": "Text position",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "text_align",
          "label": "Text alignment",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
        {
          "type": "header",
          "content": "Background image"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "1600 x 1000px recommended"
        },
        {
          "type": "checkbox",
          "id": "darken_bg",
          "label": "Darken background image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Testimonials",
      "category": "Text",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}

{% endschema %}
4

Hi @NZA ,

Please change all code:

{% comment %}
** Testimonial - homepage partial **
- Draggable section
- Uses blocks
{% endcomment %}

{% if section.settings.wide_display == false %}

  

{% endif %}

{% if section.blocks.size > 0 %}
  

    {% for block in section.blocks %}
        

            {% assign image = block.settings.image %}
            {% assign image_mobile = block.settings.image_mobile %}
            

              {% if image != nil %}
                  {% include 'image-element', image: image, alt: image.alt, stretch_width: true, additional_classes: 'testimonial-image' %}
                {% if block.settings.darken_bg %}

{% endif %}
              {% endif %}
            

            {% if image_mobile != nil %}
            
              {% include 'image-element', image: image_mobile, alt: image_mobile.alt, stretch_width: true, additional_classes: 'testimonial-image' %}
              {% if block.settings.darken_bg %}

{% endif %}
            

            {% endif %}
            
                

                  {% if block.settings.title != blank %}
                    

                      {{ block.settings.title }}
                    

                    

                  {% endif %}
                  
                    {{ block.settings.testimonial }}
                    

                      {% if block.settings.name != blank %}
                        {{ block.settings.name }}

                      {% endif %}

                      {% if block.settings.store_name != blank %}
                        {% if block.settings.link != blank %}{% endif %}
                          **{{ block.settings.store_name }}**
                        {% if block.settings.link != blank %}{% endif %}
                      {% endif %}
                    

                  

                

              

        

    {% endfor %}
  

{% endif %}

{% if section.settings.wide_display == false %}
  

{% endif %}

{% schema %}

{
  "name": "Testimonials",
  "class": "testimonial-section",
  "settings": [
    {
      "type": "checkbox",
      "id": "wide_display",
      "label": "Wide display",
      "default": true
    },
    {
      "type": "select",
      "id": "testimonial_text_animation",
      "label": "Text animation",
      "options": [
        {
          "value": "",
          "label": "None"
        },
        {
          "value": "fadeIn",
          "label": "Fade In"
        },
        {
          "value": "fadeInUp",
          "label": "Fade Up"
        },
        {
          "value": "fadeInDown",
          "label": "Fade Down"
        }
      ],
      "default": "fadeInDown"
    },
    {
      "type": "range",
      "id": "testimonial_speed",
      "label": "Change testimonials every",
      "min": 0,
      "max": 12,
      "step": 1,
      "default": 6,
      "unit": "sec"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Customer Testimonial"
        },
        {
          "type": "richtext",
          "id": "testimonial",
          "label": "Testimonial",
          "default": "

Include some of your favorite customer quotes and feedback here as social proof, to build credibility and trust for your services and products.

"
        },
        {
          "type": "text",
          "id": "name",
          "label": "Customer name"
        },
        {
          "type": "text",
          "id": "store_name",
          "label": "Store name"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Store link"
        },
        {
          "type": "select",
          "id": "text_position",
          "label": "Text position",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "text_align",
          "label": "Text alignment",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
        {
          "type": "header",
          "content": "Background image"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "1600 x 1000px recommended"
        },
        {
          "type": "image_picker",
          "id": "image_mobile",
          "label": "Image mobile",
          "info": "1600 x 1000px recommended"
        },
        {
          "type": "checkbox",
          "id": "darken_bg",
          "label": "Darken background image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Testimonials",
      "category": "Text",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}

{% endschema %}

I added ‘Image mobile’ option, you just need to upload the image, it will display fine