¿Cómo decorar la página de la tienda del centro comercial JD.COM?
El funcionamiento de decoración de cada página es exactamente el mismo. Aquí tomamos la decoración de la "página de inicio de la tienda" como ejemplo para ilustrar.
Principios que se deben seguir para la decoración de páginas:
Primero agregue el diseño, luego agregue módulos al diseño, luego configure el contenido del módulo y finalmente publique ***5 campo de golf.
1. Explicación de los términos de introducción del diseño
Diseño: se refiere a dividir la página en bloques con diferentes estructuras. Todo el contenido decorativo de la página debe colocarse en el diseño de cada página; tener múltiples diseños.
Actualmente, el sistema proporciona 12 diseños para selección y combinación.
Instrucciones especiales:
Habrá un diseño de banner en la parte superior de cada página (no es necesario eliminarlo ni moverlo). Los módulos colocados en este diseño aparecerán automáticamente en todas las páginas. de la tienda.
Se recomienda que este diseño solo coloque letreros de tienda, navegación en la tienda y banners de promoción principal. Si solo desea mostrar el contenido en la página actual, agregue un nuevo diseño manualmente antes de agregar módulos; . No utilice el diseño predeterminado.
2. Agregar diseño
2.1 Lista de diseños disponibles Haga clic en el botón Agregar diseño en la esquina superior izquierda de la página de decoración para abrir el siguiente selector:
A * * * tiene 12 diseños para elegir.
2.2 Instrucciones de uso
Después de hacer clic en Agregar, el diseño se mostrará en la parte inferior de la página y deberá moverse hacia arriba manualmente si es necesario.
La página visual agregada muestra "Diseño de banner (990)":
Cuando el mouse se mueve al área de diseño, aparecerá el nombre, el tamaño y el funcionamiento del diseño, como se muestra. en la figura anterior:
Explicación de términos
Banner (990): es el nombre del diseño, lo que indica que el diseño es un diseño de banner con un ancho de 990 px.
Cruz roja: indica la operación de eliminación del trazado. Cuando elimina un diseño, su contenido también se elimina y no se puede restaurar. Así que opere con precaución.
Flecha verde: indica que el diseño se puede mover hacia arriba y hacia abajo.
Al repetir las operaciones anteriores, podemos agregar múltiples diseños en diferentes formatos a la página web actual según el propósito del diseño, como agregar siete diseños a una determinada página, como se muestra en la siguiente figura:
Nota:
Después de agregar el diseño, se muestra como un cuadro de puntos. Cada fila del cuadro de puntos es un diseño independiente. La imagen de arriba elige un diseño de izquierda a derecha, que a menudo se usa para colocar categorías a la izquierda y productos recomendados a la derecha.
Puede optar por utilizar 1 o más diseños según sus propias ideas de diseño; se recomienda que el número de diseños utilizados no exceda de 10.
3. Introducción a la plantilla
Seleccionar un diseño equivale a establecer un contorno y un marco para la decoración, y luego colocaremos el contenido en el marco.
Explicación del término
Módulo de funciones: las funciones del sistema que proporcionan algunos efectos especiales se denominan módulos de funciones.
Actualmente, el sistema cuenta con cinco categorías principales de módulos funcionales.
Lista de módulos disponibles
En la esquina inferior izquierda de cualquier diseño, hay un botón de operación llamado "Agregar módulo", que aparecerá como se muestra a continuación:
Desde El directorio y el nombre del módulo se pueden ver en la imagen de arriba.
La imagen de arriba es el "Módulo de tienda básico". Hay cuatro módulos funcionales en este directorio:
Visualización de paginación de productos: si tiene M productos y configura 20 por página, entonces habrá paginación M/20. Haga clic en el número de página directamente para ver la lista de productos en la página correspondiente; los productos en cada página se pueden ordenar por volumen de ventas, precio y reseñas positivas.
De forma predeterminada, los SKU se ordenan de último a temprano. Puede ajustar la clasificación predeterminada cambiando la plantilla.
Categoría de Producto: Este módulo se utiliza para mostrar las categorías de productos en la tienda.
Búsqueda en tienda: Este módulo es un cuadro de búsqueda en tienda, que puedes colocar en la ubicación adecuada según los requisitos de diseño.
Resultados de búsqueda en tienda: Como su nombre indica, se utiliza para mostrar resultados de búsqueda. Este módulo está predeterminado en la "Página de resultados de búsqueda en la tienda" de forma predeterminada. No lo elimine a menos que se solicite específicamente.
El segundo directorio es el siguiente:
Como se puede ver en la imagen de arriba, hay dos módulos en este directorio:
Ranking de ventas: utilizado para mostrar Una lista de ventas de artículos en la tienda. El valor predeterminado es el top 10.
Recomendación de producto: este módulo se utiliza con mayor frecuencia, como "Más vendidos", "Recomendaciones del administrador de tienda", "Recomendaciones clave", etc.
Grupo de marcas: Solo disponible para vendedores externos. Los comerciantes pueden ingresar los productos que participan en la compra del grupo de marcas a través del SKU ID en la "Configuración" de este módulo.
El tercer directorio es el módulo "Store Marketing", como se muestra en la siguiente figura:
Como se puede ver en la figura anterior, el directorio * * * tiene cuatro módulos:
Área de contenidos personalizados: también conocida como “editor HTML”, es también uno de los módulos más utilizados en tiendas de decoración. Actualmente, puedes cargar imágenes y escribir código para contenido personalizado. Si sabes algo sobre dreamweaver, html, CSS DIV, usar este módulo puede hacer que tu decoración sea más deslumbrante.
Navegación: Es fácil de entender, basta con introducir una palabra clave y configurar una URL de enlace.
Carrusel de reproducción: al editar los clips HTML y los colores de fondo que deben rotarse, puede lograr el efecto de carrusel de los clips HTML.
A continuación, mire el cuarto directorio "Relacionado con la empresa". La captura de pantalla es la siguiente:
Como se puede ver en la imagen de arriba, el directorio contiene tres módulos:
Introducción a la tienda: un módulo que muestra contenido de introducción de la marca.
Anuncio de tienda: módulo que muestra información de anuncios de tienda.
Módulo de letreros de tiendas: módulo que muestra el contenido de los letreros de las tiendas.
A continuación, observe el quinto directorio "Relacionado con la empresa". La captura de pantalla es la siguiente:
Como puede ver en la imagen de arriba, este directorio contiene 1 módulo.
Detalles coincidentes: muestra los productos coincidentes en la compra coincidente, ingresa la identificación coincidente en "Configuración" y coloca la información coincidente.
Durante la decoración, puede agregar uno o más de los 15 módulos anteriores según el diseño, y el mismo módulo se puede usar varias veces en una página.
4. Agregar módulo
4.1. Agregar módulo "Productos de visualización de página". 4.1.1 Agregar proceso de operación.
Seleccione el diseño del módulo que desea agregar, por ejemplo:
Haga clic en el botón Agregar módulo, busque el módulo de destino y haga clic en Colocar.
Después de colocar el módulo, puede modificarlo y mejorar el contenido, como se muestra a continuación:
4.1.2 Configuración
Haga clic en la configuración del módulo y Aparecerá el siguiente panel de operación:
Como se muestra arriba, la operación de máscara está seleccionada de forma predeterminada.
4.1.3 Skin
Explicación del término
Skin: se utiliza para embellecer el borde y la periferia del módulo, funciones detalladas.
Descripción:
Selección de máscaras: El sistema tiene preestablecidos 2 conjuntos de máscaras, que se pueden seleccionar rápidamente para su uso.
Barra de título: se utiliza para configurar el funcionamiento de la máscara en el área de título del módulo.
Área de contenido: se utiliza para configurar el funcionamiento del skin en el área de contenido del módulo.
Barra inferior: se utiliza para configurar el funcionamiento de la piel de la zona más baja del módulo.
4.1.4 Plantillas
Cada sistema de módulos está preestablecido con 1 o más plantillas. Al cambiar las plantillas, la apariencia de visualización del módulo se puede cambiar instantáneamente:
<. p> Descripción:Las plantillas * * * se dividen en plantillas utilizadas recientemente, mi creación y del sistema, que tienen los siguientes significados respectivamente:
Usadas recientemente: Las plantillas utilizadas más recientemente son colocados en el interior, no es necesario encontrarlos. Puede seleccionar rápidamente.
Mis creaciones: Las plantillas que creas se colocan en su interior.
Plantillas de sistema: plantillas proporcionadas por desarrolladores oficiales o de terceros.
4.1.5 Etiqueta
Explicación del término
Pestaña: se refiere a la función de agregar hipervínculos, que se muestra al lado del título del módulo.
El uso de la pestaña es el siguiente:
Instrucciones de uso:
Ingrese el "Texto del hipervínculo" y el "Sitio web" como se muestra arriba, luego haga clic en Agregar para agregar más y, finalmente, haga clic en Actualización por lotes y, finalmente, recuerde Haga clic en Guardar. Una vez publicada la página, puede ver el efecto y luego hacer clic en actualizar para ver el efecto.
4.2 Agregar módulo "Categoría de producto"
4.2.1 Agregar proceso de operación
Seleccione el diseño al que desea agregar el módulo y luego haga clic en Botón "Agregar módulo":
Seleccione el módulo "Categoría de producto" y haga clic en "Colocar":
La visualización después de la colocación es la siguiente:
Haga clic en el configuración detrás del nombre del módulo para mejorar el contenido del módulo. Cambie el efecto de visualización.
Configuración
Al hacer clic en Configuración, se muestra lo siguiente:
La máscara está seleccionada de forma predeterminada.
Skin
Misma operación que 4.1.3.
Plantilla
Igual que 4.1.4
Pestaña 4.2.5
Igual que 4.1.5
4.3 Agregar el módulo "Búsqueda en la tienda"
4.3.1 Agregar proceso de operación
Seleccione el diseño donde desea agregar el módulo y luego haga clic en Agregar módulo en la parte inferior izquierda esquina. Un ejemplo es el siguiente:
Después de hacer clic en Agregar módulo, busque el módulo "Búsqueda en la tienda" en el panel de operación emergente y haga clic para cargar:
La visualización predeterminada después La ubicación es la siguiente:
Como se puede ver en la imagen de arriba, este módulo se encuentra en "Visualización paginada del producto".
Explicación del término
Arrastra y mueve la plantilla: Mueve el ratón hasta el módulo y pulsa el botón izquierdo. Sin soltar el botón izquierdo, mueva el mouse simultáneamente para mover el módulo a una nueva posición, como intercambiar posiciones hacia arriba y hacia abajo.
En este momento, use el mouse para seleccionar el "Módulo de búsqueda en la tienda", presione el botón izquierdo y arrastre el mouse hacia arriba. Cuando se mueva a la posición de destino, suelte el botón izquierdo del mouse y la plantilla se podrá mover hacia la parte superior (de la misma manera, también se puede mover hacia abajo, a través de diseños, etc.), de la siguiente manera:
Suelta el ratón:
Puedes mover el módulo hacia arriba y hacia abajo. Por supuesto, el movimiento de módulos no se limita a los diseños, sino que también se puede mover hacia adelante y hacia atrás entre diseños.
Haga clic en la configuración después del nombre del módulo para modificar el contenido.
Configuración
Como se muestra en la imagen de arriba, la máscara está seleccionada de forma predeterminada.
Configuración
Explicación del término
Configurar palabra clave predeterminada: Puede establecer un término de búsqueda, que se mostrará en el cuadro de búsqueda de forma predeterminada.
Configurar palabras recomendadas populares: puede configurar 3 palabras recomendadas para facilitar a los usuarios la búsqueda directa sin entrada manual.
Filtrado de precios: después de abrir, los usuarios pueden buscar sus productos en la tienda en función de N yuanes y solo de M yuanes.
Piel
El funcionamiento es el mismo que en 4.1.3.
Plantilla
El funcionamiento es el mismo que en 4.1.4.
Actualmente, el sistema cuenta con dos plantillas preestablecidas. Las capturas de pantalla son las siguientes:
4.3.6 Pestaña
El funcionamiento es el mismo que 4.1.5.
4.4 Agregar módulo "Resultados de búsqueda en tienda"
4.4.1 Agregar proceso de operación
El módulo "Resultados de búsqueda en tienda" está preestablecido en " Resultados de búsqueda en la tienda" como página predeterminada. Si no hay ninguna necesidad especial, no lo elimine.
El sistema preestablece la captura de pantalla de la posición de visualización de este módulo de la siguiente manera:
Haga clic en la decoración de la página para mostrar la siguiente manera:
Cuando el usuario hace clic en botón de búsqueda y muestra la búsqueda de este módulo. Si se elimina el módulo, los resultados de la búsqueda no se mostrarán. Tenga cuidado y no elimine ni mueva este módulo sin confirmación.
Por supuesto, también puedes configurar el módulo; por ejemplo, haz clic en Configuración después del nombre del módulo en la imagen de arriba.
Configuración
La visualización predeterminada es la siguiente:
Como se muestra arriba, la máscara está seleccionada de forma predeterminada.
Piel
El funcionamiento es el mismo que en 4.1.3.
Plantilla
El funcionamiento es el mismo que 4.1.4.
Pestaña 4.4.5
El funcionamiento es el mismo que en 4.1.5.
4.5 Agregar módulo "Ranking de ventas"
4.5.1 Agregar proceso de operación
Seleccione el diseño del módulo de ranking de ventas que se agregará, por ejemplo:
Haga clic para agregar un módulo, busque el módulo "Clasificación de ventas" en el panel de operaciones abierto y haga clic para colocarlo.
Después de colocar el módulo, el efecto de visualización predeterminado es el siguiente:
Haga clic en Configuración para configurar el contenido del módulo.
Configuración
Haga clic en Configuración para abrir el panel de operaciones. El valor predeterminado es "piel".
Piel
El funcionamiento es el mismo que en 4.1.3.
Plantilla
El funcionamiento es el mismo que 4.1.4.
Tab
El funcionamiento es el mismo que 4.1.5.
4.6 Agregar módulo "Recomendación de producto"
4.6.1 Agregar proceso de operación
Seleccione el diseño del módulo a agregar, por ejemplo:
Luego haga clic en Agregar módulo, busque el módulo "Recomendación de producto" en el panel de operación emergente y haga clic en Cargar:
Después de colocar el módulo, el efecto de visualización predeterminado es el siguiente:
Haga clic después del nombre del módulo Configuración, contenido adicional.
Configuración
De forma predeterminada, haga clic en Configuración para abrir la configuración.
Configuración
Haga clic en Configuración para abrir el siguiente panel de operación:
Explicación del término
Entrada de ID: ingresando el SKU de un lote de mercancías. Operaciones de producto recomendadas.
Filtrar entrada: se refiere a la operación de ingresar SKU de productos en lotes en las categorías 1, 2 y 3 para recomendar productos.
1) Ingreso de ID:
¿Cómo ver el SKU del producto? Consulte el Apéndice 1: Cómo verificar el SKU del producto.
2) Filtrar los productos de entrada:
Después de ingresar el producto, haga clic en Guardar y se completará la recomendación del producto. El producto se muestra de la siguiente manera:
En este momento, podemos hacer clic en la configuración detrás del nombre del módulo para cambiar la máscara.
Máscara
Haga clic en configuración después del nombre del módulo y seleccione la máscara en el panel de operaciones abierto para configurar la máscara.
El funcionamiento es el mismo que en 4.1.3.
Plantilla
Haga clic en Configuración después del nombre del módulo y seleccione la plantilla en el panel de operaciones abierto para configurar la plantilla.
El funcionamiento es el mismo que en 4.1.4.
Este módulo es uno de los módulos más utilizados a la hora de decorar una tienda, existiendo actualmente una gran cantidad de plantillas. La captura de pantalla es la siguiente:
Pestaña
Haga clic en Configuración después del nombre del módulo y seleccione la pestaña para configurar la máscara en el panel de operaciones abierto.
El funcionamiento es el mismo que en 4.1.5.
4.7 Agregar módulo "Navegación"
4.7.1 Agregar proceso de operación
Seleccione el diseño del módulo de navegación que se agregará, por ejemplo, seleccione Banner como el módulo de navegación:
Haga clic en el botón Agregar plantilla para abrir el panel de operación Agregar módulo, busque el módulo "Navegación" y haga clic en Colocar:
Después de la colocación, la visualización predeterminada es como sigue. Haga clic en Configuración después del nombre para mejorar el contenido del módulo de navegación:
Configuración
Haga clic en el botón Configuración para que aparezca el siguiente panel de operaciones:
La operación de configuración es abierto por defecto.
Configuración
Explicación del término
Nombre de navegación: hace referencia al texto a hipervincular.
Dirección del enlace: hace referencia al sitio web que se abre tras hacer clic en el texto.
Haga clic en Guardar después de agregar para ver el efecto.
Piel
El funcionamiento es el mismo que en 4.1.3.
Plantilla
El funcionamiento es el mismo que 4.1.4.
Pestaña 4.7.6
El funcionamiento es el mismo que 4.1.5.
4.8 Agregar el módulo "Área de contenido personalizado"
4.8.1 Agregar proceso de operación
Seleccione el diseño que se utilizará para agregar el módulo y haga clic en esquina inferior izquierda del botón Agregar plantilla de diseño, busque "Área de contenido personalizado" en el panel de selección de módulo abierto y haga clic en Colocar.
Después de la colocación, se mostrará de la siguiente manera. Haga clic en "Configuración" para mejorar el contenido:
Configuración
Haga clic en Configuración para abrir el área de contenido de configuración de forma predeterminada, comúnmente conocido como "Editor HTML".
Configuración
Introducción a la función de personalización del área de contenidos. El contenido personalizado admite el uso de:
1) Código HTML (solo se admite el código en la etiqueta del cuerpo, el cuerpo no).
2) Código CSS parcial: El código CSS con efectos promedio también es aceptable.
3) Código script: código javaccript común.
4) El código js de la biblioteca js incorporada del sistema.
Si escribe código CSS, agréguelo. Los usuarios lo colocan delante del código CSS para evitar conflictos con el estilo predeterminado del sistema.
Piel
El funcionamiento es el mismo que en 4.1.3.
Plantilla
El funcionamiento es el mismo que 4.1.4.
Debido a que el módulo carrusel se puede utilizar para muchas funciones como banner, navegación, entrada de actividades, recomendaciones clave, etc., las plantillas de este módulo se dividen en varias categorías según sus usos y destinos. Las capturas de pantalla son las siguientes:
Se pueden combinar de manera flexible según propósitos específicos.
Tab
El funcionamiento es el mismo que 4.1.5.
4.9 Agregar el módulo "Mapa de carrusel"
4.9.1 Agregar el proceso de operación
Seleccionar el diseño para agregar la plantilla de carrusel Generalmente, el carrusel es. utilizado para hacer la pancarta. Una imagen, etc. , por lo que generalmente elija el diseño ubicado en la parte media superior de la página:
Haga clic en el botón Agregar módulo para encontrar el módulo del carrusel y luego haga clic en Colocar:
Después de colocar el módulo , el efecto de visualización predeterminado es el siguiente. Haga clic en "Configuración" para modificar el contenido:
Configuración
Haga clic en el botón Configuración para abrir el panel de operaciones y la operación de configuración se seleccionará de forma predeterminada.
Configuración
Descripción:
1) Haga clic y seleccione la imagen para cargar la visualización del carrusel.
2) Título: Introduce el título de cada imagen.
3) Enlace: Ingrese la URL de cada enlace de imagen. Tenga en cuenta que debe ser la URL de JD.COM.
Haga clic en Guardar una vez completada la operación. Puede configurar hasta 8 imágenes de carrusel.
4.9.4 Skin
El funcionamiento es el mismo que 4.1.3.
Plantilla
El funcionamiento es el mismo que 4.1.4.
Pestaña 4.9.6
El funcionamiento es el mismo que 4.1.5.
4.10 Agregar módulo "Introducción a la tienda"
4.10.1 Agregar proceso de operación
Seleccione el diseño del módulo de gradiente de la tienda que se agregará y luego haga clic en Agregar en el botón Módulo de la esquina inferior izquierda. De forma predeterminada, este módulo está preestablecido en la página de perfil de la tienda. No elimine ni mueva a menos que sea específicamente necesario.
Haga clic en Configuración para administrar el módulo de embellecimiento.
4.10.2 Configuración
Nota: La introducción de este módulo se encuentra en el backend del proveedor-mi tienda-configuración de decoración de tienda-introducción de marca:
4.10. 3 Piel
El funcionamiento es el mismo que 4.1.3.
4.10.4 Plantilla
El funcionamiento es el mismo que 4.1.4.
4.10.5 etiqueta
El funcionamiento es el mismo que 4.1.5.
4.11 Se agregó el módulo "Anuncio de tienda".
4.11.1 Proceso de operación de adición
El módulo de anuncios de la tienda está preestablecido en la esquina inferior izquierda de la página de inicio de la tienda de forma predeterminada. Si no hay ninguna necesidad especial, no lo elimine.
4.11.2 Configuración
El contenido de este módulo se mantiene en "Proveedor Backstage"-Mi Tienda-Gestión de Carteles de Anuncios-Gestión de Anuncios.
Haga clic en la configuración de este módulo para ubicar directamente la operación de la piel.
4.11.3 Skin
El funcionamiento es el mismo que 4.1.3.
4.11.4 Plantilla
El funcionamiento es el mismo que 4.1.4.
4.11.5 etiqueta
El funcionamiento es el mismo que 4.1.5.
4.12 agrega el módulo "letrero de tienda".
4.12.1 Agregar proceso de operación
De forma predeterminada, el módulo de contratación de tienda se encuentra en la parte superior de cada página. No elimine este módulo a menos que se solicite específicamente. El contenido de este módulo se mantiene en "Proveedor Backstage" - Mi Tienda - Gestión de Tienda - Información Básica de la Tienda.
4.12.2 Configuración
Haga clic para modificar la operación.
4.12.3 Skin
El funcionamiento es el mismo que 4.1.3.
4.12.4 Plantilla
El funcionamiento es el mismo que 4.1.4.
4.12.5 etiqueta
El funcionamiento es el mismo que 4.1.5.
5. Configuración de la página
La configuración de la página incluye configuración de fondo y configuración para compartir.
5.1 Configuración de fondo
Después de modificar cada página, hay un botón en la esquina superior izquierda de la ventana del navegador llamado Configuración de página. Tócalo para ver la configuración de fondo.
Descripción:
Color de fondo: puede seleccionar o ingresar un valor de color para el color de fondo.
Ancho de fondo: se utiliza para definir el color de fondo y el ancho de la imagen de fondo; la unidad del valor es píxeles, dejarlo en blanco significa pantalla completa.
Imagen de fondo: sube una imagen con un límite de tamaño de 300K.
El uso de "Imagen de fondo" combinado con el módulo "Área de contenido personalizado" puede producir efectos como "banner de pantalla completa".
5.2 Configuración para compartir
Agregue una barra flotante para compartir a la tienda, puede elegir mostrarla en el lado izquierdo o derecho de la página y puede configurar la palabra para compartir predeterminada. ; admite compartir la tienda con Sina Weibo, Tencent Weibo, Renren, Xinkai, Douban y otros sitios web de terceros.
Si quieres compartir, si lo dejas en blanco, el programa leerá automáticamente un fragmento de texto. Se recomienda escribir una copia manualmente y guardarla.
Descripción:
Palabra compartida: se recomienda ingresar 140 caracteres, ya que si desea compartir con Weibo y otros sitios web, el otro sitio web cortará automáticamente el exceso. .
Puede afectar la integridad del contenido de Weibo.