Re: Increase the store name size and colour

Solved

Increase the store name size and colour

ashishsharma178
Excursionist
54 0 4

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 (7)
BSSCommerce-HDL
Shopify Partner
2305 833 904

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

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 833 904

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

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 833 904

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 833 904

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 😍



Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 833 904

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 833 904

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 833 904

This is an 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: 

BSSCommerceHDL_0-1721652454649.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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 34 (34)

BSSCommerce-HDL
Shopify Partner
2305 833 904

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.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

ashishsharma178
Excursionist
54 0 4

Please find the store link and password.

https://cf4606-87.myshopify.com

Password - reintu

BSSCommerce-HDL
Shopify Partner
2305 833 904

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

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

ashishsharma178
Excursionist
54 0 4

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 Partner
2305 833 904

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

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

ashishsharma178
Excursionist
54 0 4

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 Partner
2305 833 904

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

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

ashishsharma178
Excursionist
54 0 4

 

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
54 0 4

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 Partner
2305 833 904

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

ashishsharma178
Excursionist
54 0 4

 

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 Partner
2305 833 904

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

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

ashishsharma178
Excursionist
54 0 4

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 Partner
2305 833 904

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 😍



Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

ashishsharma178
Excursionist
54 0 4

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 Partner
2305 833 904

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

ashishsharma178
Excursionist
54 0 4

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 Partner
2305 833 904

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

ashishsharma178
Excursionist
54 0 4

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
54 0 4

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

BSSCommerce-HDL
Shopify Partner
2305 833 904

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? 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

ashishsharma178
Excursionist
54 0 4

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
Excursionist
54 0 4

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.

 

IMG20240718120244.jpg

ashishsharma178
Excursionist
54 0 4

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_0-1721391466331.jpegashishsharma178_1-1721391542516.png

 

ashishsharma178
Excursionist
54 0 4

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_0-1721551976996.png

 

 

ashishsharma178
Excursionist
54 0 4

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.

 

ashishsharma178_1-1721552191146.png

 

 

BSSCommerce-HDL
Shopify Partner
2305 833 904

This is an 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: 

BSSCommerceHDL_0-1721652454649.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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

ashishsharma178
Excursionist
54 0 4

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
Excursionist
54 0 4

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

ashishsharma178
Excursionist
54 0 4

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

ashishsharma178
Excursionist
54 0 4

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_0-1721916657194.png

 

ashishsharma178
Excursionist
54 0 4

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_0-1722064753478.png

 

 

ashishsharma178
Excursionist
54 0 4

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
Excursionist
54 0 4

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