Move vendor/brand above title

Store Design
, , , , , , , ,
1

Hi,

I want to move the brand/vendor name above the product title on both the collection and product page. My site is https://y5gt67jqco4bw8ml-84365082931.shopifypreview.com

1DA5F65E-9AC9-4276-8D2F-40FBAE7350C1.jpeg
1DA5F65E-9AC9-4276-8D2F-40FBAE7350C1.jpeg1170×2532 169 KB

C893262F-D5D3-4A98-AB2B-4CC516D371B5.jpeg
C893262F-D5D3-4A98-AB2B-4CC516D371B5.jpeg1170×2532 145 KB

2

Hi @Luxurymrkt

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 719px){
.product-item__text.ta-c, .product__block--product-header-inner {
    display: flex;
    flex-direction: column;
}
h5.ff-body.fs-body-50.product-item__swatch-count {
    order: 4;
}
h4.ff-body.product-item__product-title.fs-product-card-title, h1.product__title.ff-heading.fs-heading-4-base.fs-heading-3-base-ns {
    order: 2;
}
p.product-item__price, .product__price-and-ratings {
    order: 3;
}
h5.ff-body.fs-body-60.product-item__product-vendor, .product__vendor_and_sku {
    order: 1;
}
}

And save.

Result:

Made4uoRibe_0-1724368150892.png
Made4uoRibe_0-1724368150892.png717×365 6.76 KB

Made4uoRibe_1-1724368159305.png
Made4uoRibe_1-1724368159305.png720×295 27.7 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

HI my friend @Luxurymrkt ,

I haved checked your website and see everything look good.

Your brand/vendor name above the product title on both the collection and product page.

It seems like you got a solutions and resolved it.

Have a nice day!