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 · 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 {
    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 😍😍

[BSSCommerce-HDL · 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: 

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 😍😍

[BSSCommerce-HDL · 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 😍

[BSSCommerce-HDL · 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:  

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 😍

[BSSCommerce-HDL · Accepted solution]

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 😍

[BSSCommerce-HDL · Accepted solution]

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 😍

[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 · 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 {
    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 · 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: 

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 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]

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 · 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 😍

[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 · 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:  

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 · Accepted solution]

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 · Accepted solution]

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.

[ashishsharma178]

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

[BSSCommerce-HDL]

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? 

[ashishsharma178]

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.

[ashishsharma178]

Could you please help me adjusting slideshow image as it is getting zoomed in both on desktop and mobile.

Below is the image file so please check and let me know.

 

[ashishsharma178]

Could you please help me adjusting slideshow image as it is getting zoomed in both on desktop and mobile.

Below is the image file so please check and let me know.

[ashishsharma178]

Regarding my above query, let me know if there is any code to adjust the zoom of the images in slideshow.

Also need your help to adjust the height of the announcement bar for mobile and to have the text in one line only.

Also, could we have slideshow image height to be large for mobile but should stay medium for desktop.

[ashishsharma178]

Regarding my previous query, let me know if there is any code to adjust the zoom size of the slideshow images.

Also need your help to adjust the height of the announcement bar for mobile and to have the text in one line only.

Also, could we have slideshow image height to be large for mobile but should stay medium for desktop.

[BSSCommerce-HDL · Accepted solution]

Hi @ashishsharma178, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
@media screen and (max-width: 600px) {
  .utility-bar__grid.page-width {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  p.announcement-bar__message.h5 span {
    font-size: 11px !important;
  }
}
</style>

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 for your help.

Could you please help me with my second point as well.

2) Could we have slideshow image height to be large for mobile but should stay medium for desktop.

[ashishsharma178]

Could you please help to respond on my previous query on image slide height adjustment.

[ashishsharma178]

Could you please help to respond on my previous query as need to live my website in few days.

[ashishsharma178]

Waiting for your response on my previous query so please help here as well.

Also let me know how could I reduce the SHOP NOW button size in image slides as highlighted below.

[ashishsharma178]

Could you please urgently help on below two issues as I need to go live soon.

1) Need to adjust slide height highlighted in blue for only mobile.

2)  Need to move the text content highlighted in red to the top near to the image slide margin.

[ashishsharma178]

Need your help to change the slideshow alignment like height, font size etc. separately for each different slides for Desktop & Mobile / Dawn Theme. Also, would like the slide images to be zoom out as they are automatically zoomed in.

[ashishsharma178]

Could you please help to respond to my query raised yesterday.