Personalizar el código de Buy Button

[donoculto]

Hola,

¿Alguien por favor me podría indicar si puedo personalizar el código que me da Shopify desde el BUY BUTTON? Es decir, quiero cambiar el orden de los elementos y por ejemplo, añadir el botón "AGREGAR AL CARRITO" junto al de COMPRAR. 

< centro > 
< div id = "prxxxxxxxxxxx" > < / div > 
< script type = "text / javascript" > 
/ * <! [CDATA [* / 
( function  ( )  { 
var scriptURL =  'https: //sdks.shopifycdn .com / buy-button / latest / buy-button-storefront.min.js ' ; 
if  ( ventana . ShopifyBuy )  { 
if  ( ventana . ShopifyBuy . UI )  { 
ShopifyBuyInit ( ); 
}  else  { 
loadScript ( ) ; 
} 
}  else  { 
loadScript ( ) ; 
} 
función  loadScript ( )  { 
var script = documento . createElement ( 'secuencia de comandos' ) ; 
guión . async  =  verdadero ; 
guión . src=scriptURL ; 
( documento . getElementsByTagName ( 'cabeza' )[ 0 ]  || documento . getElementsByTagName ( 'cuerpo' ) [ 0 ] ) . appendChild ( secuencia de comandos ) ; 
guión . onload = ShopifyBuyInit ; 
} 
función  ShopifyBuyInit ( )  {
 cliente var = ShopifyBuy . buildClient ( { 
dominio : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx , 
storefrontAccessToken : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' , 
} ) ; 
ShopifyBuy . UI . onReady ( cliente ) . luego ( function  ( ui )  { 
ui . createComponent ( 'product' ,  { 
id :  'xxxxxxxxxxxxxxxx' , 
node : document . getElementById ( 'product-component-xxxxxxxxxxxxxxxx' ) , 
moneyFormat :  '% 24% 7B% 7Bamount_with_comma_separator% 7D% 7D ', 
opciones :  { 
"product" :  { 
"styles" :  { 
"product" :  { 
"@media (min-width: 601px)" :  { 
"max-width" :  "calc (25% - 20px)" , 
"margin -left " :  " 20px " , 
" margin-bottom " :  " 50px " 
} , 
" carrusel-button " :  { 
" display " :  " none " 
} 
} , 
" title " :  { 
" color " : "# 000000" , 
"espacio entre letras" :  "2px",
"font-weight": "100",
"font-family": "Acumin_Variable_Concept, sans-serif",
"font-size": "16px"
},
"button": {
"font-family": "Avant Garde, sans-serif",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
}
},
"price": {
"color": "#000000"

},
"compareAt": {
"color": "#000000"
},
"unitPrice": {
"color": "#000000"
}
},
"buttonDestination": "checkout",
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"text": {
"button": "COMPRAR"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-family": "Avant Garde, sans-serif",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
}
},
"title": {
"font-family": "Acumin_Variable_Concept, sans-serif",
"font-weight": "bold",
"font-size": "26px",
"color": "#4c4c4c"
},
"price": {
"font-family": "Acumin_Variable_Concept, sans-serif",
"font-weight": "normal",
"font-size": "18px",
"color": "#4c4c4c"
},
"compareAt": {
"font-family": "Acumin_Variable_Concept, sans-serif",
"font-weight": "normal",
"font-size": "15.299999999999999px",
"color": "#4c4c4c"
},
"unitPrice": {
"font-family": "Acumin_Variable_Concept, sans-serif",
"font-weight": "normal",
"font-size": "15.299999999999999px",
"color": "#4c4c4c"
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"styles": {
"button": {
"font-family": "Acumin_Variable_Concept, sans-serif",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
}
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
},
"popup": false
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Acumin_Variable_Concept, sans-serif",
"background-color": "#000000",
":hover": {
"background-color": "#000000"
},
":focus": {
"background-color": "#000000"
}
}
}
} 
} , 
} ) ; 
} ) ; 
} 
} ) ( ) ; 
/ *]]> * / 
< / script > 
< / center >

Gracias.

[Ari · Accepted solution]

Hola @donoculto,

Gracias por publicar en el foro.

He estado revisando los cambios que deseas hacer en el Botón de compras y he visto que estos son cambios avanzados. Lamentablemente, no disponemos de las herramientas para poder ofrecerte soporte con ello, pero me gustaría facilitarte información y recursos que podrán serte útiles.

He realizado una búsqueda y he encontrado algunos artículos y enlaces donde encontrarás detalles sobre como realizar algunas personalizaciones en este botón y otros detalles de interés:

• Editar o eliminar un Botón de compras o carrito incrustado
• Crear un botón de compras
• Customization Options
• Preguntas frecuentes sobre el Botón de compras

Si lo deseas, podrás contratar a uno de nuestros Expertos de Shopify para que te ayude a configurar este código y ver cómo realizar los cambios que deseas. Para poder encontrar un experto, solo tienes que realizar una búsqueda en esta página.

También tendrás la opción de publicar tu consulta nuevamente en nuestro Foro en Inglés donde otros usuarios especializados o que se hayan encontrado en la misma situación, podrán darte consejo y asesoramiento más concreto. En este enlace encontrarás algunas discusiones relacionadas con el Buy button.

Espero que estas sugerencias te sirvan de ayuda. Aparte de estos, ¿hay alguna otra consulta que quieras que aclare por ti?

[donoculto]

Gracias por la respuesta Ari.

Sí, investigando no se puede cambiar muchas cosas, de hecho, si se interviene el CSS del Js NO toma los cambios. 

Así que, tomo tu respuesta como la solución.

Gracias.