Need help with animated images to demonstrate product

Solved
Highlighted
Tourist
11 2 0

Hello!

I've got a store that sells color-changing LED Keychains, and I want to showcase the color-changing aspect of the keychains in a manner just like below on my website:

https://streamable.com/lydn9b

 

To sum up some requirements and facts:

-All of the images are the same size with the object in the exact same position(they're rendered models)

-Can be as low as 500px x 500px

-It's critical that the final result look like one animated picture, with no sliders, buttons, dots, etc.

 

I've tried making gif's, even animated webp's, with no luck. Would streaming the video with no buttons or interface be an option?

I'd also prefer if the background is transparent, which it is with all of the source images I have. I can also make the background of a video simply match my website background, 1D1D1D. Thanks!

0 Likes
Highlighted
Shopify Partner
129 21 36

Hi @MrKlean__

First off, I'd strongly recommend against using GIFs on your product page, they're usually heavier than the alternatives and of lower quality. You can achieve the same effect by uploading a simple .mp4 video directly to your product media. If your theme has the new media enabled then it should autoplay and loop out of the box, as per your requirements.

You can create a simple video slideshow with a variety of apps, just by uploading your images and using a transition effect between them. You can use built-in apps, such as iMovie for Mac, or Windows Movie Maker for PCs, or even any of the many apps you can find on Android and iOS (inShot, Adobe Premiere Rush, etc). All that's left is to export in .mp4; you're looking at a very lightweight file in your situation, shouldn't be more than 2-3 Mbs, according to your specs.

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
0 Likes
Highlighted
Tourist
11 2 0

Hi @pvoulg 

I did find an app that would embed a youtube video in place of an image that looked like an image, no sliders, butons, etc., and it turned out to be really clanky and performed poorly on mobile. 

Do you know of any apps that can simply have a transitioning slideshow with no buttons, etc?

 

0 Likes
Highlighted
Shopify Partner
129 21 36

If you want to add the video in your product page, then there's native support for what you are requesting (as long as the theme you are using has been updated to display the new media formats). You only need to upload the video in the correct format. You can check the documentation about media types here

If, on the other hand, you want that video to be displayed anywhere else, then you'd probably be better off requesting the assistance of a developer, or find a theme that does that natively. Most apps tend to feel clunky (as you mentioned) and simple embeds wouldn't have the functionality you need. On top of that, even more complicated implementations need to be executed with proper care, since there are several things (autoplay on mobile, mute, etc) that if done incorrectly are considered bad practice by Google—which could affect your ranking.

Panos Voulgaris
Creative director / Partner @ MALVI
Founder @ function( )
0 Likes
Highlighted
Tourist
11 2 0

Yeah, I don't think a video is the way to go. The funny part is the exact same effect can be achieved with a mouse hover type effect, where one image fades to another. Ideally, this would happen automatically at every interval or so, do you know of an app that can do this?

 

0 Likes
Highlighted
Tourist
11 2 0

This is an accepted solution.

For anyone coming across this thread, I figured out an exact solution to my problem:

I found that I needed to use some sort of slideshow app, for a few reasons:

-Video took too long to load, on mobile it was clunky

-Video was less quality than images

-Gifs looked terrible and loaded slow

-Slideshow would maintain quality and speed simultaneously, and look and integrate best

 

I came across Master Slider from HulkApps. The app is free and allows you to build a slideshow and remove all controls and introduce autoplay, so I removed arrows, buttons, and set an autoplay of 1 second delay with a fade transition.

 

Installing the slideshow was a different story(you may be able to do it yourself, but you may need a developer, although it's an easy job for a developer to install). HulkApps uses a snippet of html called shortcode. It's basically a little html tag <shortcode> that contains a couple points of information to point the HTML page to load from the HulkApps slider app. Usually, you would just place this on any page, but I wanted this to integrate into my homepage and look just like a smooth transitioning image. I also wanted this to be something I could easily tweak like any other section. To do this, I did the following:

1. Create a copy of the liquid file of the element to put the slider into.

I wanted to do this with an image and text feature, however, I couldn't find any "image-and-text" feature in the website code "sections". I had to load up my website and right click on the element and choose inspect element, to which I found the liquid file in sections was called "featured-row.liquid". Make a copy of this element by pressing add new section and pasting the code into the new liquid file

2. Change necessary parts of the copied liquid file to match your new slider

First off, you'll need to change some elements of the file. Some things I changed were after the {% schema %} tags. 

  • Change the "type": "image_picker" to "type": "shortcode", the "id" to "shortcode", and the label to "Slideshow Shortcode"
  • Further down, change the default text to "Shortcode with text"

The second step is not mandatory, but reduces confusion in the website builder.

You'll then need to change the image tag and all of it's css selectors to a simple liquid line: {{ section.settings.shortcode }}. For reference, when you are in the sections editor of the web builder, you'll see a new section called Slideshow Shortcode, which you can paste the entire shortcode that HulkApps produces. From there, instead of an image, your shortcode will be pasted into the {{ section.settings.shortcode }}.

For some more reference, here's my before and after for the liquid file.

featured-row.liquid before:

 

<div id="section-{{ section.id }}" class="{{ section.settings.section_style }}" data-section-id="{{ section.id }}" data-section-type="featured-row-section">
  <div class="box">
    <div class="wrapper">      
      <div class="grid featured-row">
        <div class="grid__item large--six-twelfths medium--six-twelfths small--one-whole featured-row__item featured-row-{{ section.settings.image_alignement }}">
          {% if section.settings.image != blank %}
            <div class="feature-row__image-wrapper image-wrapper" style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;">
              {% assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
              <img class="feature-row__image image lazyload"
                src="{{ section.settings.image | img_url: 'medium' }}"
                data-src="{{ img_url }}"
                data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                data-aspectratio="{{ section.settings.image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ section.settings.image.alt | escape }}">
            </div>
          {% else %}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
        </div>

        <div class="grid__item large--six-twelfths medium--six-twelfths small--one-whole feature-row__item {{ section.settings.text_alignment }}">
          {% unless section.settings.title == blank %}
            <h2 class="section-header__title">{{ section.settings.title | escape }}</h2>
          {% endunless %}
          {% unless section.settings.text == blank %}
            <div class="rte {% if section.settings.text_size == 'large' %}lead {% endif %}">{{ section.settings.text }}</div>
          {% endunless %}
          {% unless section.settings.button_label == blank %}
            <a href="{{ section.settings.button_link }}" class="btn {{ section.settings.button_style }}">
              {{ section.settings.button_label | escape }}
            </a>
          {% endunless %}
        </div>
      </div>
      
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Image with text",
	"class": "featured-row-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "select",
        "id": "section_style",
        "label": "Section style",
        "default": "",
        "options": [
          {
            "value": "",
            "label": "Default"
          },
		  {
            "value": "bg-section",
            "label": "Add background color"
          },
          {
            "value": "border-section",
            "label": "Add border top"
          }
        ]
      },
	  {
        "type": "select",
        "id": "text_size",
        "label": "Text size",
        "default": "medium",
        "options": [
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ]
      },
      {
        "type": "select",
        "id": "image_alignement",
        "label": "Image alignment",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
	  {
        "type": "select",
        "id": "text_alignment",
        "label": "Text alignment",
        "default": "text-center",
        "options": [
          {
            "value": "",
            "label": "Left"
          },
 		  {
            "value": "text-center",
            "label": "Center"
          },
          {
            "value": "text-right",
            "label": "Right"
          }
        ]
      },	
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Image with text"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Pair large 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.</p>"
      },
	  {
        "type": "select",
        "id": "button_style",
        "label": "Button style",
        "default": "btn--primary",
        "options": [
          {
            "value": "",
			"label": "Default"
          },
          {
            "value": "btn--primary",
            "label": "Full"
          },
		  {
			"value": "btn-outline-primary",
            "label": "Outline"
          }
        ]
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }
    ],
    "presets": [
      {
        "name": "Image with text",
        "category": "Image"
      }
    ]
  }
{% endschema %}

 

 

