Hello everyone! I want to convert my shopify product page quantity counter from this to the pink background one. Please can anybody help me out. And please if you can help in the search bar too as the current search bar of my shopify theme takes up a significant amount of the page when you try to search and isnt the best so please can you also take a look into the picture below I want it to look something like this.
My store: https://dfd8a8.myshopify.com/
Password: door
Hi @Boliye ,
#1: For qty: Because you don’t have any products currently, therefore I can’t help you check this.
#2: Search: Please go to Actions > Edit code > Assets > engo-customize.scss.liquid file and paste this at the bottom of the file:
body.activedestop {
margin-top: 0 !important;
}
.search-full-destop .search-eveland.active {
padding-bottom: 30px !important;
}
.search-full-destop .search-eveland.active .drawer-search-top {
display: none !important;
}
.search-full-destop .search-eveland.active .wg-search-form {
margin-top: 30px !important;
}
.search-full-destop .search-eveland .result_prod {
height: auto !important;
}
.search-full-destop .bg_search_box.active {
display: none !important;
}
it will display like this:
Hi Namphan Thanks a lot for the search solution can you please also help to increase the size in width of the search bar to it matches the one I wanted. Sorry I forgot to add a product but I have added now so please can you check and suggest a solution for the product quantity counter too please! Thanks for your time, I really appreciate it!
Link to the product: https://dfd8a8.myshopify.com/products/black-jacket?variant=46509209583913
The search of the product comes like a small icon in the search. Can you please make in sppear bigger? Like almost triple the size please!!! Thank you!!!
Hi @Boliye ,
Please go to Actions > Edit code > Assets > engo-customize.scss.liquid file and paste this at the bottom of the file:
.prod_sticky .content-page-detail .detail-info .btn-action .js-qty {
display: flex !important;
justify-content: space-between;
align-items: center;
}
.prod_sticky .content-page-detail .detail-info .btn-action .js-qty .qty_minus,
.prod_sticky .content-page-detail .detail-info .btn-action .js-qty .qty_plus {
position: relative !important;
border-top: none !important;
}
.prod_sticky .content-page-detail .detail-info .btn-action .js-qty input[type=text] {
border-right: none !important;
}
Hi @Boliye ,
Please go to Actions > Edit code > Assets > engo-customize.scss.liquid file and paste this at the bottom of the file:
.search-full-destop .search-eveland .wg-search-form {
width: 1200px !important;
max-width: 100%;
}
.search-full-destop .search-eveland .result_prod .prod_sidebar .product_info img {
max-width: 150px !important;
}
Thanks Namphan! But the problem is that the search isn’t responsive now. 
If you try to open a iphone layout or a tablet layout the cross overlays the search bar and the search bar line is sticking out the the given space. Can you please help me with the responsiveness and make it look like this on all the devices
Thank you!!!
Hi @Boliye ,
Please go to Actions > Edit code > Assets > engo-customize.scss.liquid file and paste this at the bottom of the file:
@media (max-width: 767px) {
.search-full-destop .search-eveland .wg-search-form {
width: 90% !important;
}
.search-full-destop .search-eveland .drawer_back {
padding: 0;
top: 35px;
right: 0;
}
}
Thank you so much! I tried it but it still overlaps on some of the devices so please if can help moving the search icon to the start of the search bar and the cross on the previous position of the search icon. Something like in the image below. Thank you I will be waiting for your reply. Thanks again
Hi @Boliye ,
Please add code:
.search-full-destop .search-eveland .wg-search-form .search-input {
padding-left: 45px;
}
.search-full-destop .search-eveland .wg-search-form button {
right: auto;
left: 0;
}
Thank you so much Namphan. Learnt a lot your you from your help. I tried to do some customization myself and got some success but I wasn’t able to do something I would really appreciate if you code solve that. I tried to increase the sizes of the add to cart button and it worked but I wasn’t able to increase the size of buy now button. Can you please increase the size of the buy now button to the size of add to cart please??
Hi @Boliye ,
Please add code:
.shopify-payment-button__button--unbranded {
width: 360px !important;
}
You can manually change the width according to your choice, it will display well
Love you my guy!
Hi @Boliye ,
If you have any further questions, you can contact me.
Happy to help you.
Store link: https://10a956-3.myshopify.com
pass: door
Hey There Namphan! Thanks a lot again for your help in the past and your gratitude is helping me to ask you again. Thanks! So the problem I am facing is that I am using the Pouxa theme for my shopify store and I used their home 4 theme so they advertise many shop layouts on their website, but I am not aware how to change my shop theme, contacted theme to ask about it but no response. I would really appreciate if you would help me to change the shop layout. Currently I have the shop layout V2 but would like to change it to V4 OR V5 shop layout. I hope you can help me how to do it. Thanks!
Pouxa website: https://landing.engotheme.com/shopify/pouxa/
(choose the shop layout beside demo to get the page shared in the screenshot below)
Hi @Boliye ,
This is usually managed by the theme owner, when you download the theme, does it include all the homes?
Yes bro I have all homes. You know what to do? Basically I want to use the homepage of the home 4 but the shop layout of the home 1 or 2. Is it possible? Like they advertised that they give you so many options? So we can choose any right?
You aware of the solution bro?
Bro?? Please can you help?
Hi @Boliye ,
Sorry for the delay, it seems like each home will be supported with a different shop layout. Therefore, to be able to check in more detail, can you send me a collaborator invitation?
