FROM CACHE - es_header

Outline / border button navbar shopify || Contorno o borde para boton en la barra de navegacion

Clicomy
Nuevo miembro
11 0 0

Hola, 

Necesito crear un contorno o borde a un boton de la barra de navegación. Adjunto imagen de referencia para que se entienda mejor lo que estoy buscando. Utilizo el tema Dawn. ¿Existe algun codigo o CSS personalizado para colocar en la tienda?

 

Captura de pantalla 2024-04-08 a la(s) 20.15.57.png

 

Hello,
I need to create an outline or border to a navigation bar button. I am attaching a reference image to better understand what I am looking for. I am using the Dawn theme, is there any custom code or CSS to place in the store?

6 RESPUESTAS 6

Teo
Shopify Staff
2268 502 324

Hola, @Clicomy:

 

Gracias por escribirnos. Entiendo por tu mensaje que deseas añadir contorno a uno de los elementos del menú principal de tu tienda. Con todo, usas el tema Dawn, ¿cierto? Será un placer ayudar.

 

A modo de contexto, cabe tener en cuenta que el editor de temas de Shopify no cuenta con una herramienta nativa para personalizar el diseño o aspecto de cada elemento del menú de manera independiente. Ahora bien, una de las principales ventajas de utilizar Shopify es que siempre puedes editar el código de tu tienda para implementar diseños personalizados a las diferentes secciones/elementos de tu página.

 

Dicho esto, me alegra informarte de que es posible añadir contorno a los elementos de tu menú con una simple edición de código CSS mediante la herramienta de CSS personalizado. Te dejo el extracto específico de código que debes añadir y la sección concreta de tu tienda donde puedes implementarlo:

 

nav.header__inline-menu ul.list-menu li:nth-child(XXXXXXXX) {
 border-style: solid;
}

 

Nota: Debes modificar la parte que dice XXXXXXXX con el número específico del elemento del menú donde quieres aplicar esta personalización. Por ejemplo, si deseas añadir contorno en el segundo elemento del menú de tu tienda, debes añadir un 2. Si deseas agregarlo en el quinto, debes añadir un 5.

 

  1. Dirígete a la sección Tienda online > Temas.
  2. Haz clic en Personalizar.
  3. En los iconos de la izquierda, selecciona Configuración del tema.
  4. Localiza la sección CSS personalizado.
  5. Pega el código que te comparto.
  6. Guarda la configuración.

 

Si no estás a gusto haciendo este tipo de cambios de código CSS, puedes escribirnos a través de nuestro Centro de Ayuda. Si cumples con los requisitos de diseño, es posible que nuestros especialistas puedan implementar esto por ti. Alternativamente, también puedes contratar a un Partner de Shopify. Este es un portal de desarrolladores que pueden darte un presupuesto para cualquier personalización. 

 

Dime, ¿podrías confirmarme si puedes conseguir el resultado que buscas con este código CSS? Mientras tanto, me pregunto cómo está siendo tu experiencia con Shopify. Dime, ¿qué tipo de tienda has creado en nuestra plataforma? ¿Cómo va el resto de cuestiones con la configuración de tu negocio en Shopify?

Teo | Social Care @ Shopify 
 - ¿Te resultó útil mi respuesta? Dale Me gusta para hacérmelo saber 
 - ¿Resolvimos tu pregunta? Dale a Aceptar como solución
 - Para saber más visita el Centro de ayuda de Shopify o nuestro Blog de Shopify

Clicomy
Nuevo miembro
11 0 0

Muchas gracias. Se agrego el contorno pero ¿como podria hacer que sus esquinas sean redondas y poder corregir el grosor del contorno?

 

Captura de pantalla 2024-04-15 a la(s) 07.46.48.png

Teo
Shopify Staff
2268 502 324

Hola, @Clicomy:

 

Gracias por la respuesta. Me alegra escuchar que has podido agregar el contorno al menú de tu tienda con el extracto de código CSS que te compartía. En relación con la nueva consulta, me alegra informarte de que puedes editar dicho extracto CSS para agregar propiedades de grosor y radio al contorno. Por ejemplo, puedes añadir las siguientes propiedades para aumentar el tamaño de dicho contorno y redondearlo:

 

border-radius: 15px;
border-width: 2px; 

 

En este caso, el código completo a añadir debería quedar de la siguiente forma:

 

