Creating a border using CSS in Dawn Theme

Store Design
,
1

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

border.jpg
border.jpg1083×729 88.1 KB

and this is where I have to put the CSS in the Dawn theme editor

border2.jpg
border2.jpg1917×886 185 KB

I need it to look similar to this

select.jpg
select.jpg404×127 10.9 KB

but without the grey background.

I can do liquid code but not that familiar with CSS yet so any help appreciated.

2

Hey @SandrasStitchS1 ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706291589136.jpeg
ThePrimeWeb_0-1706291589136.jpeg1253×933 87.9 KB

Have a great day!

3

I did that, this is what it shows now. No scroll bar but is does scroll

border3.jpg
border3.jpg921×591 43.7 KB

4

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
5

Thank you so much, it looks great now. This is where I am implementing it at

https://sandrasstitchstash.com/products/blackbird-md188-pattern

6

I see you changed up the colours. That’s Amazing! Good luck with your store :blush: