How to code images for unisex hoodies based on customer selection?

Store Design
, , ,
1

Hi guys, i’m after some help with coding in some liquid.

I need to code in on a unisex hoodie that;

If the customer has clicked on menswear> Hoodies then it will only show images 1,2,5,6

If the customer has clicked on womenswear> Hoodies then it will only show images 2,4,7,8

Thanks in advance

materialclothing.co.uk

dahbre

2

Hello,

You may try below code.

Online store > Edit theme > Section

Add below code into

  • having class ‘grid__item’

    shraddha_patel_0-1678449673934.png
    shraddha_patel_0-1678449673934.png1885×815 82.4 KB

    {% if canonical_url contains 'womens-hoodies-sweaters' %}{% unless forloop.index == 2 or forloop.index == 4 or forloop.index == 7 or forloop.index == 8 %}style="display; none;"{% endunless %}{% endif %} {% if canonical_url contains 'mens-hoodies-sweaters' %}{% unless forloop.index == 1 or forloop.index == 2 or forloop.index == 5 or forloop.index == 6 %}style="display; none;"{% endunless %}{% endif %}
    • 3

    Hi Shraddha,

    Thanks for the reply. This hasn’t worked, i have attached a screen shot just in case its an error on my part.

    ryanmaterial_0-1678452005522.png
    ryanmaterial_0-1678452005522.png3316×1576 721 KB

    Ryan

    4

    Please replace it with below css. Position is perfect.

    {% if canonical_url contains 'womens-hoodies-sweaters' %}{% unless forloop.index == 2 or forloop.index == 4 or forloop.index == 7 or forloop.index == 8 %}style="display: none;"{% endunless %}{% endif %} {% if canonical_url contains 'mens-hoodies-sweaters' %}{% unless forloop.index == 1 or forloop.index == 2 or forloop.index == 5 or forloop.index == 6 %}style="display: none;"{% endunless %}{% endif %}
    5

    This css has caused most of the products to disappear on the hoodies + sweater page

    6

    Should this code not go into the main product liquid instead of the collection?

    7

    Yes .. You need to change the condition as I am not really sure about your collection which you are referring as menswear> Hoodies and womenswear> Hoodies ..

    I have checked the collection from menu which redirected to those 2 collections. Send me exact page url if possible so I can help you with it may be ..

    8

    https://materialclothing.co.uk/products/unisex-pullover-hoodie-admiral

    So if you went onto this page, you would have come through menswear on the burger menu then onto hoodies and sweaters. This needs to remain normal, the code needs to be if a customer clicks on any “unisex hoodie” only show images 1,2,5,6

    Then the opposite if they have gone through the womenswear route.

    Basically the aim of the game is to allow us to stock one product “unisex pullover hoodie” but only show women’s pics when on the women’s page and only mens pics when on the mens page.

    Sorry if i’ve confused the situation.

    Ryan.

    9

    Ohh, That’s clear now..

    But to achieve this we need to change code and adjust things to meet the requirements.

    Sorry couldn’t help it hear with this without the files and code access.

    10

    Happy to send these over privately to you if you can help

    Ryan

    11

    Hi @ryanmaterial ,

    Your requirement is a bit more complex, as to achieve this.

    You have to store user action like men or women.

    Which should be accessible at main-product.liquid

    Then write the script which will hide and show your image based on users action.

    Hope it helps…

    12

    Hi @gr_trading is this something you can help me with?

    I can’t get my head around coding! I just need too code in that if a customer has gone through the route of menswear when they get to the unisex product only show images…

    Ryan.