How can I position the vendor name above the product title?

Hello I wanted to move the vendor name right above the product title, I have the dawn theme and have attached a screenshot of how I would like the vendor to be positioned. If anyone could provide code, it would be greatly appreciated. Site is rezith.com

Hi @rezithclo ,

Please go to Actions > Edit code > snippets > card-product.liquid file, find ‘card__information’ and add code here:

Code:

{{ card_product.vendor }}

Hope it helps!

Hi @rezithclo ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-card.css->paste below code at the bottom of the file:

.card-wrapper .card__information {
    position: relative;
    padding-top: 35px;
}
.card-wrapper .card__information .card-information .caption-with-letter-spacing {
    position: absolute;
    top: 7px;
}

I hope it would help you
Best regards,

Richard | PageFly

Hello! This seems to work however the title is on the right, how can I get to line up to the left?

This is the exact layout I am aiming for, any help would be greatly appreciated

Hi @rezithclo ,

Please send me the preview link including the changed code, I will check it again

https://rezith.com/?_ab=0&_fd=0&_sc=1

Hi @rezithclo ,

It is not link preview, please send me link preview, I will check this.

Hi @rezithclo ,

Sorry, have you tried my code yet? If it still doesn’t work, you can share the preview link so we can check it for you, because the current link you sent may be a different source code.

Can you send us the link to share this preview?

https://la2zoxygje63szkf-52120158362.shopifypreview.com\

This is with your code, I dont think it changes the site for my end

Nevermind it did work! Thank you!

Actually it currently isnt on the left hand side, its on the right

https://awvzawvwi35o4vvi-52120158362.shopifypreview.com

Hi @rezithclo ,

You can try add below code in Assets/component-card.css file:

.card-wrapper .card__information .card-information .caption-with-letter-spacing {
    left: 0;
}

I hope it would help you
Best regards,

Richard | PageFly

easy and work for me in 2023

This code works, however it renders the product image unclickable