Move Collection Name Above Image

[DesignSugar]

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!

[TerenceKEANE · Accepted solution]

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;
}

[TerenceKEANE · Accepted solution]

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;
}

[DesignSugar]

Hi Terence,

You're amazing. Thank you so much for your help!! 🤗

[DesignSugar]

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? 🤞

Thanks so much!

[TerenceKEANE · Accepted solution]

Hi again.

I believe there's a solution for everything 😊

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;
}

[DesignSugar]

Absolute legend!

Thanks so much again!

[TerenceKEANE]

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

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. 🙏

Terence...

[DesignSugar]

Thanks Terence,

I'll keep that in mind! 

[TGRF]

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