I am using a custom theme built off of Amasty's Jet Theme. I am trying to use the grouped product type to sell parts from a schematics image. The idea is to have the schematic full width across the top of the product page, with all of the grouped items listed below. I was able to get the grouped items moved by extending the catalog_product_view_type_grouped.xml layout and moving them with

<move element="amtheme.short.info" destination="columns" before="amtheme.product.wrap"/>
<move element="amtheme.product.wrap" destination="columns" before="-"/>
<move element="amtheme.product.info" destination="columns" after="amtheme.product.wrap"/>

However, I can't figure out how to override the fotorama gallery. I tried messing with some settings in the view.xml file but I want this change for grouped products only. Is there any way this can be done?

1 Answer 1


Yes, you can change gallery settings only for grouped products and you can add CSS class so that you can write styles only for those products.

Step 1.

Open view.xml from your design, e.g. app/design/frontend/{Vendor}/{theme}/etc/view.xml

Step 2.

Add your custom vars to gallery

<var name="gallery">
    <var name="grouped_products">
        <var name="some">
            <var name="setting">value</var> <!-- Your custom data -->

Step 3.

Copy from vendor/magento/module-catalog/view/templates/product/view/gallery.phtml and paste to app/design/frontend/{Vendor}/{theme}/Magento_Catalog/templates/product/view/gallery.phtml, but do not replace the file if it exists.

Step 4.

Open gallery.phtml from step 3 and add new var: $productType = $block->getProduct()->getTypeId();


<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">

Change to:

<div class="<?= $productType ?> gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">

The var $productType always returns a string such as 'grouped', 'configurable', so you can write styles only for a particular product type.

Step. 5

Use your custom vars for fotorama settings. In gallery.phtml you can see lot of configuration for fotorama gallery. You can change the options or add own vars based on product type like this:

<script type="text/x-magento-init">
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
            "magnifierOpts": <?= /* @noEscape */ $block->getMagnifier() ?>,
            "data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
            "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
            "breakpoints": <?= /* @noEscape */ $block->getBreakpoints() ?>,
             <?php if ($productType === 'grouped') : ?>
                "fullscreen": {
                   "test": "<?= /* @noEscape */ $block->getVar("gallery/grouped_products/some/setting/value") ?>"
             <?php else: ?>
                "fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
             <?php endif; ?>


Mark my answer if I helped.

  • Would you mind expanding on step 2? I do not really understand the structure of the view.xml file and I do not know what to put in for the values.
    – matthh
    Sep 21 at 20:19
  • You said you tried to change the fotorama settings in view.xml, but you didn't say which ones exactly, so I wrote you how to add your own settings and use them only for grouped products in template. Maybe you don't need to change these settings in view.xml and just write your own styles for the gallery? If so, just follow steps 3 and 4 and then write your own styles, for example .gallery-placeholder.grouped .fotorama-item { max-width: 800px; margin: 0 auto; }
    – GieDe
    Sep 21 at 21:55
  • Thank you so much, this has been very helpful.
    – matthh
    Sep 22 at 13:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.