Replicate ASOS homepage category selection

GreatCircleUSA
Tourist
4 0 1

I would like to do something simila to what asos.com is doing where on the homepage it presents a screen that presents 2 choices "shop men" "shop women" 

 

GreatCircleUSA_0-1713545103088.png

 

 

once you select one it takes you to a separate "homepage" type landing experience that caters to each audience. It also remembers your choice. Because if you try and reenter ASOS.com it automatically routes you to your preferred choice you had made originally. if you chose men then in the future ASOS.com automatically routes you to ASOS.com/men and the same goes for women

 

asos.com/men

GreatCircleUSA_1-1713545140048.png

 

asos.com/women

GreatCircleUSA_2-1713545184463.png

 


I know they are doing something with subdirectories but as to how they are executing this is above my knowledge level. Is this possible to do on shopify?

We dont sell fashion but our brand does have 2 distinct categories that would be more optimally organized if they were separated out like this. 

 

Any advice / help is welcomed and appreciated. 

Reply 1 (1)

tim
Shopify Expert
3457 278 1283

Yes, possible.

You can definitely create 2 Pages to be landing pages for Mens and Womens and design your homepage with buttons redirecting to these pages.

On each of these pages you'd need to have some JS to save this selection to a cookie or LocalStorage, like:

<script> 
 localStorage.setItem('area','mens');
</script>

 

and on homepage you'd need to have another piece of JS to check the cookie or LocalStorage and redirect to relevant landing if it's set:

<script>
 if (localStorage.getItem('area') === 'mens') location.replace('/pages/mens-landing');
 if (localStorage.getItem('area') === 'womens') location.replace('/pages/womens-landing');
</script>

This can even be done without theme modification (depending on your theme, by using "Custom liquid" section/blocks).

 

However, you'd most probably need to modify your theme to show different menu while you're on mens or womens collection/product pages.

Or, the easy way would be to create menu to include both "Mens Shoes"/"Womens Shoes", "Mens Shirts"/"Womens Shirts" and then use some JS to simply hide non-relevant menu items based on the store selection...

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com