Move "Sort-by" Button

Alice6
Shopify Partner
22 0 1

Hello!

I would like to move the "Sort-by" button in each collection page from above the line to under the line, as it makes my collection title look a bit odd compared to any other page. (e.g. there is too much empty space between the collection title and the line).

https://www.italianwineconnection.com.au/collections/reds

I located the button string of code in the collection-template.liquid file but I am not too sure about where this should be moved to.

Could someone help please?

Many thanks as usual :)

Alice

0 Likes
Richard_
Shopify Expert
129 0 27

Hi,

Just added the custom CSS code below in style.scss.liquid file

h1.collection_title {display: block;border-bottom:1px solid #d7d4d3;margin-bottom:20px;}
.container div.collection_nav { border: 0; }

 

Richard Nguyen | PageFly CEO
0 Likes
Alice6
Shopify Partner
22 0 1

Thank you @Richard :)

That worked!

However, on any other page, the line is now showing above the title.

How may fix this?

Thanks,

Alice

0 Likes
Richard_
Shopify Expert
129 0 27

Hi Alice,

Adjust the code above like this

.collection h1.collection_title {display: block;border-bottom:1px solid #d7d4d3;margin-bottom:20px;}
.collection .container div.collection_nav { border: 0; }

 

Richard Nguyen | PageFly CEO
Alice6
Shopify Partner
22 0 1

Excellent!

That worked @Richard :)

Thank you,

Alice

0 Likes
CetoBox
New Member
1 0 0

Hello @Richard_ 

I have the opposite problem. My sort by button is below my products. And I can't see any style.scss.liquid file

Any idea how to move this button?

Thank you very much in advance,

Arthur

0 Likes