Customise embedded buy button + options

Solved
Tourist
5 1 0

I would like to know if it's even possible and if so, how to make the following changes to the embedded buy button code so that I can achieve my desired layout/design as shown below. I am capable of making changes in the code, would just need direction as to what to add/edit:

  • Float the options dropdown and buy button with quantity 
  • Add text to the options dropdown 'Select your size'
  • Change the border of the options dropdown and the quantity field to black with no border radius
  • Change the arrow on the options dropdown to black
  • Increase padding on the options dropdown by a few pixels so it matches the height of the Buy now button
  • Ability to use the same font as I am using on my website (it isn't a Google font)

 

desired_layout.pngThanks in advance for all tips and assistance! :)

0 Likes

Hello
Can you share your site url? so that i can check and let you know.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
5 1 0

Thanks, I made a test page with just the component on it :)

 

https://www.siaeva.com/uncategorized/test/

0 Likes

Hello ,
You want show like this shown in below image....

border-radius.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
5 1 0

Hi! No, that is not correct. I want it as per the image I shared above :)

0 Likes
Tourist
5 1 0

FYI I took down the URL now because I don't want it to be visible to the outside world.

0 Likes

Success.