Add border to Shopify Buy button [Embedded code]

Solved
Highlighted
New Member
3 0 0

Hey everyone,

 

I'm having trouble customizing the Shopify Buy Button.
Indeed, I would like to add borders to the shopify "add to car"t button. Unfortunately I am currently a beginner in Javascript / CSS, Hence I face some  code limitations. By observing the attributes of the elements of the embedded code of the buy button I have seen the following properties;

 

- border-color

- border-width

 

However, when I apply these properties on the "Add to cart" button its doesn't generate borders.

Could someone please explain this customization process (Considering the number of unanswered questions about customization, I'm obviously not the only one asking this question )

Thank you 

 

Best regard

A.M

 

0 Likes
Highlighted

Hey A.M

 

Happy to take a look. Likely just some minor CSS magic. Can you either kick over a link to your site or toss in the code you're using? 

We work on Shopify stores to improve, maintain, and build functionality across all store types.
- Reach Out To Us! | hello@storemedics.com
- Visit Our Site! | https://www.storemedics.com

If we helped, leave a Like / Accept Solution
0 Likes
Highlighted
New Member
3 0 0

Hello, thank you for your response,

Here is where I want to add a border:

  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "title": {
        "font-weight": "Arial, sans-serif",
        "color": "#dedede",
        "display": "none"
      },
      "button": {
        "font-size": "18px",
        "font-weight": "bold",
        "padding-top": "15px",
        "padding-bottom": "15px",
        "color": "#000000",
        "border-color": "#ffffff",
        "border-width": "4px",
        ":hover": {
          "color": "#e6e6e6",
          "background-color": "#404040"
        },

The part that is not working are the two lines: 

"border-color": "#ffffff",

"border-width": "4px",

Do you have any idea why ?

0 Likes
Highlighted

This is an accepted solution.

Hello,

Please add below code also

 

"border-style":" solid",

@EasilyMakeIt wrote:

Hello, thank you for your response,

Here is where I want to add a border:

  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "title": {
        "font-weight": "Arial, sans-serif",
        "color": "#dedede",
        "display": "none"
      },
      "button": {
        "font-size": "18px",
        "font-weight": "bold",
        "padding-top": "15px",
        "padding-bottom": "15px",
        "color": "#000000",
        "border-color": "#ffffff",
        "border-width": "4px",
        ":hover": {
          "color": "#e6e6e6",
          "background-color": "#404040"
        },

The part that is not working are the two lines: 

"border-color": "#ffffff",

"border-width": "4px",

Do you have any idea why ?


 

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
New Member
3 0 0

You are my all time favorite super hero!

 

This is perfectly working!

Thank you so much! I hope this will help other person in the future.

0 Likes
Highlighted

Hello 

You are always welcome..

 

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes