Move Collection Name Above Image

Store Design
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

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;
}
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ā€¦

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