And here's my new shortcode-with-text.liquid (modded featured-row.liquid)

 

<div id="section-{{ section.id }}" class="{{ section.settings.section_style }}" data-section-id="{{ section.id }}" data-section-type="featured-row-section">
  <div class="box">
    <div class="wrapper">      
      <div class="grid featured-row">
        <div class="grid__item large--six-twelfths medium--six-twelfths small--one-whole featured-row__item featured-row-{{ section.settings.image_alignement }}">
          {% if section.settings.shortcode != blank %}
            {{ section.settings.shortcode }}
          {% else %}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
        </div>

        <div class="grid__item large--six-twelfths medium--six-twelfths small--one-whole feature-row__item {{ section.settings.text_alignment }}">
          {% unless section.settings.title == blank %}
            <h2 class="section-header__title">{{ section.settings.title | escape }}</h2>
          {% endunless %}
          {% unless section.settings.text == blank %}
            <div class="rte {% if section.settings.text_size == 'large' %}lead {% endif %}">{{ section.settings.text }}</div>
          {% endunless %}
          {% unless section.settings.button_label == blank %}
            <a href="{{ section.settings.button_link }}" class="btn {{ section.settings.button_style }}">
              {{ section.settings.button_label | escape }}
            </a>
          {% endunless %}
        </div>
      </div>
      
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Shortcode With Text",
    "settings": [
      {
        "type": "text",
        "id": "shortcode",
        "label": "Slideshow Shortcode"
      },
      {
        "type": "select",
        "id": "section_style",
        "label": "Section style",
        "default": "",
        "options": [
          {
            "value": "",
            "label": "Default"
          },
		  {
            "value": "bg-section",
            "label": "Add background color"
          },
          {
            "value": "border-section",
            "label": "Add border top"
          }
        ]
      },
	  {
        "type": "select",
        "id": "text_size",
        "label": "Text size",
        "default": "medium",
        "options": [
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ]
      },
      {
        "type": "select",
        "id": "image_alignement",
        "label": "Image alignment",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
	  {
        "type": "select",
        "id": "text_alignment",
        "label": "Text alignment",
        "default": "text-center",
        "options": [
          {
            "value": "",
            "label": "Left"
          },
 		  {
            "value": "text-center",
            "label": "Center"
          },
          {
            "value": "text-right",
            "label": "Right"
          }
        ]
      },	
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Shortcode with Text"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Pair large 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.</p>"
      },
	  {
        "type": "select",
        "id": "button_style",
        "label": "Button style",
        "default": "btn--primary",
        "options": [
          {
            "value": "",
			"label": "Default"
          },
          {
            "value": "btn--primary",
            "label": "Full"
          },
		  {
			"value": "btn-outline-primary",
            "label": "Outline"
          }
        ]
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }
    ],
    "presets": [
      {
        "name": "Shortcode With Text",
        "category": "Image"
      }
    ]
  }
{% endschema %}

 

 

3. Test and adjust settings in HulkApps Master Slider

You may notice some sizing and spacing issues on your webpage after you do this. Go into hulkapps and adjust the necessary slider settings, like alignment, etc, to optimize your slider.

 

That's it!

If you know what you're doing and are an intermediate programmer, this should be okay for you to do, but do message or Email me if you have any questions, hunterpruett2003@gmail.com. I'd be glad to help out.

If you have a developer that you'd like to do this, send them this thread, they should be able to pick up what I said, and you'll know if you're getting your money's worth with a dev that way

 

0 Likes