Move Collection Description from Top of Page to Bottom

Store Design
, ,
1

Hi - I am trying to workout how to move the Collection Description from the Top of the page to the bottom.

The theme that we are using is Warehouse.

Any support would be appreciated

Thanks

1 Like
2

Hello @Robert_Richter
PLease provide the URL of your website.

3

Hi @Robert_Richter

Please share your store URL and password.
So that I will check and let you know the exact solution here.

4

here is a sample page:

https://collectiblemadness.com.au/collections/pokemon-trading-card-game

5

Hi @Robert_Richter ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.template-collection .collection .card {
    display: flex;
    flex-direction: column-reverse;
}
6

You want some thing like this.

xc.png
xc.png1262×830 68.1 KB

7

Hi @Robert_Richter ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

.collection__toolbar.collection__toolbar--bordered {
    margin-top: 0;
}
.card:has(.card__header ~ .collection__dynamic-part) {
    display: flex;
    flex-direction: column-reverse;
}

Here is result:

BSSCommerceB2B_1-1718870028655.png
BSSCommerceB2B_1-1718870028655.png1219×689 627 KB

BSSCommerceB2B_2-1718870034147.png
BSSCommerceB2B_2-1718870034147.png1132×728 49.5 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
8

This is excellent, anyway to keep the Collection Page Name at the top ?

https://collectiblemadness.com.au/collections/pokemon-trading-card-game

1 Like
9

Yes this is great, just wondering if it is possible to Keep the COllection Page Name at the top ?

10

Hi @Robert_Richter ,

If you want to keep the collection name on top, it will need to change the code, can I send you a collaborator invite?

11

yes please do

1 Like
12

You can try this code

.card:has(.card__header~.collection__dynamic-part) .card__header {
    position: unset !important;
}
.collection__meta:has(.collection__title) {
    position: absolute;
    top: 10px;
}
.card:has(.card__header~.collection__dynamic-part) {
    display: flex;
    flex-direction: column-reverse;
    padding-top: 72px;
    position: relative;
}

here is result

BSSCommerceB2B_0-1718875303000.png
BSSCommerceB2B_0-1718875303000.png1097×708 614 KB

1 Like
13

Hi @Robert_Richter ,

Please send me the site link and collaborator code, I will send you the collaborator request and change it.

14

Thank you so very much !!