Hi guys
I have the new Prestige Theme and now I have a productpicture with that is only used for the Material swatch but not for the Product page. Is there a possibility to hide these pictures? They all have the alt tag : swatch . But should not be removed from swatch bar.
Thank you in advance for your efforts and your help.
@Panamera can you share the url of the store, and also the password (if any) to check the details?
Hi Manuel,
You can add a condition to your “for” loops to not load any picture with the alt text of “swatch”
Within your liquid files, found in Online Store > Live Theme > Actions > Edit Code, look for a product-template.liquid file, or something similar. In this code you’ll want to look for a div with the classes “Product__SlideItem Product__SlideItem–image Carousel__Cell”.
Within the code for this div, you should see some code like listed below in the example. You’ll want to add the and media.alt != “swatch” exception into your “for” loop. This should stop the store from loading these pictures into the slider as an image.
It’s hard to tell if this will work with certainty without seeing your exact liquid files, so let me know if anything looks differently once you get into your liquid files, but this should be a good place to start.
Hi Hermit thank you for your fast reply. But I can’t render a media.liquid because I don’t have any.
Thank you for your efforts.
Regards.
Hi Manuel,
Could you provide the liquid code or screen shots of your liquid code for your product template page? We’ll need to see how the product photos are generated specifically to your theme.
We’re looking specifically for a
You’ll have to comb through your liquid files related to your product pages and search for “Product__Gallery” to find it. Once you do, if you could provide that code or send a screenshot of that code we should be able to figure out how to hide those swatch photos.
Thanks!
{%- endif -%} {% schema %} { "name": "Product page", "class": "shopify-section--bordered", "blocks": [ { "type": "product_meta", "name": "Product meta", "limit": 1, "settings": [ { "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": true }, { "type": "checkbox", "id": "show_sku", "label": "Show SKU", "default": false }, { "type": "checkbox", "id": "show_product_rating", "label": "Show product rating", "info": "To display a rating, add a product rating app. [Learn more](https://help.shopify.com/en/manual/products/product-reviews/installation)", "default": false }, { "type": "checkbox", "id": "show_taxes_included", "label": "Show price taxes notice", "default": false } ] }, { "type": "variant_selector", "name": "Variant selector", "limit": 1, "settings": [ { "type": "select", "id": "selector_mode", "label": "Selector type", "options": [ { "value": "block", "label": "Block" }, { "value": "dropdown", "label": "Dropdown" } ], "default": "dropdown" }, { "type": "checkbox", "id": "show_color_swatch", "label": "Show color swatch", "default": false, "info": "Some colors appear white? [Learn more](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch)." }, { "type": "checkbox", "id": "show_color_carousel", "label": "Show color carousel", "info": "A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.", "default": false }, { "type": "page", "id": "size_chart", "label": "Size chart", "info": "Show along option named Size." } ] }, { "type": "share_buttons", "name": "Share buttons", "limit": 1 }, { "type": "inventory", "name": "Inventory", "limit": 1, "settings": [ { "type": "range", "id": "inventory_quantity_threshold", "label": "Inventory quantity threshold", "info": "Only show inventory quantity if below threshold. Choose 0 to always show.", "min": 0, "max": 50, "step": 1, "default": 0 } ] }, { "type": "buy_buttons", "name": "Buy buttons", "limit": 1, "settings": [ { "type": "checkbox", "id": "show_price_in_button", "label": "Show price in add to cart button", "default": false }, { "type": "checkbox", "id": "show_payment_button", "label": "Show dynamic checkout button", "info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)", "default": true } ] }, { "type": "description", "name": "Description", "limit": 1 }, { "type": "liquid", "name": "Liquid", "settings": [ { "type": "paragraph", "content": "This Liquid code will show on the right part of the product page." }, { "type": "liquid", "id": "liquid", "label": "Liquid" } ] }, { "type": "quantity_selector", "name": "Quantity selector", "limit": 1, "settings": [ { "type": "checkbox", "id": "show_label", "label": "Show label", "default": false } ] }, { "type": "text", "name": "Text", "settings": [ { "type": "paragraph", "content": "This text will show on the right part of the product page." }, { "type": "text", "id": "text", "label": "Text" } ] }, { "type": "store_pickup", "name": "Local pickup availability", "limit": 1, "settings": [ { "type": "paragraph", "content": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup#show-pickup-availability-to-your-customers)" } ] }, { "type": "@app" }, { "name": "Content", "type": "content", "settings": [ { "type": "paragraph", "content": "This content will show on the left part, below the product images." }, { "type": "text", "id": "title", "label": "Title" }, { "type": "richtext", "id": "content", "label": "Content" }, { "type": "page", "id": "page", "label": "Content from page", "info": "If specified, takes precedence over inline content." } ] }, { "name": "Reviews", "type": "reviews", "limit": 1, "settings": [ { "type": "paragraph", "content": "To show reviews, install [Shopify Product Reviews](https://apps.shopify.com/product-reviews). This content will show on the left part, below the product images. " } ] }, { "name": "Buy it with", "type": "buy_it_with", "limit": 1, "settings": [ { "type": "product", "id": "product", "label": "Product" }, { "type": "text", "id": "title", "label": "Heading", "default": "Buy it with" } ] } ], "settings": [ { "type": "header", "content": "Media" }, { "type": "paragraph", "content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)" }, { "type": "select", "id": "image_size", "label": "Size", "options": [ { "value": "small", "label": "Small" }, { "value": "medium", "label": "Medium" }, { "value": "large", "label": "Large" }, { "value": "fill", "label": "Fill screen" } ], "default": "large" }, { "type": "checkbox", "id": "stack_images", "label": "Stack images on desktop", "default": true }, { "type": "checkbox", "id": "show_thumbnails", "label": "Show thumbnails on desktop", "default": true }, { "type": "checkbox", "id": "enable_image_zoom", "label": "Enable zoom", "default": true }, { "type": "checkbox", "id": "enable_video_looping", "label": "Enable video looping", "default": false } ] } {% endschema %} ```
Ho Hermit
I found the
Thank you in advance.
Greetings
Hi Manuel,
Apologies for missing your previous post with the liquid code. I’m not seeing the swatch images pop up anymore, are you still having the issue?
Hi Hermit,
no problem I am glad that you help me.
The Problem is now on the .JS side.
Whenever Swipe to the last image it shows me nothing. Its only on the mobil version. In the desktop version the swatch is only visible when you zoom in and click until the last image.
I only hide it. Whatever, I tried it with this code with the “Product__Gallery” inside. But didnt work.
{%- assign count = 0 -%}
{%- for image in product.media -%}
{%- unless image.alt contains 'swatch' -%}
{%- assign count = count | plus: 1 -%}
{% capture order_class %} order-{{ count | plus: 1 }}{% endcapture %}
{% capture option_data %}data-variant-display-name="{{ option_value }}"{% endcapture %}
{%- assign product_alt = image.alt | strip -%}
{%- endunless -%}
{%- endfor -%}
Thank you in advance.
Greetings