Shopify themes, liquid, logos, and UX
Hi guys,
I'd like to change the color of the box ''email'' and ''country/valuta'' to the color #95B4F0.
Can anyone help me with that code?
Website is kiavuspetstore.com
Solved! Go to the solution
This is an accepted solution.
Code updated
.disclosure .localization-form__select,
.newsletter-form__field-wrapper .field__input {
background: #95B4F0 !important;
color: #FDFBF7 !important;
}
.newsletter-form__field-wrapper .field:after,
.localization-form__select:after {
border: unset !important;
box-shadow: unset !important;
}
.newsletter-form__field-wrapper .newsletter-form__button .icon,
.newsletter-form__field-wrapper .field__label {
color: #FDFBF7 !important;
}
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Please go to Online Store > Themes > Customize > Theme settings > open Custom CSS, add this code, and save change.
.disclosure .localization-form__select,
.newsletter-form__field-wrapper .field__input {
background: #95B4F0 !important;
}
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Perfect Dan, thank you for your fast reply! I forgot to ask, is it also possiblle to make the text inside the blue white (#FDFBF7) now?
This is an accepted solution.
Code updated
.disclosure .localization-form__select,
.newsletter-form__field-wrapper .field__input {
background: #95B4F0 !important;
color: #FDFBF7 !important;
}
.newsletter-form__field-wrapper .field:after,
.localization-form__select:after {
border: unset !important;
box-shadow: unset !important;
}
.newsletter-form__field-wrapper .newsletter-form__button .icon,
.newsletter-form__field-wrapper .field__label {
color: #FDFBF7 !important;
}
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hey can you please help me on my recent post it would be very appreciated
You can achieve this by adding the following CSS code to your theme file, just above the </head> closing tag:
<head>
<!-- Other head content -->
<style>
div#FooterCountry-country-results,
.country-filter,
input#country-filter-input,
button.disclosure__button.localization-form__select.localization-selector.link.link--text.caption-large,
input#NewsletterForm--sections--20160497025290__newsletter {
background-color: #95B4F0 !important;
}
</style>
</head>
This code will change the background color of the "email" and "country/value" boxes to #95B4F0.
Hope this helps!
Best, Ajay
Hello @KiavusPetstore
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the bottom of the file.
.newsletter-form__field-wrapper .field__input, .disclosure .localization-form__select {
background: #95B4F0 !important;
}
and the result will be
If this was helpful, hit the like button and mark the job as completed.
Thanks
Hello @KiavusPetstore ,
Please add the below code at the bottom of the theme.liquid file before </body> tag and save for the desired change.
<style>
input#NewsletterForm--sections--20160497025290__newsletter,
button.disclosure__button.localization-form__select.localization-selector.link.link--text.caption-large
{
background: #95B4F0;
}
</style>
I hope the code helps you.
Thank you.
- Here is the solution for you @KiavusPetstore
- Please follow these steps:
- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.
.newsletter-form__field-wrapper .field__input, .localization-form:only-child .localization-form__select {
background: #95B4F0 !important;
}
- Here is the result you will achieve:
- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
.newsletter-form__field-wrapper .field__input, .localization-form:only-child .localization-form__select {
background: #95B4F0 !important;
}
.newsletter-form__field-wrapper .field__input::placeholder, .newsletter-form__field-wrapper .field, .localization-form:only-child .localization-form__select {
color: white !important;
}
You can use this code if you want the color white @KiavusPetstore
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024