How do you display the Vendor above the product title not below?

JP1704
Explorer
63 0 17

Hi I want the vendor name to be displayed above the product title on all pages is this possible?

 

Thanks

Replies 17 (17)

dmwwebartisan
Shopify Partner
12282 2546 3694

Hey @JP1704,

Which theme you're using and on which page you want to show the vendor, on the product page?

Let me know.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JP1704
Explorer
63 0 17

Hi, 

 

I'm using the debut theme and id like it to be displayed above the title on product page and collection pages if possible?

It also needs to be centred as I've centred the title and price!

Thanks

dmwwebartisan
Shopify Partner
12282 2546 3694

Hey @JP1704,

Did you enable the "Show product vendor" option for product and collection pages?

If yes then please share your website URL.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JP1704
Explorer
63 0 17

Yes I did,   its https://roh-roh.com/ 

 

Also I've just noticed that the price is now centred on the product page too, i only want the price centred on collection pages not on the actual individual product page - is that doable? 🙂

dmwwebartisan
Shopify Partner
12282 2546 3694

Hey @JP1704,

Your website is password protected. Please share the password so I can check.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12282 2546 3694

Hey @JP1704,

As for the vendor name on the product page. Do the following changes in sections/product-template.liquid file.

vendor-name.jpg

 

This is vendor code add this above title.

 

{% if section.settings.show_vendor and product %}
    <div class="price__vendor">
      <dt>
        <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    </div>
  {% endif %}

 

 

Hope this helps.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JP1704
Explorer
63 0 17

Hi, 

I pasted the code and the vendor name is now showing above the title on the product page but not on collection pages, is there another code for this?

 

dmwwebartisan
Shopify Partner
12282 2546 3694

Hey @JP1704,

The same you need to do on the snippets/product-card-grid.liquid file. Please check the following screenshot.

collection-vendor.jpg

Hope this works.

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JP1704
Explorer
63 0 17

Hi, 

 

Its now displaying above but also below? Also the vendor name isn't central?

Screenshot 2020-09-15 141129.png

 

 

diego_ezfy
Shopify Partner
2935 562 883

@JP1704 please share the store password, I'll help you out.

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

JP1704
Explorer
63 0 17

how do i DM?

dmwwebartisan
Shopify Partner
12282 2546 3694

@JP1704,

Did you remove this code from here? If not please do so. It will remove the vendor from the below product title. Also, you removed the password from the post so please PM me so I will check and tell you the code of the centering vendor.

 

remove-price-vendor.jpg

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JP1704
Explorer
63 0 17

Yes i removed that piece of code but still not working, how do I DM you? :'D

diego_ezfy
Shopify Partner
2935 562 883

@JP1704 

Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

 

.grid__item .price__vendor > * {
    margin-left: 0 !important;
}

 


Please let me know whether it works.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

JP1704
Explorer
63 0 17

Hi, 

 

Thanks for your reply I added the code but now its moved the vendor name to the left on collection pages also.

 

I need help with:

-Vendor name to display left on product page but central on collection page

-Price to display left on product page but central on collection page

-Product title to display left on product page but central on collection page

thanks

JP1704
Explorer
63 0 17

still need help with this 

 

-Vendor name to display left on product page but central on collection page

-Price to display left on product page but central on collection page

-Product title to display left on product page but central on collection page

thanks in advance 🙂

JP1704
Explorer
63 0 17

@diego_ezfy  i managed to move the vendor name above the title on collection pages and it is also aligned left on the product page which is great - but the vendor name is duplicated underneath the title on collection pages - any idea how to remove the duplicated vendor? Thanks 🙂