Product Page Updates - Small pictures preview

Product Page Updates - Small pictures preview

Num_Org25
New Member
4 0 2

Hello!

 

I need help with making updates to the mobile version of my website (www.n-umorigins.co)- using the Atlantic theme

 

Problem Statement: Whenever looking at the products page on mobile, there are small previews of additional pictures at the bottom, which in turn pushes down critical information like price/ratings etc ect. I would like for the mobile version to show one image for the product, with an option to slide thru other pictures AND the desktop version to remain as is. 

 

Initial Solution. I updated my Product Gallery Snippet with the below code and now I can no longer see the additional previews (yay), BUT there is no option to swipe thru other pictures AND the website version is also now messed up. On the website, I can see the previews, but can't click on it. Any help would be much appreciated. 

 

{% if product.media.size > 1 %}
<div class="hide-mobile-thumbs">
<div
class="product-gallery--navigation"
data-product-gallery-navigation
>
{% for media in product.media %}
<button
class="
product-gallery--media-thumbnail
product-gallery--{{ media.media_type }}-thumbnail
"
type="button"
tab-index="0"
aria-label="{{ media.alt }} {{ 'general.accessibility.nav_product_thumbnail' | t }}"
data-product-gallery-thumbnail="{{ forloop.index0 }}"
data-product-gallery-selected="{%- if selected_media.id == media.id -%}true{%- else -%}false{%- endif -%}"
data-media="{{ media.id }}"
data-media-type="{{ media.media_type }}"
>
{%
render 'rimg'
img: media.preview_image,
size: '100x100',
%}

{% case media.media_type %}
{% when 'model' %}
{% render 'icon' with 'model-thumb' %}
{% when 'video' %}
{% render 'icon' with 'play-thumb' %}
{% when 'external_video' %}
{% render 'icon' with 'play-thumb' %}
{% endcase %}
</button>
{% endfor %}
</div>
{% endif %}

Reply 1 (1)

Shadab_dev
Shopify Partner
1313 66 148

Does you theme not provide an option from the customizer to not show thumbnails on mobile? Asking since this is a feature on free themes by Shopify, i know you are using a paid theme but atlantic is still i believe a Shopify theme, isn't it??

Buy me Coffee, if you feel i was helpful. Email Me here or WhatsApp me with this link for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.