Fast Tags | Configuración Fast Tags

💡 Fast Tags es una potente función disponible para Shopify y WooCommerce que mejora tu tienda online. Las Fast Tags ayuda a impulsar la conversión de tu sitio web mostrando la velocidad de tu servicio de entrega, infundiendo confianza en tus clientes. 💨

¿No sabe qué es Fast Tags ? Descubra la función

Aprende a desbloquear esta valiosa función en este artículo.

1. Fast Tags activación
   1. Activar Fast Tags en Bigblue
      1. Elija el método de visualización por defecto Fast Tags
      2. Elige tu configuración en Fast Tags y personaliza tu insignia
      3. [Sólo Woocommerce] Instalar el plugin
2. [Avanzado] Configuración manual de la colocación

1. Fast Tags activación

a. Activar Fast Tags en Bigblue

i. Elija el método de visualización por defecto Fast Tags

• Para activar Fast Tags, en primer lugar, vaya a la aplicación Bigblue y visite la configuración de integración de su tienda
• En los ajustes de Fast Tags , haga clic en "Editar".

• A continuación, en la página de configuración Fast Tags , seleccione el método de visualización que prefiera

• Recomendación de Bigblue💙: empieza con la colocación "Encima del botón "Añadir al carrito"", luego configura la insignia (preferencias de ETA y marca). Si no te gusta la visualización, cambia a "Colocación manual", lo que requiere editar el tema de tu tienda (Configuración avanzada).

Bigblue ofrece dos maneras de mostrar los Fast Tags en su tienda:

Colocación automática

La colocación automática no requiere experiencia en desarrollo web: active Fast Tags con un solo clic directamente en los ajustes de Bigblue. El distintivo se coloca automáticamente antes del botón "Añadir al carrito" en las páginas de productos.

Colocación manual

La colocación manual permite a los usuarios con experiencia en desarrollo web ajustar la ubicación de Fast Tag, colocándola en cualquier lugar de la página del producto que deseen.

La colocación manual le permite mostrar los Fast Tags libremente en su tienda, ofreciendo una personalización adicional:

• Elija entre 2 tipos de insignias (sólo Shopify)
  • Insignia de producto: Ofrecer una promesa de entrega para un producto específico.
  • Insignia del carrito: Ofrecer una promesa de entrega basada en todos los productos del carrito.
• Personaliza la visualización de las insignias según tus preferencias
  • En Shopify, puedes mostrar las insignias de Fast Tags en tus páginas exactamente como quieras, permitiéndote tener una disposición única para cada página.
  • En WooCommerce, los Fast Tags se pueden mostrar en las páginas de productos, en las listas de productos y en el carrito.

⚠️ Para colocar Fast Tags manualmente, Bigblue recomienda que los comerciantes obtengan ayuda de un desarrollador, o que tenga experiencia en la edición de la plantilla de su tienda.

• En Shopify
• En WooCommerce

ii. Elige tu configuración Fast Tags y personaliza tu insignia

Después de elegir la ubicación de la insignia, en la misma página, puede elegir lo que desea mostrar. Además, la insignia es personalizable y puede coincidir con la marca de su sitio web.

• Indicación ETA
  • Muestre la fecha de entrega estimada más rápida: insista en la rapidez con un distintivo condensado que muestre una fecha prometida.
  • Muestre todas las fechas de entrega estimadas: Muestra múltiples métodos y destaca tu flexibilidad de entrega. Muestre una fecha estimada para cada tipo de envío: Estándar, Recogida o Exprés.
• Fuente ETA
  • Insignia condensada: puede decidir incluir o excluir los métodos Exprés o Recogida del cálculo de la fecha más rápida. Utilícelo para mostrar una entrega ultrarrápida o para gestionar las expectativas con una fecha prometida menos agresiva.
  • Todas las ETA: puede decidir qué métodos mostrar.
• Indicador de existencias
  • Si selecciona esta opción, aparecerá el siguiente mensaje en la placa: "En stock".
  • Nota: el distintivo completo sólo aparece para los productos en stock. Así pues, esta mención, y la totalidad de fast tag, solo se muestra para los productos con existencias en el almacén (y no para los pedidos pendientes/prepedidos).
• Cuenta atrás para el envío
  • La opción de cuenta atrás de envío ('Haz tu pedido en 15 h 32 min...') mostrará el mensaje durante todo el día. Nota: La parte de la frase se oculta por encima de 24h para seguir empujando a la conversión
• Progreso del envío gratuito
  • Promocione el valor mínimo de su cesta mostrando esta información, ¡y aumente sus ventas!

Vaya a la sección inferior "Branding" para personalizar su insignia.

• Icono: mostrar o no
• Acento y color de fondo
• Esquinas: redondeadas o no

• Elige tu configuración
• Haga clic en "Guardar" en la parte inferior de la página.

iii. [Sólo Woocommerce] Instalar el plugin

En WooCommerce

Colocación automática en las páginas de productos

Para utilizar este método, instale o actualice el plugin Bigblue WooCommerce. Una vez activada la colocación automática, no se requiere ninguna acción adicional. El Fast Tags debe aparecer en las páginas de productos de su sitio después de unos segundos.

El tag inyectado se actualiza automáticamente cuando se selecciona una variación de producto diferente.

