Buy button Adjustment Request 😭

Solved
kyodong
Excursionist
22 2 1

Just want one button and I want one button to show as ‘Inquire’ button instead of ‘Buy it now’ button

And when Inquire button has been made, I want it to lead to ‘Contact’ page.

Please take a look at the screenshot attached.

 

The theme I am trying to use is 'studio' by the way.

Please help anyone 😭

Buy button - error.jpg

 

Accepted Solutions (2)
pawankumar
Shopify Partner
375 36 64

This is an accepted solution.

pawankumar_0-1694349929000.png

Please replace custom css with 

.enquire-me-button-wrapper .button::before,
.enquire-me-button-wrapper .button::after {
  border-radius: initial;
}
.enquire-me-button-wrapper .button::before {
  outline: 2px solid grey;
  outline-offset: 2px;
}

Final result will be as i shown in screenshot 
Thanks!

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com


Best regards,
Pawan

View solution in original post

pawankumar
Shopify Partner
375 36 64

This is an accepted solution.

Please replace custom css (Product information --> custom css) with this 

 

.enquire-me-button-wrapper .button::before,
.enquire-me-button-wrapper .button::after {
  border-radius: initial;
}
.enquire-me-button-wrapper .button::before {
  outline: 2px solid grey;
  outline-offset: 2px;
}
button {
  background: #fff;
  color: #000;
}
button::before,
button::after,
.product-form__input label {
  border-radius: initial;
}

 

It will not replace that green background, That is necessary because it is for selected option, if you will emit that as well then after option selection, it will not be highlighted if option is selected or not.
Final result will be like this after the change:

pawankumar_0-1694531198493.png

Thanks!

 

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com


Best regards,
Pawan

View solution in original post

Replies 12 (12)
kyodong
Excursionist
22 2 1

yes please precede on guiding me with details if possible straight away

pawankumar
Shopify Partner
375 36 64

Hi @kyodong 
Follow these steps
1. Disable dynamic checkout buttons

pawankumar_0-1694186422369.png

Uncheck "Show dynamic checkout buttons" this checkbox
2. Add a custom liquid block

pawankumar_1-1694186467849.png

Add it after Buy buttons block
3. Add this code 

<div class="enquire-me-button-wrapper">
<a class="button button--full-width button--secondary" href="/pages/contact">
            <span>Enquire me</span>
 </a>
          
</div>

in custom liquid block
4. Change href to your contact page and change "Enquire now" text to your desired text
Thanks!

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com


Best regards,
Pawan
kyodong
Excursionist
22 2 1

It worked except I get this now the inquire button looks too similar to 'Size' 'Material' & 'Status' ones, making it look like it might now be a button, do you know how to make it more like special button so it looks different with rest of them. I think looking square button (perhaps sharper edged ) with double border around it might make it distinguishable  do you think thats possible?

red dot.jpg

red dot.jpg

pawankumar
Shopify Partner
375 36 64

Paste this code in section's custom css

.enquire-me-button-wrapper .button::before,
.enquire-me-button-wrapper .button::after {
  border-radius: initial;
}

pawankumar_0-1694234976713.png

Click product information and in the bottom you will find custom css
Final button will look like this after adding that css

pawankumar_1-1694235041052.png

Thanks!

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com


Best regards,
Pawan
kyodong
Excursionist
22 2 1

I get this and see that the code is not applying as it should be according to your screenshot. Or have I possibly forgot something in the code?

 

Mine shows like this right now:

error-jpg.jpg

pawankumar
Shopify Partner
375 36 64

You have put it in wrong place.

In liquid code you have to put previous code of button and save it 

After that, you have to click product information section and in the bottom of the section, there is custom css section where you have to put css code.

Both 2 are separate places, one to put button code while other is to put custom css

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com


Best regards,
Pawan
kyodong
Excursionist
22 2 1

Thank you I found the proper place and had it fixed.

But now that I acheive this look, I see that the buttons tract more attention than the product/item image it self for it's got shape and filled in colors. 

 

Could you please look at my attachment? 😭

 

*Is there possibly, any way to make it look like as the attached?

Because that will be so much better looking on my site and I'd have nothing more to fix if I could achieve this type of look:.

 

block button style change.jpg

pawankumar
Shopify Partner
375 36 64

This is an accepted solution.

pawankumar_0-1694349929000.png

Please replace custom css with 

.enquire-me-button-wrapper .button::before,
.enquire-me-button-wrapper .button::after {
  border-radius: initial;
}
.enquire-me-button-wrapper .button::before {
  outline: 2px solid grey;
  outline-offset: 2px;
}

Final result will be as i shown in screenshot 
Thanks!

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com


Best regards,
Pawan
kyodong
Excursionist
22 2 1

everything went as planned thank you so much!

I'm just stuck on how to turn these black blocks to just white with black thin line (just thin single line) with text just black like the attachment.

 

turn buttons to white with black border.jpg

 I've been searching and playing around quite a while under 'Theme settings' > 'Colors' > looking some Scheme options but still was unable to achive it.

 

If this could be done, it will be just cherry on top 😃

kyodong
Excursionist
22 2 1

Any insights anybody?

pawankumar
Shopify Partner
375 36 64

This is an accepted solution.

Please replace custom css (Product information --> custom css) with this 

 

.enquire-me-button-wrapper .button::before,
.enquire-me-button-wrapper .button::after {
  border-radius: initial;
}
.enquire-me-button-wrapper .button::before {
  outline: 2px solid grey;
  outline-offset: 2px;
}
button {
  background: #fff;
  color: #000;
}
button::before,
button::after,
.product-form__input label {
  border-radius: initial;
}

 

It will not replace that green background, That is necessary because it is for selected option, if you will emit that as well then after option selection, it will not be highlighted if option is selected or not.
Final result will be like this after the change:

pawankumar_0-1694531198493.png

Thanks!

 

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com


Best regards,
Pawan
kyodong
Excursionist
22 2 1

Thank you!