Brooklyn - Collection page - Increase vendor text size & reverse product name with vendor

New Member
2 0 1


I'm trying to do two things on the collection page:

1) Increase the text size of vendor name without increasing all other accent texts such as menus, buttons, etc.

2) Reverse product name with vendor name. I.e. Have vendor's name above, instead of below the product name

Any way I can do that by editing the theme code? Thanks!





Shopify Expert
165 40 66



1.) Go to Online Store > Themes > Actions > Edit Code > Assets > theme.scss.liquid and paste the following at the bottom of the file: 

.template-collection .grid-product__vendor {
  font-size: 18px;
  line-height: 24px; 

(adjust font size accordingly)


2.) To swap the vendor and title position, go to Online Store > Themes > Actions > Edit Code > Snippets > product-grid-item.liquid. 

At the bottom of that file you will see: 

      {% if section.settings.product_vendor_enable %}
        <p class="grid-product__vendor">{{ product.vendor }}</p>
      {% endif %}

Copy that snippet and move it between these two lines of code: 


<a href="{{ product.url | within: collection }}" class="grid-product__meta">
<span class="grid-product__title">{{ product.title }}</span>

Like so: 

Screen Shot 2020-01-11 at 2.25.42 PM.png

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
1 Like
New Member
2 0 1

Thank you so much, it worked perfectly! 

1 Like