FROM CACHE - es_header
Esta comunidad ahora recibe asistencia de una red de pares. El equipo de atención al cliente de Shopify ya no ofrece servicio a esta comunidad. Te animamos a conectar con otros emprendedores y partners para pedir ayuda y compartir tus experiencias. Sigue avisando de asuntos que incumplan nuestro Código de Conducta o contenidos que se deberían eliminar.

Re: Personalizar el código de Buy Button

RESUELTAS

Personalizar el código de Buy Button

donoculto
Curioso(a)
12 0 5

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

Ari
Shopify Staff (Retired)
583 133 89

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

To learn more visit the Shopify Help Center or the Community Blog.

Ver la solución en mensaje original publicado

2 RESPUESTAS 2

Ari
Shopify Staff (Retired)
583 133 89

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

To learn more visit the Shopify Help Center or the Community Blog.

donoculto
Curioso(a)
12 0 5

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.