Shopify themes, liquid, logos, and UX
I have an option list on products and what I need to do is put it inside a border and limit the height to show maybe the first 4 or 5 options because there are so many options. So it would have to have the scroll bars on the right side like in the bottom picture here. This is the list
and this is where I have to put the CSS in the Dawn theme editor
I need it to look similar to this
but without the grey background.
I can do liquid code but not that familiar with CSS yet so any help appreciated.
Solved! Go to the solution
This is an accepted solution.
Hey @SandrasStitchS1,
I don't know if any custom code was added before, without that information I cannot assist you to restore it. But good news is that I can add on a scrollbar for you using the code below. Please erase what I gave you at first and replace with the following
<style>
.product-customizer-option.option-type-checkbox_group ul {
max-height: 20vh;
overflow: scroll;
border: 1px solid black;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
This is an accepted solution.
I see you changed up the colours. That's Amazing! Good luck with your store 😊
Hey @SandrasStitchS1,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.product-customizer-option.option-type-checkbox_group ul {
max-height: 20vh;
overflow: scroll;
border: 1px solid black;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Have a great day!
I did that, this is what it shows now. No scroll bar but is does scroll
This is an accepted solution.
Hey @SandrasStitchS1,
I don't know if any custom code was added before, without that information I cannot assist you to restore it. But good news is that I can add on a scrollbar for you using the code below. Please erase what I gave you at first and replace with the following
<style>
.product-customizer-option.option-type-checkbox_group ul {
max-height: 20vh;
overflow: scroll;
border: 1px solid black;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
Thank you so much, it looks great now. This is where I am implementing it at
https://sandrasstitchstash.com/products/blackbird-md188-pattern
This is an accepted solution.
I see you changed up the colours. That's Amazing! Good luck with your store 😊
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025