Agregar el distintivo de Planet a tu tienda online
Si deseas mostrar a los clientes que los pedidos tienen neutralidad de carbono, puedes agregar el distintivo Planet a la tienda online. Este artículo te guiará en el proceso de agregar el distintivo y personalizar su apariencia.
En esta página
Consideraciones para agregar el distintivo de Planet
Antes de agregar el emblema Planet a tu tienda online, revisa las siguientes consideraciones:
- Debes tener Planet instalado.
- Debes tener una suscripción activa a un plan de Planet.
- Si usas un tema vintage, no podrás personalizar el distintivo de Planet.
Idiomas disponibles
No puedes aplicar tus propias traducciones al distintivo de Planet. Sin embargo, hay una lista de idiomas disponibles a los que se puede cambiar el panel de control de Shopify. Para traducir el distintivo de la aplicación Planet, debes usar un tema que sea compatible con la venta en varios idiomas. Puedes cambiar el idioma del tema predeterminado y agregar otros idiomas para que los clientes puedan seleccionar su idioma preferido.
Agregar el distintivo de Planet a un tema de la Online Store 2.0
Si usas un tema de Online Store 2.0, puedes agregar el distintivo de Planet a cualquier página de tu tienda online directamente desde el editor de temas.
Pasos:
En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.
Desde la página Aplicaciones y canales de ventas, haz clic en Online store.
Haz clic en Abrir canal de ventas.
Haz clic en Temas.
En la sección Tema actual, haz clic en Personalizar.
Selecciona la página donde deseas agregar el distintivo de Planet, como la página de inicio o el carrito.
-
Agrega el distintivo a una sección existente o nueva:
- Para agregar el distintivo a una sección existente, haz clic en Agregar bloque y luego selecciona Planet.
- Para agregar el distintivo a una sección nueva, haz clic en Agregar sección y luego selecciona Planet.
Haz clic en Guardar.
Personalizar el diseño del distintivo de Planet
Si usas un tema de Online Store 2.0, también puedes personalizar la apariencia del distintivo de Planet directamente desde el editor de temas. Estos son los atributos que puedes personalizar:
- color de fondo y borde;
- Visualización del logo de Planet, sección de más información, sección de estadísticas o sección de innovaciones financiadas
- Tamaño del distintivo, márgenes y dimensiones de redondeo de la esquina
Revisa la siguiente tabla para obtener más información sobre los diferentes atributos del distintivo de Planet que puedes personalizar:
| Atributo | Descripción | Opciones de personalización |
|---|---|---|
| Logo de Planet | El logo de Planet se representa como un círculo verde claro con una hoja oscura en el lado inferior derecho. Según el tamaño del distintivo, el logo aparece en la esquina izquierda o superior izquierda del distintivo. | Puedes marcar o desmarcar la casilla de verificación Logo de Planet. |
| Enlace de más información | Si tienes la página Impacto configurada, puedes mostrar el enlace de más información para dirigir a los clientes a ella. Según el tamaño del distintivo, la llamada a la acción de más información aparece como un enlace de más información en la esquina derecha o superior derecha del distintivo. Si no tienes la página Impacto configurada, aparece el texto Tecnología de Shopify Planet. | Puedes marcar o desmarcar la casilla de verificación Mostrar sección "Más información". |
| Mostrar emisiones eliminadas | La opción Mostrar emisiones eliminadas exhibe la cantidad de emisiones de carbono en kg que eliminaste del aire a través de los proyectos que apoyaste con Planet. Dicha opción también expone una comparación de las millas recorridas por un vehículo de gasolina promedio para que los clientes puedan relacionarla con el impacto de envío con neutralidad de carbono que realizaste y para que puedan cuantificarlo. | Puedes marcar o desmarcar la casilla de verificación Mostrar emisiones eliminadas. |
| Mostrar innovaciones financiadas | Cada plan de suscripción ayuda a financiar diferentes empresas y soluciones innovadoras. Según el plan de suscripción, la sección de innovaciones financiadas mostrará ejemplos de los tipos de proyectos que eliminan emisiones de carbono que estás apoyando. | Puedes marcar o desmarcar la casilla de verificación Mostrar emisiones eliminadas. |
Pasos:
En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.
Desde la página Aplicaciones y canales de ventas, haz clic en Online store.
Haz clic en Abrir canal de ventas.
Haz clic en Temas.
En la sección Tema actual, haz clic en Personalizar.
Selecciona una página donde agregaste el distintivo de Planet, como la página de inicio o el carrito.
Desde el menú desplegable, en la sección Aplicaciones, selecciona el bloque de la aplicación Planet.
Aplica las personalizaciones del distintivo de Planet.
Haz clic en Guardar.
Agregar el distintivo de Planet a un tema vintage o personalizado
Si usas un tema vintage o personalizado, deberás editar manualmente el código del tema para agregar el distintivo de Planet.
Pasos:
En el panel de control de Shopify, haz clic en Configuración > Aplicaciones y canales de ventas.
Desde la página Aplicaciones y canales de ventas, haz clic en Planet.
Haz clic en Abrir aplicación.
En la sección de visualización del distintivo de Planet , haz clic en Agregar distintivo.
Copia el siguiente fragmento de código:
<!-- Start of Shopify Planet code snippet --> <link href="https://cdn.shopify.com/shopifycloud/shopify-planet/bundles/latest/snippet.css" rel="stylesheet" type="text/css" media="all"> {%- assign CURRENT_DATE = "now" | date: "%Y-%m-%dT%H:%MZ" -%} {%- assign ACTIVE_UNTIL = shop.metafields.shopify-planet.active-until | date: "%Y-%m-%dT%H:%MZ" -%} <script src="https://cdn.shopify.com/shopifycloud/shopify-planet/bundles/latest/snippet.js" async></script> {% if CURRENT_DATE < ACTIVE_UNTIL or request.design_mode %} {% if block.settings.badgeMode != "buyer_contribution" %} <div class="shopify-planet-banner"> <img src="https://cdn.shopify.com/extensions/77a33867-106a-4608-bb7c-98fa40ed256a/0.25.0/assets/logo.png" alt="Carbon-neutral shipping with Shopify Planet" width="34" height="30" loading="lazy"> <div class="shopify-planet-banner-title-container"> <div class="shopify-planet-banner-title">All deliveries are carbon neutral</div> {% if shop.metafields.shopify-planet.impact-comms-linked %} <div class="shopify-planet-banner-subtitle-link"><a href="/pages/climate-commitment" target="_blank">More info</a></div> {% else %} <div class="shopify-planet-banner-subtitle">Powered by Shopify Planet</div> {% endif %} </div> </div> {% endif %} {% endif %} <!-- End of Shopify Planet code snippet -->-
Ve a uno de los siguientes archivos para agregar el distintivo:
- Para agregar el distintivo a la página del carrito, ve al archivo templates/cart.liquid.
- Para agregar el emblema a una página de producto, ve al archivo templates/product.liquid.
Pega el fragmento de código donde quieras que aparezca el distintivo y, después, haz clic en Guardar.
Haz clic en Vista previa para ver cómo se muestra el distintivo en tu tienda online.