Special Case: How to change color and size for both Vendor and Product Name?

Store Design
, , , ,

Topic summary

A Shopify store owner seeks CSS code to modify the color and size of vendor and product names on collection pages, specifically for mobile view only.

Solutions Provided:

  • PageFly-Richard initially offers code to be added to theme.liquid above the </head> tag, targeting both elements together
  • ZestardTech provides an alternative solution using media queries in base.css for mobile screens (max-width: 767px), also affecting both names simultaneously

Follow-up Request:

The original poster clarifies they need separate codes to modify vendor name and product name independently, rather than a single code affecting both elements at once. They want the ability to style each differently.

PageFly-Richard responds by offering to separate the code into two blocks—one for product name and one for vendor name—allowing independent customization.

Status: The discussion appears ongoing, with the final separated code solution being prepared but not yet fully detailed in the visible conversation.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi Shopify Community,

Do you have any codes that I can change the color and size for both Vendor and Product Name on the collection page but only for Mobile Version?

Here is my store: https://dfsouth.com.au/

Best regards,

Ian

1 Like
2

Hi @DFSouth

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1706070643173.png
PageFlyRichard_0-1706070643173.png646Ă—1398 159 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media screen and (max-width: 767px ){
.collection .card__information .full-unstyled-link, .collection .caption-with-letter-spacing.light{
color: #e30000;
font-size: 18px !important;
}
}

ZestardTech_0-1706072258068.png
ZestardTech_0-1706072258068.png938Ă—820 135 KB

4

Hi, @ZestardTech

Do you have separate codes to modify each vendor name and and product name? I mean in a separate way. I want two codes that I can modify vendor name and product name. Cause the code you gave, once you change stuff in that code, it’s gonna affect both vendor name and product name at the same time.

Best regards,

Ian

5

Hi, @PageFly-Richard

Do you have separate codes to modify each vendor name and and product name? I mean in a separate way. I want two codes that I can modify vendor name and product name differently. Cause the code you gave, once you change stuff in that code, it’s gonna affect both vendor name and product name at the same time.

Best regards,

Ian

6

@DFSouth so you can try this code, i will separate it for you

First block is for product name, last block is for vendor

1 Like