Magento – Magento 2.1 override the view.xml file and see changes on site

luma-thememagento-2.1parent-child-theme

I'm pretty new to Magento 2.1 and am trying to figure out how the themes work. I've read through a lot of the documentation, but what I'm having trouble with right now is the view.xml file in my own theme.

I've created a custom theme and installed it in the right location:

/siteroot/app/design/frontend/mybusiness/mytheme

All of that is working, and I was able to enable my theme just fine via the Magento admin. Now, I'm trying to modify my theme. I should probably point out that I'm using the Magento/luma theme as my parent theme and only plan on modifying some of the templates and styles.

I copied the view.xml file from the luma theme (/siteroot/vendor/magento/theme-frontend-luma/etc/view.xml) and pasted it into the following location:

/siteroot/app/design/frontend/mybusiness/mytheme/etc/view.xml

Now I'm trying to make changes to it and see those changes on the site. There's a block of code in it that appears to handle the way the product image gallery handles image transitions:

<var name="fullscreen">
    <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
    <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
    <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview in fullscreen (true/false/null) -->
    <var name="caption">false</var> <!-- Display alt text as image title in fullscreen(true/false) -->
    <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in fullscreen(horizontal/vertical)  -->
    <var name="navarrows">false</var> <!-- Turn on/off on the thumbs navigation sides arrows(true/false) -->
    <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
    <var name="transition">
        <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
        <var name="duration">500</var> <!-- Sets transition duration in ms -->
    </var>
</var>

I changed the transition effect from slide to dissolve, then checked one of the products to see if the effect would show up in the gallery, but it still only shows the slide effect. I've enable developer mode already on the site using the command line function:

>magento deploy:mode:set developer

So, I'm kind of stumped as to the way I should go about creating and testing my customized theme. Any help would be appreciated.

Best Answer

I figured it out. In the Magento 2.1 administration I hadn't selected my new theme for the Global view.

At first, I had gone into Content -> Configuration:

Magento 2.1 -> Admin -> Content -> Configuration

Then, I clicked on the "Edit" link next to my "Website" only view (both the Store and Store View columns were blank) and set the theme to the them I had previously registered and created. I had though that if I set the "Website" to my theme, that the row with the "Store" and "Store View" entries in it would not need to have a theme, since they would fall-back to the website view. This configuration didn't work for me.

Next, I set the theme for the row containing and entry in the "Store View" column. This didn't work either.

Finally, I set the theme for "Global" only and that did it. At this point in time, each row was set to my theme. Afterwards, I was able to modify the /etc/view.xml file in my theme and see results immediately on the front end.

Related Topic