Add border to Shopify Buy button [Embedded code]

Solved
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

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

Success.

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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
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

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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes