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
Solved! Go to the solution
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?
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 ?
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 ?
Hello EasilyMakeIt,
You are always welcome..
Subject | Author | Latest Post |
---|---|---|
Subject | Author | Posted |
---|---|---|
3m ago | ||
4m ago | ||
5m ago | ||
13m ago | ||
16m ago |