CODEWITHSUNDEEP
shopwareshopware6
Datastorm1989
Datastorm1989

Reputation: 67

Shopware6 - Productdetail Thumbnails - Change size

I would like to change the size of the Thumbnails on the Productdetails-Page. At the moment the Thumbnails are very small. Whats the best way to set the size of to 200px width?

Thank you in advance.

EDIT: I need to change the thumbnails under Main-Image of the product in the product detail page.

Upvotes: 0

Views: 1201

Answers (3)

Cuong Huynh
Cuong Huynh

Reputation: 402

You can do it by customizing template: Resources/views/storefront/element/cms-element-image-gallery.html.twig you can find

{% sw_thumbnails 'gallery-slider-image-thumbnails' with {
     media: image
} %}

extend the block contains that code and add default size you want to it:

{% sw_thumbnails 'gallery-slider-image-thumbnails' with {
     media: image,
     sizes: {
           'default': '200px'
      } 
} %}

How to customize template: https://developer.shopware.com/docs/guides/plugins/plugins/storefront/customize-templates#custom-template-content

Upvotes: 0

tinect
tinect

Reputation: 501

You could use search-function of your IDE with term "product-image-thumbnail".

Then you'll see you have to decorate block component_product_box_image storefront/component/product/card/box-standard.html.twig to set the variable size.

Exampe file at YourPluginFolder/src/Resources/views/storefront/component/product/card/box-standard.html.twig:

{% sw_extends '@Storefront/storefront/component/product/card/box-standard.html.twig' %}

{% block component_product_box_image %}
    {% set sizes = {
        'default': '200px'
    } %}
   {{ parent() }}
{% endblock %}

Upvotes: 0

tinect
tinect

Reputation: 501

You could extend the related twig file and setting explizit sizes. f.e.

{% sw_thumbnails 'product-image-thumbnails' with {
    media: cover,
    sizes: {
        'default': '200px'
    }
} %}

Additionally and depending of your theme and installed plugins you might have to adjust CSS.

Upvotes: 1

Related Questions