nav.header__inline-menu ul.list-menu li:nth-child(XXXXXXXX) {

border-style: solid;

border-radius: 15px;

border-width: 2px; 
}

 

Puedes implementar esta modificación del código CSS en la misma sección de Tienda online > Temas > Personalizar > Configuración del tema > CSS personalizado en el editor de temas de tu panel de control. Nota: Me alegra informarte de que puedes editar los valores numéricos de píxeles de estas propiedades de grosor y radio para que se ajusten al tamaño específico que deseas configurar para tu tienda. Dime, ¿podrías confirmarme si con estos valores puedes ajustar el diseño del elemento del menú como deseas?

 

Por otra parte, ¿has podido configurar el diseño del resto de secciones de tu página web como deseabas? ¿Qué objetivos a corto y largo plazo te gustaría conseguir con Shopify y tu tienda?

Teo | Social Care @ Shopify 
 - ¿Te resultó útil mi respuesta? Dale Me gusta para hacérmelo saber 
 - ¿Resolvimos tu pregunta? Dale a Aceptar como solución
 - Para saber más visita el Centro de ayuda de Shopify o nuestro Blog de Shopify

Clicomy
Nuevo miembro
11 0 0

Gracias por tu ayuda @Teo 

Una ultima pregunta... 

¿Sabes como ocultar la linea que se coloca debajo de los botones de la barra de navegacion? Por ejemplo, ocultar la linea que se muestra en esta imagen en los botones de "Inicio" y "Planes". Seria de gran ayuda poder ocultar esa linea. 

 

Clicomy_0-1713458442866.png

 

Gracias

 

Clicomy
Nuevo miembro
11 0 0

Si te das cuenta al implementar tu codigo el boton "descargables" y "escribenos" quedan desalineados.

Tambien, el espaciado entre "descargables" y "escribenos" queda muy junto.

¿Sabes como editar y alinear eso?

Screenshot_10.png

 

Saludos

Teo
Shopify Staff
2268 502 324

Hola, @Clicomy:

 

Gracias por la respuesta. Por una parte, veo que finalmente has conseguido ajustar el diseño de los elementos "inicio" y "planes" del menú de tu tienda para eliminar el subrayado. Dime, ¿podrías confirmarme si finalmente estos elementos se muestran con el diseño que deseas en tu página web?

 

Por otra parte, en relación con la alineación del elemento "escríbenos" con el resto de líneas del menú; me alegra informarte de que, en efecto, puedes usar el código CSS para cambiar la posición de la sección que desees. Te dejo un enlace con más información sobre cómo funciona la posición CSS. En este caso, puedes añadir elementos para especificar una posición relativa y ajustar los píxeles de alineación:

position: relative;

bottom: 3px;

 

Además, también puedes hacer uso de las propiedades de márgenes CSS para personalizar el espaciado o márgenes de cada uno de los elementos. Esta propiedad concreta te permite añadir espacios alrededor del elemento que estás personalizando. Te dejo un ejemplo de la propiedad que debes añadir:

 

margin-left: 12px;

 

Nota: Puedes modificar la cantidad total de píxeles para ajustar la alineación de la posición y márgenes con el fin de que se ajuste a tus necesidades de diseño. Puedes añadir estas propiedades al código que ya has implementado en Tienda online > Temas > Personalizar > CSS Personalizado. Este debería quedar así:

 

nav.header__inline-menu ul.list-menu li:nth-child(XXXXXXXX) {

border-style: solid;

border-radius: 15px;

border-width: 2px; 

position: relative;

bottom: 3px;

margin-left: 12px;
}

 

Dicho esto, para cuestiones de implementación de diseños concretos, he de informarte de que contamos con un equipo de especialistas. Si cumples con la política de diseño, puedes escribirnos a través del Centro de Ayuda para solicitar cambios que requieran código que ayuden a mejorar el diseño de tu tienda. Alternativamente, también puedes contratar a un Partner de Shopify para este fin. Dime, ¿podrías confirmarme si con estas propiedades CSS que te comparto consigues el diseño deseado?

Teo | Social Care @ Shopify 
 - ¿Te resultó útil mi respuesta? Dale Me gusta para hacérmelo saber 
 - ¿Resolvimos tu pregunta? Dale a Aceptar como solución
 - Para saber más visita el Centro de ayuda de Shopify o nuestro Blog de Shopify