Solved

How do I center the vendor on my collections page?

olliedodge
Tourist
21 0 3

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.

Screen Shot 2023-11-02 at 7.41.32 PM.png

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
6894 1302 1329

This is an accepted solution.

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

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

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 20 (20)

suyash1
Shopify Partner
8960 1112 1458

@olliedodge - can you please share thi page link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
olliedodge
Tourist
21 0 3
suyash1
Shopify Partner
8960 1112 1458

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

 

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

 

suyash1_0-1698981207677.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
olliedodge
Tourist
21 0 3

I can't find where theme.scss file is

Screen Shot 2023-11-02 at 8.16.20 PM.png

Dan-From-Ryviu
Shopify Partner
6894 1302 1329

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; }

Screenshot 2023-11-03 at 10.03.07.png

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olliedodge
Tourist
21 0 3

I can't find where it says theme.scss.liquid. I so see something that just says "theme" Screen Shot 2023-11-02 at 8.16.20 PM.png

Dan-From-Ryviu
Shopify Partner
6894 1302 1329

This is an accepted solution.

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

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

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olliedodge
Tourist
21 0 3

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

 

Dan-From-Ryviu
Shopify Partner
6894 1302 1329

Please update code to this 

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

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olliedodge
Tourist
21 0 3

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

 

Dan-From-Ryviu
Shopify Partner
6894 1302 1329

Welcome, @olliedodge 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olliedodge
Tourist
21 0 3

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

Dan-From-Ryviu
Shopify Partner
6894 1302 1329

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 -%}

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olliedodge
Tourist
21 0 3

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
Shopify Partner
6894 1302 1329

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>

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olliedodge
Tourist
21 0 3

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
Shopify Partner
6894 1302 1329

Hi, please add this code below <style> tag

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

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olliedodge
Tourist
21 0 3

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

Dan-From-Ryviu
Shopify Partner
6894 1302 1329

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 -%}

 

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

olliedodge
Tourist
21 0 3

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!