Solved

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

DFSouth
Excursionist
28 0 4

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

Accepted Solution (1)
PageFly-Richard
Shopify Partner
4226 957 1604

This is an accepted solution.

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

<style>
@media screen and (max-width: 767px){

.collection .card__information .full-unstyled-link {
color: blue;
font-size: 24px !important;

}

.collection .caption-with-letter-spacing.light{
    color: red;
    font-size: 18px !important;
}
}
</style>

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 5 (5)

PageFly-Richard
Shopify Partner
4226 957 1604

Hi @DFSouth 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
@media screen and (max-width: 767px){
.collection .card__information .full-unstyled-link, .collection .caption-with-letter-spacing.light{
    color: red;
    font-size: 18px !important;
}
}
</style>

PageFlyRichard_0-1706070643173.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

DFSouth
Excursionist
28 0 4

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

PageFly-Richard
Shopify Partner
4226 957 1604

This is an accepted solution.

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

<style>
@media screen and (max-width: 767px){

.collection .card__information .full-unstyled-link {
color: blue;
font-size: 24px !important;

}

.collection .caption-with-letter-spacing.light{
    color: red;
    font-size: 18px !important;
}
}
</style>

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ZestardTech
Shopify Expert
5412 975 1300

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

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
DFSouth
Excursionist
28 0 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