For HIRE: Nivo Slider Tweaking

New Member
3 0 0

In the theme we are using for our shopify store, it has a Nivo slider that acts as a snippet, and is included using the liquid include function. Basic stuff. Well, we are trying to modify the the code so that if the screen size is less than 480px, it references a different image file. We need to do this because the current full size image file is a 16:9 ratio cut, which scales down too slim on mobile devices. We need the code modified so that the slider references a 4:3 ratio image file on mobile, but references 16:9 image file in all other cases.

See Larger Image Here:

Current Code Snippet that renders the slideshow (widget-homepage-nivoslider.liquid):

{% if settings.slider_toggle %}
  <div class="slider_wrap">
    <div class="nivoSlider">
        {% for i in (1..6) %}
          {% capture slide_toggle %}slide{{ i }}_toggle{% endcapture %}
          {% capture slide_link %}slide{{ i }}_link{% endcapture %}
          {% capture slide_image %}slide{{ i }}_image.jpg{% endcapture %}
          {% if settings[slide_toggle] and settings[slide_toggle] != '' %}
            {% if settings[slide_link] and settings[slide_link] != '' %}
              <a href="{{ settings[slide_link] }}">
            {% endif %}
              <img src="{{ slide_image | asset_url }}" alt="" title="#htmlcaption-{{ i }}" />
              {% if settings[slide_link] and settings[slide_link] != '' %}</a>{% endif %}
            {% endif %}
        {% endfor %}
{% endif %}

We don't want the code changes to be over engineered or to deviate too far from the existing code base, if possible. We're thinking a simple solution as shown below would work, but don't know to get this working in a liquid template, so we need the hired help from an expert developer.

Shopify Partner
1174 34 230

Hi, this issue can be solved using CSS.

inbox me  

Available for hiring. Reach me at
Shopify Partner
34 0 0

Forget nivo slider and use nitro slider app, this app extend full power of revolution slider and you can use every where :

Shopify customization - Shopify theme development - Visit
Shopify Partner
31 0 0

Hey there,

This is usually solved by setting the focus on a proper element, which will automatically scale and position your image accordingly. There's a good library for that:

This will prevent the image from looking bad considering any ratio, not just the width. 




Andu from Widgetic