HELP with the search bar and product quantity counter change

[Boliye]

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

[namphan · Accepted solution]

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;
}

[namphan]

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:

[Boliye]

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

[namphan]

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;
}

[Boliye]

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!!!

[namphan]

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;
}

[Boliye]

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!!!!

[namphan]

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;
}
}

[Boliye]

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

[namphan · Accepted solution]

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;
}

[Boliye]

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??

[namphan · Accepted solution]

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

[Boliye]

Love you my guy!

[namphan]

Hi @Boliye,

If you have any further questions, you can contact me.
Happy to help you.

[Boliye]

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)

[namphan]

Hi @Boliye,

This is usually managed by the theme owner, when you download the theme, does it include all the homes?

[Boliye]

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?

[Boliye]

You aware of the solution bro?

[Boliye]

Bro?? Please can you help?

[namphan]

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?

[Boliye]

Would love too! Can you please send a collaborator request?

[Boliye]

I respect your time bro and appreciate your help. Can you please look into this, 

Store link: https://6d59b5.myshopify.com

pass: door

I was able to solve the problem for the add to cart pop up not appearing on the phone as this code was interferring

 /*Hidden Ajax Popup AddtoCart Mobile*/
@media screen and (max-width: 767px) {
.engoc_hide_mobile {
display: none !important;
}
}

but I commented it and the problem was resolved but the now the problem is that It isn't responsive on mobile as it is bigger then the screen so it takes the whole screen where you can't even see the buttons, so can you please help me making it responsive for a mobile so all the contents are under the main product picture and a short window of "with this product also buy" is there but if it could be adjusted currently you have to swipe 2 times to view it which isn't good so if everything could be under the main picture nothing right or left, thanks! attaching the picture below of what happens

Below this message is the PC version which looks better and would appreciate it somehow contents appear on the mobile version too like with this product also buy

[namphan]

Hi @Boliye,

Can I send you a private message? It will help me describe everything.

[Boliye]

Sure bro. I'll be waiting 

[namphan]

Hi @Boliye,

#1: For sections: After you add the slideshow section, you need to save it, it will reload the JS and everything works fine. Because the current theme does not support direct display of slideshows when added to customize without saving.

#2: For popup: Please go to engo-customize.scss.liquid file and add code:

@media screen and (max-width: 767px) {
.engo-popup .content{
    min-width: auto !important;
}
}

[Boliye]

Thanks it did the thing. Is it possible to remove the "with this product also buy" which is just under the proceed to checkout button only in the mobile view? And as I am using the home 1 theme now so I tried to change the search with the code you provided earlier and it worked but the product quantity counter code did nothing. Can you please help, Thanks a lot bro ❤️

[Boliye]

Thanks bro ❤️! Please ignore the reply I did for removing the "with this product also buy" for mobile and changing the product quantity counter. I tried to fix them and was quite successful just because of your help. If you could just look after the website for the mentioned problems and see how I did

[Sunita_Marshall]

This can be done with custom liquid and JS code and css.

[Sunita_Marshall]

Pm Pakistan Status