Lorenza Theme - Media Grouping

[figandsage]

I have been working on my rebranding of my website for a few months. After going to and fro with the support from Lorenza's for a month. I found out that they have actually put the wrong demo website example on their theme page and I was mislead that Lorenza have media grouping. By then it was too late as I have completed almost 80% of the theme adjustment and our website is due to launch in a few days time. 

Does anyone know the coding edit for adding Media Grouping to the product option? 

I would like our pictures to be grouped by the colour swatch choices. 

[figandsage]

I saw this youtube video that allows for media grouping via alt text for media grouping. 

https://www.youtube.com/watch?v=L83SG32LWHc

However, my theme code looks different, and was wondering if anyone could advise? 

Below is my theme code : 

<div class="product__media">
{% if product.media.size > 0 %}
{%- for media in product.media -%}
<div
class="
media-wrapper
{% if media.id == featured_media.id %}is-initial-select{% endif %}
{% if show_thumbnails and media.id != featured_media.id %}hidden{% endif %}
"
data-media-id="{{ media.id }}"
data-product-media-wrapper
>
{% render 'media',
media: media,
featured_media: featured_media,
link: product.url,
loop_video: enable_video_looping,
animate: true
%}
</div>
{%- endfor -%}
{% else %}
<div class="product__image">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
</div>