How do I center the vendor on my collections page?

olliedodge · ‎11-02-2023

I have products from different vendors in my store and I want people to be able to see who each product is from. When I activate this feature the vendors names aren't centered and it looks bad. How do I fix this? Also, how do I make the font bold? I'm using the debut theme.

Dan-From-Ryviu · ‎11-02-2023

Add this code to your theme.liquid file before </head> tag

<style>
.grid-view-item__vendor { text-align: center; }
</style>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

suyash1 · ‎11-02-2023

@olliedodge - can you please share thi page link?

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

olliedodge · ‎11-02-2023

https://www.beatmakersboutique.com/collections/sound-packs

thanks!

suyash1 · ‎11-02-2023

@olliedodge - add this css to the very end of your theme.scss file and check

.grid-view-item__vendor {text-align: center;}

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

olliedodge · ‎11-02-2023

I can't find where theme.scss file is

Dan-From-Ryviu · ‎11-02-2023

Hi @olliedodge

Open your Online store > Themes > Edit code > theme.scss.liquid, add this code at the bottom and save

.grid-view-item__vendor { text-align: center; }

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

olliedodge · ‎11-02-2023

I can't find where it says theme.scss.liquid. I so see something that just says "theme"

Dan-From-Ryviu · ‎11-02-2023

Add this code to your theme.liquid file before </head> tag

<style>
.grid-view-item__vendor { text-align: center; }
</style>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

olliedodge · ‎11-02-2023

Thank you that worked! Is there a way to make the font bold?

Dan-From-Ryviu · ‎11-02-2023

Please update code to this

<style>
.grid-view-item__vendor { text-align: center; font-weight: 700 !important; }
</style>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

olliedodge · ‎11-02-2023

thank worked too! thank you guys so much for your help!

Dan-From-Ryviu · ‎11-02-2023

Welcome, @olliedodge

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

olliedodge · ‎11-02-2023

One more thing, is there a way to shut off the vendor display for all the other collections besides sound packs?

Dan-From-Ryviu · ‎11-02-2023

You can try to add this code to your theme.liquid file before </head> tag

{%- if collection.handle == "sound-packs" -%}
.grid-view-item__vendor { display: block !important; }
{%- else -%}
.grid-view-item .grid-view-item__vendor { display: none; }
{%- endif -%}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

olliedodge · ‎11-03-2023

Thanks for the reply. I tried that but it didnt seem to do anything. I noticed there are a few different places in the code that start with the <head> tag.

Is there a specific one that I should put it in front of?

Dan-From-Ryviu · ‎11-03-2023

Please update code and put it right above </head>

<style>
{%- if collection.handle == "sound-packs" -%}
.grid-view-item__vendor { display: block !important; }
{%- else -%}
.grid-view-item .grid-view-item__vendor { display: none; }
{%- endif -%}
</style>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

olliedodge · ‎11-03-2023

that worked! Last questions I swear...How do I get the vendors to display on the "featured tapes" page as well? I just want the vendors to be shown on the "sound packs" and "featured tapes" page but not the "PO Cases" page

Dan-From-Ryviu · ‎11-03-2023

Hi, please add this code below <style> tag

.grid-view-item .grid-view-item__vendor { display: block !important; }

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

olliedodge · ‎11-03-2023

This code brought it back to displaying the vendors on the ''PO Cases" collection page.

Dan-From-Ryviu · ‎11-03-2023

Please update this code

<style>
{%- if collection.handle == "sound-packs" -%}
.grid-view-item__vendor { display: block !important; }
{%- else -%}
.grid-view-item .grid-view-item__vendor { display: none; }
{%- endif -%}
</style>

To this one

{%- if collection.handle == "sound-packs" or collection.handle == "featured-beat-tapes" -%}
.grid-view-item__vendor { display: block !important; }
{%- else -%}
.grid-view-item .grid-view-item__vendor { display: none; }
{%- endif -%}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

olliedodge · ‎11-03-2023

Awesome thank you! I added that code underneath the original one that centered the text and made it bold and it worked! I appreciate your help so much!

How do I center the vendor on my collections page?

How do I center the vendor on my collections page?

Community Blog Articles