can someone help me move this icon to the left please?
store url https://26e068.myshopify.com/
Topic summary
A user seeks help repositioning an icon to the left in their Shopify store header. They provide a screenshot showing the current layout.
Proposed Solution:
A responder offers a CSS-based fix that reorders header elements using flexbox properties. The solution involves:
- Modifying the
orderattribute of subclasses within the header parent class - Adjusting the cart icon’s order value to move it left of the search icon
- Adding custom CSS code to
base.cssvia Shopify admin (Online Store → Theme → Edit Code)
Implementation Notes:
- The responder provides specific CSS code snippets with order values for different header elements
- They note that editing the liquid file directly would be easier for exact customization
- However, they lack direct store access and suggest the user contact Shopify support or hire a developer for liquid file modifications
Status: The discussion remains open with a CSS workaround provided but no confirmation of implementation or resolution.
Hi @Itamar2020 ,
If you’re just editing the CSS, I can edit it for you to look like this:
To get the above result, you need to change the order attribute of the subclasses in the parent class, header. The order attribute allows displaying the order of subclasses wrapped in the parent class when display = flex.
Similarly, change the order property of the cart class so that the cart icon moves to the left of the search icon.
You can do this in admin.shopify:
Sale channels => Online store => Theme => Edit code. Search base.css and insert the css at the end of the file:
@media only screen and (max-width: 768px) {
.header {
display: flex !important;
justify-content: space-between !important;
}
.header header-drawer {
order: 3;
}
.header .header__heading {
order: 2;
}
.header .header__icon.header__icon--cart {
order: -1;
}
}
As for doing it exactly as you requested, changing the liquid file will be easier. But I don’t have access to your store to do that. You can contact your supporter or hire a developer to customize that.
Hope it helps.