Solved

Creating a border using CSS in Dawn Theme

SandrasStitchS1
Excursionist
14 2 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

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

border2.jpg

I need it to look similar to this

select.jpg

but without the grey background.

 

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

Accepted Solutions (2)
ThePrimeWeb
Shopify Partner
2116 605 470

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>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb
Shopify Partner
2116 605 470

This is an accepted solution.

I see you changed up the colours. That's Amazing! Good luck with your store 😊

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
2116 605 470

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.

ThePrimeWeb_0-1706291589136.jpeg

 

Have a great day!

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
SandrasStitchS1
Excursionist
14 2 1

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

 

border3.jpg

ThePrimeWeb
Shopify Partner
2116 605 470

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>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
SandrasStitchS1
Excursionist
14 2 1

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

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

 

ThePrimeWeb
Shopify Partner
2116 605 470

This is an accepted solution.

I see you changed up the colours. That's Amazing! Good luck with your store 😊

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!