Estás leyendo la publicación: Cómo personalizar el tema de su tienda 3dcart
Podría decirse que uno de los aspectos más importantes de un sitio web es su diseño. El aspecto de su sitio web de comercio electrónico suele ser la primera y más duradera impresión que deja a los clientes potenciales. Un buen diseño web puede generar confianza en el cliente y hacer que la experiencia de compra sea fácil de usar, especialmente si responde y es fácil de navegar.
Las mejores soluciones de comercio electrónico ofrecen a los comerciantes varias formas de personalizar sus tiendas en línea para lograr una apariencia verdaderamente única y coherente con la marca. Con 3dcart, los comerciantes pueden personalizar completamente una larga lista de temas modernos a su gusto, poniendo el poder en sus manos para crear una experiencia que saben que a sus clientes les encantará. Si recién está comenzando y le gustaría comenzar a editar su tema 3dcart, o si está rediseñando su sitio web establecido, profundicemos en las mejores formas de hacerlo.
Elegir un tema
Antes de que pueda comenzar a editar un tema, deberá elegir un tema que sea adecuado para su empresa. Aunque puede usar y editar el tema predeterminado que usa su nueva tienda, también puede elegir entre la amplia variedad de temas que 3dcart tiene para ofrecer. Nuestros temas vienen con características y elementos de diseño únicos, que incluyen menús fijos, controles deslizantes de paralaje, banners de página de inicio y mucho más. Hay más de 40 temas gratuitos para elegir que están diseñados profesionalmente y son fáciles de personalizar; sin embargo, si desea funciones más avanzadas, también puede elegir un tema premium.
En el Tienda de temas 3dcart, puede obtener una vista previa de cualquier tema para ver más de cerca cómo funciona y cómo se verá en acción. Una vez que haya elegido un tema con el que esté satisfecho, haga clic en “Obtener este tema” e ingrese la URL de su tienda. Luego se le pedirá que inicie sesión en el Administrador de su tienda en línea, donde luego se le pedirá que confirme la “compra” de su tema, incluso si está instalando un tema gratuito. Después de hacer clic en confirmar, puede encontrar su nuevo tema en la sección “Temas instalados” de su página Temas y estilos, desde donde puede seleccionarlo y obtener una vista previa, reinstalarlo, desinstalarlo o aplicarlo.
Después de aplicar su tema, estará disponible en su tienda en línea y listo para personalizar.
Cambiar el tema de su sitio
Digamos que no está satisfecho con el tema que ha elegido. Has jugado con él en tu tienda en línea y has decidido que simplemente no es el estilo que buscas. No se preocupe, es fácil cambiar su tema por uno nuevo. Todo lo que necesita hacer es desplazarse por la lista de temas disponibles en la página Temas y estilo, seleccionar su nuevo tema y hacer clic en “Instalar tema”. Su tema anterior será reemplazado por uno nuevo, y podrá ver su tema anterior en su lista de Instalados.
Puede notar que, dentro de esta selección de temas, hay temas etiquetados como temas “principales” y temas “HTML5”. Vamos a explicar lo que eso significa.
¿Qué es un tema central?
Los mejores y más nuevos temas de 3dcart disponibles son “Temas principales”, lo que significa que se crearon y diseñaron utilizando nuestro Marco principal moderno. Todos estos temas son receptivos y están listos para usar en cualquier dispositivo, ya sea que su cliente esté en un dispositivo móvil o de escritorio. También podrá usar el Core Theme Editor para personalizar estos temas, de los que hablaremos más adelante. Si bien hay temas HTML5 disponibles, esos temas son más antiguos y es posible que no respondan en todos los dispositivos; le recomendamos que elija un tema principal para su tienda en línea.
Editor de temas principales
Una vez que haya elegido su tema favorito de 3dcart Core, es hora de comenzar a editar. Para hacer esto, deberá navegar a Configuración, luego Diseño y luego Temas y estilos dentro de su Administrador de tienda en línea. Aquí, verás el Página Temas y estilosque le muestra qué tema tiene activado actualmente en su tienda, qué temas ha instalado y una selección de temas disponibles para su uso.
Al hacer clic en “Personalizar tema”, será redirigido automáticamente al Editor de temas principales, que pondrá a tu disposición varias opciones de edición para el tema específico que hayas elegido. Estas opciones le permitirán realizar cambios estéticos generales en el tema de su sitio web. Tenga en cuenta que las opciones disponibles para usted pueden diferir de un tema a otro, porque no todos los temas tienen exactamente las mismas características.
Dentro del Editor de temas, verás las siguientes opciones:
- Ajustes preestablecidos de tema: Cada tema viene con un número selecto de ajustes preestablecidos, que son paletas de colores que pueden darle a su sitio una apariencia instantánea, cohesiva y única sin seleccionar manualmente los colores individuales.
- Encabezamiento: Esta sección le da la opción de cambiar el color de su barra de navegación y el texto dentro de ella.
- Texto y botones: Aquí puede determinar el color de los encabezados, el cuerpo del texto, los botones y más de su sitio.
- Tipografía: estas opciones le permiten cambiar el tamaño del texto y los encabezados de su sitio, a través de una selección de tamaños de píxeles.
- Productos: esta sección le permite cambiar el color del texto asociado con sus productos, como el color del texto de venta y el color de las estrellas de calificación debajo de sus productos.
- Pie de página: Aquí puede cambiar el color del pie de página de su sitio web y el texto del pie de página que se encuentra en la parte inferior de cada página.
Para elegir el color deseado en cualquiera de estas secciones, simplemente haga clic en el cuadro de color predeterminado con el código hexadecimal dentro. Esto abrirá un selector de color que puede usar para producir el color que desea, o puede escribir el código hexadecimal específico de su color si tiene esa información. El enfoque de código hexadecimal es mejor si ya ha establecido una marca con un color específico.
Editor de páginas con HTML Builder
Para realizar cambios más radicales en el aspecto de las páginas de su sitio, puede utilizar nuestro Editor de páginas, que utiliza el Generador HTML de arrastrar y soltarpara agregar contenido de forma modular a su página de inicio, páginas de menú y páginas adicionales.
Para navegar al generador de HTML de arrastrar y soltar del editor de páginas, vaya a Contenido y, a continuación, a Contenido del sitio. En esta sección, puede hacer clic en “Editar” en la sección Página de inicio para editar la página de inicio y luego hacer clic en “Iniciar editor de página”. También puede editar las páginas del menú en la sección Vínculos del menú principal o las páginas adicionales en la sección Páginas adicionales del pie de página. Para más detalles, echa un vistazo a nuestro Artículo de la base de conocimientos.
Una vez que haya ingresado al generador HTML de arrastrar y soltar, estará trabajando dentro de un espacio de construcción resaltado y vacío con la etiqueta “Haga clic para agregar contenido” en el centro. Si está trabajando en su página de inicio, tendrá dos de estos espacios de trabajo disponibles para personalizar en el encabezado y el pie de página. En sus páginas de contenido adicional y páginas de menú, tiene un espacio de trabajo para editar. Sin embargo, tenga en cuenta que puede agregar más de un elemento de contenido a cada espacio de trabajo.
Después de hacer clic en el espacio de trabajo, el constructor le pedirá que seleccione entre algunos elementos básicos de diseño para texto e imágenes, como tipo de encabezado, formato de lista y más. Para más opciones de contenidopuede hacer clic en “más”, lo que le dará una amplia gama de opciones para elegir, que incluyen:
- Artículos
- Titulares
- Fotos y galerías
- Perfiles
- Módulos de contacto
- Botones
- Contenido interactivo (video, mapas, etc.)
- Y mucho más…
Cada elemento de contenido está contenido dentro de un “bloque” que puede controlar de varias maneras, incluido el tamaño, el relleno, el color de fondo y más. También puede controlar el texto del elemento, las imágenes y su ubicación en la página dentro de la configuración del bloque.
No lo olvide: los cambios que está realizando en su sitio en el Editor de páginas no se realizan en tiempo real. Para que las ediciones se reflejen en su sitio en vivo, primero deberá guardar su diseño.
Edición de CSS y HTML
Si desea realizar modificaciones más avanzadas en su tema 3dcart, puede editar libremente su código HTML y CSS. Sin embargo, insistimos en que el conocimiento de la codificación es extremadamente beneficioso si decide editar este código. Si no se siente cómodo realizando estas personalizaciones, puede comunicarse con el equipo de diseño de 3dcart para obtener ayuda. En el caso de que realice un cambio no deseado, nuestros representantes de soporte técnico están no calificado para ofrecer soporte HTML; sin embargo, pueden indicarle dónde debe ir si desea comenzar a editar usted mismo.
Antes de comenzar a editar, es importante hacer copias de seguridad del código de su tema actual. Hay dos formas principales de acceder, hacer una copia de seguridad y editar este código: Editor de plantillas y FTP.
Para acceder al código de su tema usando el incorporado Editor de plantillas, vaya a Configuración, luego a Diseño y luego a Temas y estilos. A continuación, haga clic en el botón “Editar plantilla (HTML” en la parte superior derecha de la página. Aquí, podrá seleccionar la plantilla que desea respaldar o editar; haga clic en el botón Editar para comenzar. Para hacer una copia de seguridad de este código antes de editarlo, copie y pegue todo el código de este cuadro en el editor de texto de su elección. A continuación, guarde el archivo con el mismo nombre que aparece en el editor de plantillas. Con su código original respaldado de forma segura. arriba, puede comenzar a editar.
También puedes usar FTP para acceder al código de su sitio utilizando las credenciales de inicio de sesión de FTP que se le proporcionaron cuando se registró en 3dcart. Una vez que conecte su tienda, navegue a través de FTP a “web/assets/templates/[themefolder]” donde, en este caso, “themefolder” es el nombre del archivo de tema de su tienda. La carpeta del tema contiene el frame.html de su sitio, así como cualquier imagen y archivo CSS exclusivo de ese tema. Puede descargar todos estos archivos a la vez usando FTP.
Para obtener instrucciones más detalladas sobre cómo editar el diseño de su tienda con código, consulte nuestro Artículo de la base de conocimientos en el tema.
Terminando
No es ningún secreto que un diseño web efectivo es crucial para el éxito comercial en línea. Afortunadamente, editar su tema 3dcart para que se adapte mejor a la estética y las necesidades de su empresa es fácil si utiliza las herramientas que se le proporcionan. Con el nuevo editor Core Theme y el editor de páginas con HTML Builder, podrá lograr una apariencia verdaderamente única en su tienda en línea que hará que los clientes regresen. Si tiene las habilidades de codificación para realizar cambios más avanzados, también puede editar libremente su tema aún más al sumergirse en su HTML y CSS.
Si bien nuestra plataforma está diseñada pensando en la facilidad de uso, y puede realizar cualquier personalización que desee, siempre puede consultar a nuestro equipo de diseño en el paquetes de diseño de temas que presten más ayuda.
