Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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 {
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 😍😍
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
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:
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
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
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:
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
This is an 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 😍
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
This is an 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 😍
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
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:
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
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
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 {
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 😍😍
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
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.
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:
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
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.
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 😍😍
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
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.
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.
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
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.
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
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.
Password - reintu
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:
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
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.
This is an 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 😍
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
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.
This is an 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 😍
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
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.
Could you please help to revert so I can resolve the issue quickly.
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
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.
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.
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.
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.
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.
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:
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
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.
Could you please help to respond on my previous query on image slide height adjustment.
Could you please help to respond on my previous query as need to live my website in few days.
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.
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.
Could you please help to respond to my query raised yesterday.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024