IF statement for product tags - showing different imagery based on product tag

Store Design
1

Hey all!

We’re having difficulties with an IF statement which is just not functioning. It may be the case we need to include a small element of js however I feel it could work with just a solid IF statement.

GOAL

We have created a grid layout for 4 products in which match the colour of the main product on the product page. We want to dynamically change the imagery & button links based on the product tag. The product tag specifies the colour and material of the product so this would technically offer the correct data.

ATTEMPTS

We have checked the tags for case sensitivity , tried using handles instead of tags and all options end up with the product imagery not being shown.

Below is a snippet of the code that creates the imagery and product info which is the element we are focusing on. The code is from a section which could be transferred to a snippet then included however it includes certain section.settings which need to remain.

Any help is appreciated.

{%- if product.tags contains 'Colour - Black' and 'Leather' -%}
    
      
         
      
    

    
      

        # HEADING
        
          {{ 7999 | money_without_trailing_zeros }}
        

      

      
        
DESCRIPTION

      

      
        
      

    

  {%- endif -%}
  
    {%- if product.tags contains 'Colour - Tan' and 'Leather' -%}
    
      
         
      
    

    
      

        # HEADING
        
          {{ 7999 | money_without_trailing_zeros }}
        

      

      
        
Perfect for Day | Evening

      

      
        
      

    

  {%- endif -%}