Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I’d like to move the search and cart to the same line as the menu on the right side of my online store in the dawn theme please.
Solved! Go to the solution
Hi @Rimagaradah
Please drop your store link to check please.
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
https://admin.shopify.com/store/314169-3/themes/122120732766/editor
can i move the menu to the right side and have the search and cart next to it
Your store has password protected
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Just removed the password
Please add this code at bottom of your base.css file in Online store > Themes > Edit code
.header { grid-template-areas: "heading icons" !important; }
@media screen and (max-width: 989px) {
.header--mobile-left {
grid-template-columns: auto 3fr 1fr !important;
}
}
header-drawer { justify-self: end !important; }
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Could I have the menu in the mega menu style not the drawer please
& could I actually take out the search option & just move the cart next to the about on the right side
Do you want to it appears like this?
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Yes but could you remove the search option & move the Arabic writing right next to the “W84IT” not underneath it please
Please add this code at the bottom of your base.css file
header-drawer, .header__search { display: none; }
nav.header__inline-menu { display: block; }
.header { display: flex !important; justify-content: space-around; }
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Am i supposed to be removing the previous codes? Or adding them all
Remove previous code and replace them with new ones
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is what it looks like for me. Could I remove the search option completely & move the “shop and about” section to the very right next to the cart please?
Did you check in mobile device?
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
sorry I didn’t know there was a difference between the desktop and mobile.
So the change you are asking is for desktop?
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Yes please
Please remove all code, go to your Online store > Themes > Customize > Header, Desktop logo position > select Middle left, save your template then I can provide the new code
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Okay I just did, could I have the mobile view look like this (everything centered)
and the desktop view look like this, please
Please remove previous code I sent you
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Okay I did
Please use this code and check now
.header__inline-menu {
grid-area: icons !important;
justify-self: end;
margin-right: 40px;
}
.header__search { display: none !important; }
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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 for the desktop view!
how about the mobile view?
is there any way to have the mobile view look like this image above? (the top image) thank you
Hi @Rimagaradah
Please add this code at bottom of your base.css file
@media (max-width: 767px) {
header-drawer {
display: none !important;
}
.header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
justify-self: end !important;
margin-right: -6px !important;
}
.header__inline-menu {
margin-left: -268px;
display: flex !important;
}
.header__icons {
grid-area: navigation !important;
margin-left: -228px !important;
}
.header__icons .header__search {
display: none !important;
}
}
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is what the mobile view looks like now. How can I make it look like this:
Did you add this code at the bottom of your base.css file?
@media (max-width: 767px) {
header-drawer {
display: none !important;
}
.header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
justify-self: end !important;
margin-right: -6px !important;
}
.header__inline-menu {
margin-left: -268px;
display: flex !important;
}
.header__icons {
grid-area: navigation !important;
margin-left: -228px !important;
}
.header__icons .header__search {
display: none !important;
}
}
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
You missing close tag of previous code in your base.css file, please add } before my code to make it work
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Yes, that worked thank you! Can I move the "shop and about" to the right side for both desktop and mobile view?
Do you mean to switch positions of Shop and About?
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
No, I mean to slide them both to the right more (next to the cart symbol) on both desktop and mobile views, please. Also can we get rid of the search option on the desktop view please?
Did you remove the previous code I sent above for the desktop?
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Yes but i just added it back and it fixed the desktop view but this is how the mobile view looks now:
Please try to remove the code in base.css file, and then add code below to your theme.liquid file before </head> tag instead
<style>
.header__inline-menu {
grid-area: icons !important;
justify-self: end;
margin-right: 40px;
margin-top: 100p;
}
.header__search { display: none !important; }
@media (max-width: 767px) {
header-drawer {
display: none !important;
}
.header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
justify-self: end !important;
margin-right: -6px !important;
}
.header__inline-menu {
margin-left: -268px;
display: flex !important;
/* margin-top: 92px; */
grid-area: navigation !important;
}
.header__icons {
grid-area: navigation !important;
margin-left: -228px !important;
}
.header__icons .header__search {
display: none !important;
}
}
</style>
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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 that worked! It now looks like this for mobile view. Could I move the “shop, about and cart” to the center, right under the heading please. Thank you!
Code updated
<style>
.header__inline-menu {
grid-area: icons !important;
justify-self: end;
margin-right: 40px;
margin-top: 100p;
}
.header__search { display: none !important; }
@media (max-width: 767px) {
header-drawer {
display: none !important;
}
.header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
justify-self: end !important;
margin-right: -6px !important;
}
.header__inline-menu {
margin-left: -340px;
display: flex !important;
grid-area: navigation !important;
justify-self: center !important;
}
.header__icons {
grid-area: navigation !important;
margin-left: -220px !important;
justify-self: center !important;
}
.header__icons .header__search {
display: none !important;
}
}
</style>
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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, thank you! Is there any way we can equalize the spacing between the "about" "shop" and the cart symbol in the mobile view, please? But still have it be centered. Thank you
Please update code
<style>
.header__inline-menu {
grid-area: icons !important;
justify-self: end;
margin-right: 40px;
margin-top: 100p;
}
.header__search { display: none !important; }
@media (max-width: 767px) {
header-drawer {
display: none !important;
}
.header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
justify-self: end !important;
margin-right: -6px !important;
}
.header__inline-menu {
margin-left: -360px;
display: flex !important;
grid-area: navigation !important;
justify-self: center !important;
}
.header__icons {
grid-area: navigation !important;
margin-left: -214px !important;
justify-self: center !important;
}
.header__icons .header__search {
display: none !important;
}
}
</style>
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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, thank you so much! How can I change the font size of my heading?
Do you mean change font size of your logo heading?
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
yes
Please add this code to previous code
.header__heading-link .h2 {
font-size: 28px;
}
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
Thank you!
Very welcome
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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 Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024