Vertical to Horizontal

Nonchalant868
New Member
11 0 0
#975843

Screenshot 2023-10-05 154321.png 

I am trying to get my Shade filter to go from Vertical to Horizontal. I already have code that hides the names of the colors. (Attached Below)

[for="filter-Shade-1"],
[for="filter-Shade-2"],
[for="filter-Shade-3"] {
color: #fff !important;
}

Can someone please help me?

Replies 6 (6)
makkaomakka
Shopify Partner
925 182 191

Hi @Nonchalant868 ,

 

Can you provide me with the link to your store?

❤️❤️

Buy me a coffee


For quick response - Message Me


Increase Xmas sales with BOGO+ Easy Free Gift Upsell. Get 30% OFF for 3 months with code "BFWIZZ30".

Nonchalant868
New Member
11 0 0
makkaomakka
Shopify Partner
925 182 191

Hi @Nonchalant868 ,

 

Do you mean something like this?

makkaomakka_0-1696736217040.png

 

Or do you want the design to look something like

makkaomakka_0-1696737148250.png

 

❤️❤️

Buy me a coffee


For quick response - Message Me


Increase Xmas sales with BOGO+ Easy Free Gift Upsell. Get 30% OFF for 3 months with code "BFWIZZ30".

Nonchalant868
New Member
11 0 0

I would say option #2 but if you don't mind sharing the code for the first as well, that would be great!

 

makkaomakka
Shopify Partner
925 182 191

Hi @Nonchalant868 ,

 

Please find codes for both options below:

 

Option 1: 

<style>
collection-filters-form .collection-nav:has(#filter-Shade-1){
    display: flex!important;
}
</style>

Option 2:

<style>
collection-filters-form .collection-nav:has(#filter-Shade-1){
    display: flex!important;
}


collection-filters-form .collection-nav:has(#filter-Shade-1) label::after{
    display: none!important;;
    
}
collection-filters-form .collection-nav:has(#filter-Shade-1) label{
    padding-left: 0px!important;
}


collection-filters-form .collection-nav:has(#filter-Shade-1) li.sidebar__item--active label span{
        outline: 1px solid #000!important;
        outline-offset: 2px!important;
}

collection-filters-form .collection-nav:has(#filter-Shade-1) .sidebar__item{
    margin-bottom: 3px!important;
}
</style>

 

Steps to add CSS:

Step 1: Go to Online Store > Themes > Active theme > Edit

makkaomakka_0-1696758478106.png

 

 

 

 

Step 2: Search for "theme.liquid"

makkaomakka_1-1696758478148.png

 

 

 

 

Step 3: Add the CSS above "</head>"

makkaomakka_2-1696758478012.png

 

 

 

 

 

If you require further help to add the code to your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Mangit

❤️❤️

Buy me a coffee


For quick response - Message Me


Increase Xmas sales with BOGO+ Easy Free Gift Upsell. Get 30% OFF for 3 months with code "BFWIZZ30".

makkaomakka
Shopify Partner
925 182 191

Hi @Nonchalant868 , 

 

Seems like you havent added the code to the site yet. If you are having any difficulty adding the code, please let me know.

 

Thank you

❤️❤️

Buy me a coffee


For quick response - Message Me


Increase Xmas sales with BOGO+ Easy Free Gift Upsell. Get 30% OFF for 3 months with code "BFWIZZ30".