Hi Everyone,
Can you please help me to add some space between the thumbnails and the main picture?
I added the code around this section here
{% if product.media.size > 1 %}
<div data-product-thumbs class="media__thumb__wrapper">
{% for media in product.media %}
{% assign is_artwork = false %}
{% assign image_atl = media.alt | strip_html | escape %}
{% if image_atl contains 'artwork' %}
{% assign is_artwork = true %}
{% endif %}
{% unless is_artwork %}
<div class="media__thumb"
data-slideshow-thumbnail
data-media-select="{{ media.id }}">
<img alt="{{ media.alt | strip_html | escape }}" src="{{ media.preview_image.src | img_url: '200x200', crop: 'center' }}">
{%- if media.media_type == 'model' -%}
{% render 'icon-media-model' %}
{%- elsif media.media_type contains 'video' -%}
{% render 'icon-media-video' %}
{%- endif -%}
</div>
{% else %}
<div class="media__thumb"
style="display: none; visibility: hidden;"
data-slideshow-thumbnail
data-media-select="{{ media.id }}">
<img alt="{{ media.alt | strip_html | escape }}" src="{{ media.preview_image.src | img_url: '200x200', crop: 'center' }}">
{%- if media.media_type == 'model' -%}
{% render 'icon-media-model' %}
{%- elsif media.media_type contains 'video' -%}
{% render 'icon-media-video' %}
{%- endif -%}
</div>
{% endunless %}
{% endfor %}
</div>
<div class="artwork_media_wrapper">
<h3 class="artwork_media_header">Artwork Styles</h3>
<div data-product-thumbs class="media__thumb__wrapper">
{% for media in product.media %}
{% assign is_artwork = false %}
{% assign image_atl = media.alt | strip_html | escape %}
{% if image_atl contains 'artwork' %}
{% assign is_artwork = true %}
{% endif %}
{% if is_artwork %}
<div class="media__thumb" data-slideshow-thumbnail data-media-select="{{ media.id }}">
<img alt="{{ media.alt | strip_html | escape }}" src="{{ media.preview_image.src | img_url: '200x200', crop: 'center' }}">
</div>
{% endif %}
{% endfor %}
</div>
</div>
{%- endif -%}
</div>
