Main product variant media image

kingf
Not applicable
1 0 0

hello, is it possible that the main product variant media image will hide in product page and it will show only in collection page? Thank you

 

productvariantimage.png

Reply 1 (1)

BSS-Commerce
Shopify Expert
3398 450 503

Hi @kingf ,

In Shopify, the visibility of product variant media images is generally controlled by the theme you're using. However, there are ways to customize the display of images based on your needs.

If you want the main product variant media image to be hidden on the product page but displayed on the collection page, you may need to adjust your theme or use custom code.

Here's a general guide on how you might approach this you can find a supporter or hire a developer, share access to the store to check more carefully and edit the liquid file accordingly. 

Using Theme Settings:

1. Check Theme Settings: Some Shopify themes allow you to control the visibility of certain elements through the theme settings. Explore the theme customization options in your Shopify admin under Online Store > Themes > Customize.

Using Custom Code:

2. Access Theme Code: Go to Online Store > Themes > Actions > Edit Code.

Be cautious when editing code, and always make a backup before making changes.

Find Product Template: Locate the template file responsible for displaying product pages. It's often named product.liquid or something similar.

Adjust Code: Inside the product template file, look for the code that displays the variant images. You may need to modify the Liquid code to display the images based on the page type conditionally.

Example: 

{% if template == 'product' %}
   <!-- Code to display variant images on product page -->
{% endif %}
{% if template == 'collection' %}
   <!-- Code to display variant images on collection page -->
{% endif %}

3. CSS Styling: You might need to use CSS to hide or show elements based on the page type.

For example, you could set the display property to 'none' for the main product variant image on the product page.

Example:

body.template-product .main-variant-image {
   display: none;
}
body.template-collection .main-variant-image {
   display: block;
}

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development