Why are my video thumbnails blurry on the Dawn theme?

Store Design
, ,
1

Shopify is automatically adding “_small” to the URL of my video thumbnail causing it to be very blurry:

If copy the URL into your browser you’ll see this issue. If you remove _small from the URL then it’s full size. How do I stop the theme from automatically doing this? We are using the Dawn theme.

2

Hi @kimberlyfarrell ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

https://wavesandwords.org/password

TempPass

Thank you!

4

Hi there, any luck with this?

5

Hi @kimberlyfarrell ,

In Online store, select Themes → More → Edit code

view (61).png
view (61).png1919×878 181 KB

In theme.liquid, add the following code before the tag

<script>
        let videos = document.querySelectorAll('.multicolumn-list__item.grid__item .multicolumn-card.content-container video')
        videos.forEach(item=>{
            let newThumbnail = item.getAttribute('poster'); 
            if (newThumbnail.includes('_small')){ 
                newThumbnail = newThumbnail.replace('_small',''); 
                item.setAttribute('poster', newThumbnail)
            }
        })
</script>

view (62).png
view (62).png1919×874 74.8 KB

Click Save to save changes

view (63).png
view (63).png1919×930 143 KB

Hope it helps @kimberlyfarrell !

6

Thank you so much, that did the trick!