2. [Configuración manual

En Shopify

Colocación manual mediante edición de código y personalización de temas

Para añadir manualmente el Fast Tag en Shopify, por favor edite el Tema de su Tienda Online. Tienes que seguir dos pasos:

• Edite el código de su tema para definir el bloque Bigblue Fast Tag .
• Personalice su tema para inyectar este bloque donde desee mostrar un Fast Tag.

Producto Fast Tag - Edite el código de su tema

Para añadir un bloque Bigblue Fast Tag a sus Plantillas de temas de productos, vaya a Tienda en línea > Temas, haga clic en los puntos y en Editar código

En su página de producto .líquido  archivo, - denominado principal-producto.liquido  o cualquier otra cosa, probablemente similar, - añada los siguientes trozos de código:

1. En {%- for block in section.blocks -%}  añada lo siguiente tipo.bloque  caso:

{%- when 'bigblue_fast_tag' -%}
  <bigblue
    data-component="fast-tag-product"
    data-product="{{ product.id }}"
    data-variant="{{ product.selected_or_first_available_variant.id }}"
  ></bigblue>

2. En virtud de la {% schema %}  defina el bloque fast tag para sus páginas de productos:

{
  "type": "bigblue_fast_tag",
  "name": "Bigblue Fast Tag",
  "settings": []
},

3. Guardar los cambios

Producto Fast Tag - Personalice su tema

Para añadir bloques Bigblue Fast Tag , vaya a Tienda en línea > Temas, haga clic en Personalizar

1. Seleccione la Plantilla de Tema de Producto que desea modificar

   

2. A la izquierda, en la parte Producto(información), haga clic en Añadir bloque y elija Bigblue Fast Tag

   

3. Arrástrelo y suéltelo donde desee que aparezca Fast Tag

4. Guarde los cambios y vaya a la página de su producto: ¡debería ver un Fast Tag!

   

   🎉 Has inyectado correctamente el Fast Tag en las páginas de Productos.

Fast Tag ¿no aparecen inmediatamente? Tanto Shopify como Bigblue disponen de sistemas de caché para mostrar la fast tag más rápida o la inyección de todas las ETAs. Para lograr un rendimiento óptimo, estas cachés pueden necesitar tiempo para expirar normalmente después de esperar hasta 10 minutos. Sin embargo, en la mayoría de los casos, 5 minutos son suficientes. Si el problema persiste y sigue sin ver Fast Tag después de 10 minutos, siga nuestra guía de solución de problemas.

Opcionalmente, también puede utilizar CSS personalizado para editar el icono Fast Tags

Véase

Carrito Fast Tag - Edite el código de su tema

Cart Theme suelen ser objeto de personalizaciones más específicas, es frecuente tener sólo unas pocas secciones definidas en el código, que no admiten la adición de bloques personalizados. Por lo tanto, le animamos a que se ponga en contacto con el equipo de desarrollo de su tema para identificar las opciones adecuadas. .líquido  archivo para actualizar en el código del tema, algo así como cart_main.liquid  o pagina_carrito.liquid  (no exclusivo).

En ese archivo, puede añadir el siguiente código donde desee que aparezca Bigblue Fast Tag :

<bigblue data-component="fast-tag-cart"> </bigblue>

En WooCommerce

Colocación manual en las páginas de productos

Para añadir manualmente Fast Tags a tu tienda, debes editar los archivos PHP que generan las páginas de su sitio. En los casos más comunes, están disponibles en  /var/www/html/wp-content/plugins/woocommerce/templates .

• Para mostrar un Fast Tag en WooCommerce, añada el siguiente fragmento de código en el código HTML, sustituyendo YOUR_PRODUCT_ID por un ID de producto, y YOUR_VARIATION_ID, si existe, por un ID de variación:

<bigblue data-component="fast-tag-product" data-product="YOUR_PRODUCT_ID" data-variant="YOUR_VARIATION_ID"></bigblue>

• Dependiendo de cómo planees inyectar este snippet, puedes beneficiarte de los globales de WooCommerce para inferir automáticamente el ID del producto y el ID de la variante de la página del producto. Por ejemplo, al editar short-description.php para inyectar una insignia en un producto con o sin variantes:

<div class="woocommerce-product-details__short-description">
    <?php echo $short_description; ?>
    <?php
    $product = wc_get_product();
    if ($product) {
        if ( $product->is_type( 'variable' ) ) {
            $childrens = $product->get_children();
            if ($childrens) {
                $defaultvariation = "";
                foreach ($childrens as $productChild) {
                    $defaultvariation = wc_get_product($productChild)->get_variation_id();
                }
                echo "<bigblue data-component=\\"fast-tag-product\\" data-product=\\"".$product->get_id()."\\" data-variant=\\"".$defaultvariation."\\"></bigblue>";
            }
            wc_enqueue_js("
                $( 'form.variations_form' ).on('show_variation', function(_, data){
                    var updatedVariation = data.variation_id.toString()
                    if( updatedVariation != \\"\\" ) {
                        var tags = document.body.querySelectorAll('bigblue[data-component=\\"fast-tag-product\\"]')
                        if (tags !== undefined){
                            for (var i=0; i < tags.length; i++) {
                                if (tags[i].getAttribute(\\"data-product\\") === \\"".$product->get_id()."\\") {
                                    tags[i].setAttribute(\\"data-variant\\", updatedVariation);
                                }
                            }
                        }
                    }
                });
            ");
         } else {
            echo "<bigblue data-component=\\"fast-tag-product\\" data-product=\\"".$product->get_id()."\\"></bigblue>";
         }
    }
    ?>
</div>

• Pónte en contacto con tu administrador para obtener más detalles.