Personalizar el código de Buy Button

RESUELTAS
donoculto
Curioso(a)
6 0 3

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.

 

1 SOLUCIÓN ACEPTADA

Soluciones aceptadas
Ari
Shopify Staff
257 26 41

Éxito.

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:

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?

Ari | Social Care @ Shopify 
 - ¿Te resultó útil mi respuesta? Dale Me gusta para hacérmelo saber 
 - ¿Resolvimos tu pregunta? Dale a Aceptar como solución
 - Para saber más visita el Centro de ayuda de Shopify o nuestro Blog de Shopify

Ver la solución en mensaje original publicado

2 RESPUESTAS 2
Ari
Shopify Staff
257 26 41

Éxito.

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:

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?

Ari | Social Care @ Shopify 
 - ¿Te resultó útil mi respuesta? Dale Me gusta para hacérmelo saber 
 - ¿Resolvimos tu pregunta? Dale a Aceptar como solución
 - Para saber más visita el Centro de ayuda de Shopify o nuestro Blog de Shopify

Ver la solución en mensaje original publicado

donoculto
Curioso(a)
6 0 3

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.