Product Variant thumbnail has empty space

Product Variant thumbnail has empty space


If your product thumbnail has empty space, like the one above and you don't want to change the image dimensions, you can choose to apply a fix for this 
In swatch.liquid file 
change background-size:contain; in the following code to background-size: cover;

{% if section.settings.variant_swatch_image == 'variant_product' %}background-image:url({{ variant.image | img_url: '120x120' }});background-size:contain; background-repeat:no-repeat;background-position: center;
                        {% endif %}

    • Related Articles

    • Variant Save Price and Percentage not changing on Product Page

      This issue can be fixed by changing code from in product-template.liquid change this: <span class="save-price">SAVE {{ saved_amount }}</span> to : <span id="save_price" class="save-price">SAVE {{ saved_amount }}</span> and adding the following code ...

    • How to hide tabs for a certain product?

      You can hide tabs from certain products. eg an electronic product will not have a size chart. So for this scenario you can add the following tags to your product to hide the corresponding tab no-shipping no-returns no-sizechart As the name suggests ...

    • I want to disable the countdown timer on a specific product. Can I do it?

      You can disable the timer now on any product by adding the " no-timer " tag to it. You can refer the screenshot as well.

    • How to change the 'Save Tag' on the product page from USD to %?

      If you are on the 1.3 version you will need to do this manually. {% assign wc_sale_type = 'money' %}  - for amounts {% assign wc_sale_type = 'percentage' %}  - for % sign We need to make change to product-card-grid.liquid and product-template.liquid ...

    • How to insert video in product description?

      Use the following code to embed the video in description. Just change the video url. This should work just fine. <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;"><iframe ...