Prestige theme question for moving the collection info to the left above filter

Store Design
, , ,
1

Hi, i want to move the collection info to be moved to above the filters on the left so it doesnt hog a big chunk of screen real estate. Currently its sitting on the middle, hogging 1 full row. can someone give me the code for this please to fix this problem please, i am not too savy with css, thank you.

2

Hi Eden,

Can you please share link to the collection page with the Collection Info activated on it? Also, could you show me via screenshot annotation of what you wish to accomplish?

3

I sent a pm for the information.

4

Hello Eden,

This code will decrease the white space above and below the collection title and make it left aligned. The code applies this on the tablet and desktop version only.

@media screen and (min-width: 641px) {
  .template-collection .PageHeader {
    margin: 35px 0;
  }

  .template-collection .CollectionInner {
    margin-top: 0;
  }

  .template-collection .SectionHeader__Heading {
    text-align: left;
  }
}
5

where do i put this code?

6

Same as the last solution:

  1. Go to Online Store > Themes > click “Edit code” for the main theme.

  2. Search for theme.scss, and open a file named theme.scss.css.

  3. At the end of the file, put the above code

  4. Save and check your store.

7

Thank you, so final thing, how can i decrease the white space at the top more?

8

Decrease the 35px in following part of the code and it’ll decrease the top and bottom spacing. I set it to 25px which is 10px less than the last version I provided.

.template-collection .PageHeader {
    margin: 25px 0;
}
9

Theres a small issue, the code works to bring up the collection, but its also bringing up the product info on the side, how can i work arund this

10

Theres a small issue, the code works to bring up the collection, but its also bringing up the product info on the side, how can i work around this, is there a code i can use to only bring up the margin of the collection images no the menu

11

I’d recommend to leave the left sidebar as is since the right column has that sort dropdown element to match with the left sidebar. But if you still want to accomplish what you want, here’s the code for it.

@media screen and (min-width: 641px) {
  .template-collection .ProductListWrapper .gf-tree {
    padding-top: 50px;
  }
}
12

where do i add this code? adding it at the bottom broke my page

13

where do i add this code? adding it at the bottom broke my page

14

i think u misunderstood, so i was asking if there is a way i can move the product word to the left , and also add a secondary code for the product images to go up more

15

To align the collection title with the filters area on larger screens. Add the following code to the end of the theme.css file (the one you have been editing previously).

@media screen and (min-width: 1240px) {
  .template-collection .Container {
    padding: 0 50px;
  }
}
16

ok but do u want me to add the code u gave me before also?

17

Eden, each code snippet does a different job. Pleas refer to each message and see if you need to accomplish the thing I have mentioned with the code. If you need it, put it in the file otherwise leave it out.

18

so the first code u gave me is fine, it moved the collection title to the left but i want to remove more white space ( sent a reference image to u in personal messsage ). The second code u gave me doesnt seem to do anything

19

This code snippet will make the collection title move even more to the left to be aligned with the left sidebar.

20

Hi @eden73 ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

.template-collection .PageHeader {
      margin-bottom: 15px !important;
}

You can also change the px to your liking