Move Collection Name Above Image

Store Design

Topic summary

A user needed help repositioning the collection title above the image (instead of below) on their Shopify store using the Studio theme. An initial CSS solution successfully moved the title but inadvertently made the collection images unclickable.

Solution provided:
Custom CSS code targeting .card--standard elements was refined to:

  • Position the title absolutely at the top
  • Add margin to the card inner element
  • Ensure full width/height coverage to restore clickability

The code is added to the themeā€™s base.css file through the ā€˜Edit Codeā€™ option.

Current status:
The original issue was resolved. However, a new participant reported that the same code affected their entire shop when they only wanted it applied to product pages, indicating the solution may need page-specific targeting for some use cases.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I am hoping someone can help me with moving the collection title above the image in the Studio theme.

Currently it is below the image - https://designsugarplr.store/collections

I have tried the code suggested in previous threads but it is just not working for me.

Thank you so much!

2

Hi!

Code that usually works for someone else may not work for you. Custom coding is required for each website.

Terence..

The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, Iā€™ll help.

Navigate to the ā€˜Edit Codeā€™ option in your theme settings, then search for ā€œbase.cssā€ in the search bar and add below codes.

.card--standard>.card__content {
    position: absolute!important;
    top: 0;
}
.card--standard .card__inner {
    margin-top: 50px!important;
}

shopify.base.css.jpg
shopify.base.css.jpg1878Ɨ902 166 KB

1 Like
3

Hi Terence,

Youā€™re amazing. Thank you so much for your help!! :hugs:

4

Sorry to be a pain. The code works perfectly for moving the text above the image - but now the image is no longer clickable. Is there a work-around for this by any chance? :crossed_fingers:

Thanks so much!

5

Hi again.

I believe thereā€™s a solution for everything :blush:

Just delete the previously sent codes and upload the ones below.

.card--standard > .card__content {
    position: absolute !important;
    top: 0;
    width: 100%;
    height: 100%;
}

.card--standard .card__inner {
    margin-top: 50px!important;
}
1 Like
6

Absolute legend!

Thanks so much again!

7

You are welcome.. It was just a small thing for me. :slightly_smiling_face:

Iā€™m not sure what level of assistance youā€™re looking for here, but if youā€™re seeking affordable, monthly, or long-term advanced help, we can also offer you the 'Shopify Premium Supportā€™ service that we provide to many others here. Our service is not hourly or per project, itā€™s monthly. You can request as much assistance as you need.

There is no limit as a support request!

Generally, we provide superficial assistance here. The detailed help is provided to our clients through 'Premium Support.ā€™

If you have an e-commerce store or website, working with someone who can provide continuous assistance will always be better for you.

In addition to quick solutions, we provide:

  • Fast Turnaround
  • Dedicated Advanced Front-End Coding Assistance with CSS and Javascript
  • Animated Coding Support
  • Free Advanced Apps
  • Comprehensive On-Site and Off-Site SEO Reports
  • Expert Consulting
  • Unique Mobile Premium Features
  • Design and Frontend Management

and much moreā€¦

Maybe youā€™re tired of constantly seeking help here, so I wanted to write this. Assistance on the Shopify community is usually quite superficial.

If youā€™re interested, you can check out the link in my signature. Feel free to reach out via private message, email, or WtApp if you have any questions. :folded_hands:

Terenceā€¦

1 Like
8

Thanks Terence,

Iā€™ll keep that in mind!

9

hi guys how are you doing

i did that code, paste but it change for the whole shop

i need only for the product page, look at the attached file please