Increase the store name size and colour

[ashishsharma178]

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

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

[BSSCommerce-HDL]

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.

[ashishsharma178]

Please find the store link and password.

https://cf4606-87.myshopify.com

Password - reintu

[BSSCommerce-HDL]

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 {
    font-size: 40px !important;
}

Here is result:

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

[ashishsharma178]

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.

[BSSCommerce-HDL]

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:

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

[ashishsharma178]

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.

[BSSCommerce-HDL]

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:

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

[ashishsharma178]

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.

[BSSCommerce-HDL]

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

[ashishsharma178]

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]

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.

[BSSCommerce-HDL]

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

[ashishsharma178]

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

[BSSCommerce-HDL]

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:

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

[ashishsharma178]

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.

[BSSCommerce-HDL]

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

.breadcrumbs {
    display: none !important;
}

Here is result:

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

[ashishsharma178]

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.

[BSSCommerce-HDL]

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

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

Here is result:

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

[ashishsharma178]

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.

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