Adding Media to Product images in Supply Theme - shopify hosted videos, mpgs or animated gifs

Highlighted
Excursionist
30 0 2

Hi

 

I am having trouble getting media playing as the product image in the supply theme. According to this link... https://help.shopify.com/en/manual/products/product-media/add-media, I can modify my current theme (implying any theme) by following the instructions in this link... https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video#custom-styles-for-your-t...

 

I followed this to a tee. mp4 videos save into the listing and display on the webpage, but are extra large. When I get down to the Tip after step 9 I am directed to the following link to modify some of the earlier created snippet to match the existing style of my image container... https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video#custom-styles-for-your-t.... Within that link, it says to create an aspect ratio box and I'm directed to this link!... https://css-tricks.com/aspect-ratio-boxes/

 

So, for the part of the snippet below, I have tried various css in between div and class such as style="height: 0;" and usually nothing changes. There was something I tried which moved the oversized video down a fair bit on the webpage. I didn't try removing the class.

 

{% when 'video' %}
        <div class="product-single__media" data-media-id="{{ media.id }}">
          {{ media | video_tag: controls: true }}
        </div>

The link prior to the aspect ratio box link says "Shopify-hosted videos are rendered in a HTML5 video player by default. The HTML5 player is responsive and doesn't require any specific customizations." and then it says that an aspect ratio box should be considered. I assume a shopify-hosted video means one uploaded to files through settings? Well, I uploaded a video but then couldn't load it into the product images. The instructions (I assume work for other themes) are to delete the product image then click on edit alt text. Supply theme only gets the edit alt text option when an image is there and you go to the image editor. I tried to upload the shopify-hosted file through "Add image from URL" but it says the mp4 is an unsupported file type. The other thing I have tried is uploaded animated gifs. The only gif that would upload and display is a gif that I found on a shopify web developers site. It must be the encoding or something that makes this particular animated gif work. Please help me to get videos or animated gifs working as the product image in supply theme.

 

Thanks

0 Likes
Highlighted
Excursionist
30 0 2

Nobody?

0 Likes
Highlighted
New Member
6 0 0

We are in the same boat as you. I think the instructions Shopify has written are not generic. They might work on some themes, but on Supply, definitely not. I have spent endless hours but still can't even get the featured image to appear. 

What a badly written instruction page.

0 Likes