Share
Hacer que su tienda Shopify sea más intuitiva es una excelente manera de convertir más ventas y obtener un mayor número de artículos por pago. Combinado con mostrar sus productos en una lista simple, podemos hacer que la experiencia de agregar al carrito sea tan simple como una operación de un solo clic, sin necesidad de navegar a la página de listado de productos.
Esta modificación puede funcionar en una cuadrícula o visualización de lista y realmente solo necesita algunos cambios para que funcione, además de que es fácilmente extensible. Así que comencemos y maximicemos la monetización de su tienda.!
Aquí hay un ejemplo de lo que puedes crear con esta modificación. Tenemos una tienda que vende monedas conmemorativas, y para facilitar su uso, el usuario puede seleccionar la cantidad de cada moneda y agregar al carrito sin salir de la página..
Esto se logra a través de una llamada AJAX escrita en JavaScript que envía una solicitud a la API de Shopify. Esencialmente, el navegador puede enviar el formulario a través de una solicitud en segundo plano y mantener al usuario en la página.
Para hacer esto, necesitamos modificar el tema de Shopify, así que inicie sesión en su administrador y entre en el Tienda en línea y luego el Temas sección (o para un atajo, presione sol W T).
Ahora haga clic en el ... botón en tu tema y elige Editar HTML / CSS. Dentro de esta sección, mire a la izquierda y haga clic en fragmentos carpeta y luego agregar un nuevo fragmento.
Llama a tu fragmento ajaxify-cart y haga clic Crear fragmento.
Ahora abra este archivo, seleccione todo y copie y pegue el contenido en el ajaxify-cart.liquid Fragmento que se acaba de crear..
Asegúrese Salvar Tus cambios antes de salir. Si desea cambiar el texto del carro de ajaxify, puede mirar el cambio de las cadenas en este archivo como addToCartBtnLabel. Para obtener más información sobre la configuración, lea el archivo léame para el carrito de ajaxify.
Ahora, dentro de la carpeta de diseños, haga clic en el archivo theme.liquid. Encuentra el final
% include 'ajaxify-cart'%
Esto incluirá el ajaxify-cart Fragmento que acaba de agregar a todas las páginas, por lo que el código está disponible cuando lo solicitemos en el siguiente paso..
Puedes incluir el ajaxify-cart y otros fragmentos también dentro de la
Asegúrese de que ha guardado su tema.líquido archivo antes de salir de la ventana.
Ahora que tiene la base para la colocación del carro ajax, podemos agregar algunas modificaciones más para utilizar más funciones de la API de Shopify.
Agreguemos un campo de cantidad al formulario modificando el tema del listado de productos. Mire los archivos de fragmentos de temas para encontrar el formulario para agregar al carrito; Puedes modificarlo como sigue:
Ahora guarde el archivo y eche un vistazo en el navegador, y también tendrá un campo de cantidad en su formulario.
Visite su tienda y vaya a cualquier producto, y si todo ha ido según lo planeado, el botón para agregar al carrito con el campo de cantidad ahora se agregará al carrito sin actualizar la página.
Si esto no funciona, revise los pasos anteriores y busque en la consola de errores de las herramientas de desarrollo web de su navegador para ver si hay errores reportados.
Para mostrar su colección en una lista, necesitaremos algo de CSS para que eso suceda. Modifique el archivo css de su tema y agregue lo siguiente para lograr esto.
Nota: Tenga en cuenta que algunos temas pueden mostrarse de manera diferente al tema que usamos, que es el tema del Pacífico, pero para adaptar este conocimiento a su tema, sepa que el principio básico es agregar un flotador izquierdo; combinado con ajustes de ancho.
.product-list-item-title font-size: 16px; línea de altura: 22px; margen: 5px 0 0; flotador izquierdo; ancho: 50%; .product-list-item-price float: left; ancho: 10%; margin-top: 5px .product-list-item-details form float: left; ancho: 30%;
Para que esto funcione correctamente en dispositivos móviles y de escritorio, deberá usar consultas de medios como las siguientes para eliminar el flotador:
@media (min-width: 1020px) .product-list-item-title-list font-size: 16px; línea de altura: 22px; margen: 5px 0 0; flotador izquierdo; ancho: 50%; color: # 000 .product-list-item-price-list float: left; ancho: 10%; margin-top: 5px .product-list-item-details-list form float: left; ancho: 30%; pantalla solo @media y (min-device-width: 320px) y (max-device-width: 480px) y (-webkit-min-device-pixel-ratio: 2) .product-list-item-title -list font-size: 16px; línea de altura: 22px; margen: 20px 0 0; float: none; .product-list-item .product-list-item-price-list float: none; .product-list-item-details-details-list form float: none; relleno-izquierda: 90px;
Digamos, por ejemplo, que solo desea mostrar los botones dentro de las colecciones, no en su página de inicio. Esto se puede hacer fácilmente agregando un condicional a su archivo de plantilla líquida.
Abra su plantilla y agregue el siguiente condicional donde desea que aparezca el botón Agregar al carrito, por ejemplo, dentro del diseño de la lista de productos donde adjuntamos la cantidad. Añade el % if collection.title% Condicional como en el siguiente código:
% if collection.title%% terminara si %
Puede especificar cualquier criterio que desee en lugar de % if collection.title% Si prefiere verificar otro valor, como si el producto está en stock o qué categoría o etiquetas ha aplicado.
Puede cambiar el CSS de su tema para modificar la visualización del carrito de ajax y ajustarla al contenido de su corazón. Algunas clases útiles para modificar son .carrito de recuento y # carrito-cuenta a: primero.
Para especificar el valor agregado al carrito, también puede modificar el enlace para ver el carrito con las clases #gocart p a, #carro, y .salida em.
Para modificar el recuento total de elementos, mire la .recuento de elementos clase.
Adicionalmente, al final de la ajaxify-cart.liquid Fragmentos son los siguientes colores que puedes editar..
.ajaxified-cart-feedback display: block; línea de altura: 36px; tamaño de letra: 90%; alineación vertical: medio; .ajaxified-cart-feedback.success color: # 3D9970; .ajaxified-cart-feedback.error color: # FF4136; .ajaxified-cart-feedback a border-bottom: 1px solid;
Cambie la alineación, los márgenes y el relleno para que coincida con su tema y obtenga la mejor visualización que pueda para sus usuarios finales.
Recuerde verificar las resoluciones móviles para ver cómo funciona el carro ajax. Es posible que deba agregar algunas consultas de medios para que se muestre bien en todas las pantallas.
Como se mencionó anteriormente, puede usar los siguientes condicionales de medios para verificar esto:
@media (min-width: 1020px) / * Las clases van aquí para pantalla panorámica * / @media only screen y (min-device-width: 320px) y (max-device-width: 480px) y (-webkit- relación dispositivo-píxel mínimo: 2) / * Las clases van aquí para dispositivos móviles * /
Por lo tanto, ahora tiene un componente de carrito de compras ajaxified en su tienda, lo que significa que el flujo de trabajo de compras está algo simplificado para el usuario final. Con suerte, esto dará lugar a más conversiones. En combinación con la visualización de sus productos en una lista con la configuración de cantidad, la probabilidad de un pedido mayor ha aumentado algo.
Para los sitios que ofrecen consumibles a menudo comprados y aquellos que intentan ofrecer una amplia gama de compras múltiples en una sola compra, el carrito de ajaxify funciona muy bien.
En el futuro, es posible que desee agregar más elementos ajax a su sitio. Si es así, su primer punto de referencia sería la API de Shopify y desarmar la fuente provista para el carrito de compras (ajaxify-cart.liquid) para mirar más de cerca cómo se hacen las llamadas.
Se requiere una comprensión básica de JavaScript y AJAX para hacer esto, pero no te preocupes si eres un recién llegado, es realmente muy básico.
Todo el procesamiento para una llamada AJAX se puede encontrar en el $ .ajax sección del archivo, y más información sobre cómo funciona esto se puede encontrar en el sitio web de jQuery.
Espero que disfrute modificando sus tiendas y aumentando sus ventas con estos nuevos conceptos.!
Accentsconagua