Demii
-
Posts
3 -
Joined
-
Last visited
Reputation Activity
-
Demii got a reaction from DesignerLeo in Floating Categories for shop. Categories stay visible on left of screen when customers are looking through products
Help Needed. Can someone help me with some code to allow the categories to be always visible on the left or the top (depending on option chosen) of the product listings while scrolling through the products. Allowing the categories to be always visible would allow for easier transition between categories and a more fluid feel to searching.
Also subcategories hover dropdown or popup for the categories would help greatly or even some kind of indication that there even is a subcategory because currently there is no visual indication of a subcategory.. Example on my site being, "carvings" category that has 3 subcategories but impossible to tell unless actually clicked on.. no indication beforehand.
Anyone that can help i would gratefully appreciate it.
https://demgems.co.uk/shop
-
Demii got a reaction from CassAggett in Floating Categories for shop. Categories stay visible on left of screen when customers are looking through products
Perfect. Thank you so much ❤️
-
Demii reacted to CassAggett in Floating Categories for shop. Categories stay visible on left of screen when customers are looking through products
Thanks!
Try adding this to your Custom CSS panel - this is just for your desktop when you've got the categories list on the left, as it would be a different code for when it's set to the top:
//stick categories desktop// @media only screen and (min-width: 768px) { .products.collection-content-wrapper .nested-category-tree-wrapper { position: sticky; position: -webkit-sticky; top: 10vh; } } Unfortunately there's no way to have the subcategories expand, but one thing you could consider is adding an arrow or other symbol to the end of the categories names that do have a subcategory? So in the categories section, you could rename it from 'Carvings' to 'Carvings ➤' for example.
For the mobile view, you might also like to use something like the following, which changes the categories from a horizontal scroll (that's not actually obvious you're supposed to scroll) to a vertical list of categories:
//stack categories mobile// @media only screen and (max-width: 767px) { .products.collection-content-wrapper .nested-category-children { flex-direction: column; overflow-x: hidden; } .nested-category-breadcrumb-list-item .breadcrumb-separator { display: none; } } I wouldn't make that one sticky though as it would take up too much screen real estate.
Let me know how you go 😊
-
Demii reacted to CassAggett in Floating Categories for shop. Categories stay visible on left of screen when customers are looking through products
Hey Demi, can you please share your website URL? If it's set to private, make sure you share the access password also. This will help to provide code for you.