Increase the store name size and colour

Solved

Increase the store name size and colour

ashishsharma178
Excursionist
28 0 3

Can someone guide how can I increase the store name size highlighted in yellow in the header.

 

ashishsharma178_0-1716110069915.png

 

Also, would like to add color variant to my store name like below so please help here.

 

ashishsharma178_1-1716110183240.png

 

Accepted Solutions (6)
BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @ashishsharma178

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716112333902.png

 

Step 2: Search file base.css, theme.css or styles.css 

BSSTechVenture_1-1716112340111.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

 

h1.header__heading a span {
    font-size: 40px !important;
}

 

 

 

Here is result: 

BSSTechVenture_0-1716111628969.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @ashishsharma178

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css or styles.css 

Step 3: Insert the below code at the bottom of the file -> Save

 

 

h1.header__heading a span {
    background-image: linear-gradient(to right, #487470 46%, #efbe52 46%) !important;
    -webkit-background-clip: text;
    color: transparent !important;
}

Here is result: 

BSSTechVenture_0-1716114640108.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @ashishsharma178 , Pls insert this code to your file css : 

a.header__heading-link  span {
   font-size: 40px !important;
   background-image: linear-gradient(to right, #487470 46%, #efbe52 46%) !important;
   -webkit-background-clip: text;
   color: transparent !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @ashishsharma178
I have checked it. The possibility is that when inserting the style tag in the wrong place, the js does not work
I fixed it. Here is result:  

BSSTechVenture_0-1716911492685.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍



If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @ashishsharma178, Pls insert this code to your file css : 

.breadcrumbs {
    display: none !important;
}

 

Here is result: 

BSSTechVenture_0-1716990557384.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @ashishsharma178, i edited it in file base.css

BSSCommerceHDL_0-1717656561040.png

 

.page-width.page-width--narrow {
  text-align-last: left!important;
}
.main-page-title.page-title  {
  text-align-last: center !important;
}

Here is result: 

BSSCommerceHDL_1-1717656617387.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 22 (22)

BSSCommerce-HDL
Shopify Expert
1004 342 408

Hi @ashishsharma178

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
ashishsharma178
Excursionist
28 0 3

Please find the store link and password.

https://cf4606-87.myshopify.com

Password - reintu

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @ashishsharma178

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716112333902.png

 

Step 2: Search file base.css, theme.css or styles.css 

BSSTechVenture_1-1716112340111.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

 

h1.header__heading a span {
    font-size: 40px !important;
}

 

 

 

Here is result: 

BSSTechVenture_0-1716111628969.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
ashishsharma178
Excursionist
28 0 3

Yes, it worked. Thanks a lot for your help.

 

Could you also help me with my second query as mentioned below as well.

 

Also, would like to add color variant to my store name like below so please help here.

 

ashishsharma178_0-1716113735118.png

 

 

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @ashishsharma178

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css or styles.css 

Step 3: Insert the below code at the bottom of the file -> Save

 

 

h1.header__heading a span {
    background-image: linear-gradient(to right, #487470 46%, #efbe52 46%) !important;
    -webkit-background-clip: text;
    color: transparent !important;
}

Here is result: 

BSSTechVenture_0-1716114640108.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
ashishsharma178
Excursionist
28 0 3

Thanks a lot as this also worked perfectly.

Also, I was wondering is it also possible to increase the logo size as well as it is appearing too small in the heading. By increasing the logo width, the overall heading margin space is also increasing which is not looking nice at all.

 

ashishsharma178_0-1716122900706.png

 

BSSCommerce-HDL
Shopify Expert
1004 342 408

Hi @ashishsharma178

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css or styles.css 

Step 3: Insert the below code at the bottom of the file -> Save

@media screen and (min-width: 750px) {
    .header {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .header__heading-logo-wrapper {
        height: 100px !important;   
    }
    
    .header__heading-logo {
        height: 100% !important;
        object-fit: cover !important;
    }
}

Here is result: 

BSSTechVenture_0-1716125056372.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
ashishsharma178
Excursionist
28 0 3

 

This worked perfectly except the checkout page as the gradient color is not shown there.

Could you let me know where I need to change the code.

 

ashishsharma178_0-1716734104814.png

 

ashishsharma178
Excursionist
28 0 3

This worked perfectly on the homepage however if I navigate to some other page then the gradient color is not shown.

Could you let me know where I need to change the code.

 

ashishsharma178_0-1716139111900.png

 

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @ashishsharma178 , Pls insert this code to your file css : 

a.header__heading-link  span {
   font-size: 40px !important;
   background-image: linear-gradient(to right, #487470 46%, #efbe52 46%) !important;
   -webkit-background-clip: text;
   color: transparent !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
ashishsharma178
Excursionist
28 0 3

 

Color gradient of the store name is working perfectly on the website except the checkout page as shown below.

Could you let me know where I need to change the code.

 

ashishsharma178_1-1716799870294.png

 

 

BSSCommerce-HDL
Shopify Expert
1004 342 408

Hi @ashishsharma178, Currently, we cannot edit Shopify's payment page. Very sorry for this 😔
Hope we can help you with other questions. Thank you 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
ashishsharma178
Excursionist
28 0 3

ok no problem. Will look some other solution then.

 

There is one issue which I have noticed now in my cart that whenever I am updating the product quantity, it keeps on showing the browsing icon highlighted in yellow and the updated quantity is not being reflected. However, at the checkout the updated quantity is being reflected. 

 

There is some issue with the code so could you please help me to correct it.

 

Please find the store link and password.

https://cf4606-87.myshopify.com

Password - reintu

 

 

ashishsharma178_1-1716886078467.png

 

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @ashishsharma178
I have checked it. The possibility is that when inserting the style tag in the wrong place, the js does not work
I fixed it. Here is result:  

BSSTechVenture_0-1716911492685.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍



If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
ashishsharma178
Excursionist
28 0 3

Yes, the problem got resolved now. Thanks a lot once again for your help.

 

However, I noticed the breadcrumbs got activated again as I recently removed them as the collection name was not appearing with the product name.

 

 Could you help to remove them or if you can help to correctly apply.

 

ashishsharma178_0-1716916358194.png

 

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @ashishsharma178, Pls insert this code to your file css : 

.breadcrumbs {
    display: none !important;
}

 

Here is result: 

BSSTechVenture_0-1716990557384.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
ashishsharma178
Excursionist
28 0 3

I am facing an issue as my text is not getting aligned to the left while page creation. See the yellow highlighted text which is moved to the center instead of left.

 

Kindly help to rectify this.

 

ashishsharma178_0-1717609074834.png

 

ashishsharma178_1-1717609278335.png

 

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @ashishsharma178, i edited it in file base.css

BSSCommerceHDL_0-1717656561040.png

 

.page-width.page-width--narrow {
  text-align-last: left!important;
}
.main-page-title.page-title  {
  text-align-last: center !important;
}

Here is result: 

BSSCommerceHDL_1-1717656617387.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
ashishsharma178
Excursionist
28 0 3

I am trying to upload high quality product images with size 3072*3072 but it is appearing downgraded in the store. Could you please help in improving it.

 

ashishsharma178_0-1718531187807.png

 

When I compared with competitor's website, they are having nice quality images on their store.

 

ashishsharma178_1-1718531370969.png

 

ashishsharma178
Excursionist
28 0 3

Could you please help to revert so I can resolve the issue quickly.

BSSCommerce-HDL
Shopify Expert
1004 342 408

Hi @ashishsharma178, We can increase your images to higher quality but it will affect the shop's performance. If the original image is rendered, the performance will be extremely low. Do you still want to do it? 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
ashishsharma178
Excursionist
28 0 3

But how is the competitor site having high quality images with no performance issues? Is there any way we can achieve it.

 

Are images downgraded when uploaded on store? Any optimum way to have good quality images with no performance issues.