Resize product video thumbnail for product quick view

Store Design
1

Hello, I cannot seem to find a way to make the product video thumbnail fit into the product quick-view when customers view our catalog, as seen below. Is there a way to resize the image without effecting the actual video on the product page?

tinytechshop_0-1676698985289.png
tinytechshop_0-1676698985289.png784×1502 169 KB

Alternatively, is there a way to upload a different preview photo without having to add it as the first image of the product page? Thanks for the help everyone!

2

Hello! It sounds like you’re looking to resize the product video thumbnail in your Shopify store’s quick view, without affecting the video on the actual product page. Here are a few possible solutions:

  1. Use CSS to resize the thumbnail: You can add some CSS code to your Shopify theme’s stylesheet to resize the thumbnail. To do this, you’ll need to find the class or ID of the element that contains the thumbnail, and then set the height and/or width to the desired dimensions. This will only affect the thumbnail in the quick view, and not the actual video on the product page.

  2. Upload a different preview photo: You can upload a different preview photo for the quick view without having to add it as the first image of the product page. To do this, you can create a new image file and upload it to the product’s media library in your Shopify admin. Then, you can use some custom code to display this image as the thumbnail in the quick view.

Here’s an example of how you can change the preview photo using code:

  • First, create a new image file and upload it to the product’s media library in your Shopify admin.
  • Next, find the code in your theme’s product.liquid file that displays the thumbnail in the quick view. This will typically be a piece of code that looks something like this:

cssCopy code
<img src="{{ product.featured_image | img_url: 'compact' }}" alt="{{ product.featured_image.alt }}" />

 
  • Replace this code with a custom code that displays the new image file you uploaded as the thumbnail. Here’s an example:

cssCopy code
{% if product.metafields.preview_photo %} <img src="{{ product.metafields.preview_photo | img_url: 'medium' }}" alt="{{ product.title }}" /> {% else %} <img src="{{ product.featured_image | img_url: 'compact' }}" alt="{{ product.featured_image.alt }}" /> {% endif %}

 

In this example, the code checks if there is a “preview_photo” metafield attached to the product. If there is, it displays the image associated with that metafield as the thumbnail. If there isn’t, it displays the default thumbnail image.

I hope this helps! Let me know if you have any more questions.