FROM CACHE - es_header
Esta comunidad ahora recibe asistencia de una red de pares. El equipo de atención al cliente de Shopify ya no ofrece servicio a esta comunidad. Te animamos a conectar con otros emprendedores y partners para pedir ayuda y compartir tus experiencias. Sigue avisando de asuntos que incumplan nuestro Código de Conducta o contenidos que se deberían eliminar.

How to change logo size in booster theme

How to change logo size in booster theme

Xavijavc
Nuevo miembro
4 0 0

Hola buenos días, estoy configurando mi tienda shopify, tengo el tema booster, cuando configuro el tamaño del logo para escritorio se ve muy bien pero no es lo mismo con la versión móvil porque el logo se ve demasiado grande. ¿Puedes ayudarme, por favor?

Se adjuntan las imágenes de escritorio y móvil.

 

Captura de pantalla 2024-09-18 121426.png

Como podéis ver para la versión de escritorio se ve muy bien pero para la móvil es muy grande.Captura de pantalla 2024-09-18 121414.png

 

4 RESPUESTAS 4

AlfredoMendoza
Shopify Partner
215 27 64

Hola @Xavijavc 

 

El error que presentas parece ser tema de una configuración de estilos. Puedes intentar lo siguiente:

  • Revisa dentro de las opciones de personalización si viene alguna opción para poder limitar el tamaño del logo en la vista móvil.
  • Revisa si dentro de la configuración te recomienda subir una imagen con ciertas medidas para el logo de la vista móvil. Si es así, te recomiendo que sigas la recomendación y subas una imagen en las medidas sugeridas en el tema.

Si ya confirmaste las opciones anteriores y no se puede ajustar el tamaño, lo más probable es que se necesite editar el código de tu tema, pero hacer esto requiere conocimientos en creación y edición de temas Shopify. Así como conocimientos en CSS. Teniendo eso en cuenta los pasos generales para solucionarlo serían:

 

  • Identifica los estilos CSS que se aplican al logo en versión móvil.
  • Identifica en que hoja de estilos de tu tema se encuentran
  • Entra al editor de código de temas de Shopify y ajusta los estilos CSS en la hoja de estilos correspondiente.
  • Guarda los cambios y revisa en la versión móvil.

Ojo: es importante que esto último lo hagas solo si te sientes seguro, ya que hacerlo mal puede llevar a romper toda la estructura de tu tema.

 

Si necesitas más ayuda por favor envíame un mensaje privado.

 

Espero mi respuesta te sea de ayuda. Saludos.

Espero mi respuesta haya sido de ayuda, si fue así por favor dale Me gusta para hacérmelo saber.



WhatsApp:+52 5659308712


Email: alfredomendozamg@gmail.com

Xavijavc
Nuevo miembro
4 0 0

Hello I was checking and if you have the option for logo size but only for desktop does not have the option for mobile, I've tried setting the code with a CSS file but has no effect on the theme
this is the code that comes by default in the theme for the logo

{% assign logoStyle = '' %}
{% if settings.defaultLogo != nil %}
{% capture defaultLogo %}<img loading="lazy" height="{{settings.defaultLogo.height}}" width="{{settings.defaultLogo.width}}" src="{{settings.defaultLogo | img_url: '256x'}}" alt="logo" class="lazyload logo--default">{% endcapture %}
{% assign logoStyle = logoStyle | append: ' logo--default-available' %}
{% endif %}

{% if settings.mobileLogo != nil %}
{% capture mobileLogo %}<img loading="lazy" height="{{settings.mobileLogo.height}}" width="{{settings.mobileLogo.width}}" src="{{settings.mobileLogo | img_url: '256x'}}" alt="logo" class="hide-desktop lazyload logo--mobile">{% endcapture %}
{% assign logoStyle = logoStyle | append: ' logo--mobile-available' %}
{% endif %}

{% if settings.transparentLogo != nil %}
{% capture transparentLogo %}<img loading="lazy" height="{{settings.transparentLogo.height}}" width="{{settings.transparentLogo.width}}" src="{{settings.transparentLogo | img_url: '256x'}}" alt="logo" class="lazyload logo--transparent">{% endcapture %}
{% assign logoStyle = logoStyle | append: ' logo--transparent-available' %}
{% endif %}

{% if logoStyle != '' %}
<a href="{{ routes.root_url }}" class="logo-img {{logoStyle}}">
{{defaultLogo}}
{{mobileLogo}}
{{transparentLogo}}
</a>
{% elsif settings.textLogo != blank %}
<a href="{{ routes.root_url }}" class="logo-text">{{settings.textLogo}}</a>
{% else %}
<a href="{{ routes.root_url }}" class="logo-text">{{shop.name}}</a>
{% endif %}

AlfredoMendoza
Shopify Partner
215 27 64

Hola @Xavijavc 

 

Por lo que veo en el código que compartiste en la sección del logo de la vista móvil. si tiene una configuración para el ancho y el largo del logo, estás son las propiedades:

  • {{settings.mobileLogo.height}}
  • {{settings.mobileLogo.width}}

Lo anterior indica que si existe una configuración para poder indicar las medidas del logo en la vista móvil. Lo más probable es que tengan un valor por defecto. Hay 2 soluciones:

  1. Dentro de archivo donde sacaste el código anterior, busca mobileLogo. Busca entre todas las opciones que coincidan y tiene que haber alguna donde le asigna un valor a la altura y al ancho. Tendrás que editarlo para darle las medidas correctas.
  2. En el fragmento encargado de mostrar el logo de mobil hay que borrar estas 2 opciones
    1. height="{{settings.mobileLogo.height}}"
    2. width="{{settings.mobileLogo.width}}"


La segunda opción haría que los estilos CSS que colocaste puedan funcionar para poder darle el alto y ancho que deseas.

 

Te aconsejo que puedas revisar como funcionan los pesos de los selectores CSS para que puedas tener un panorama de porque tus estilos no se aplicaban al logo móvil.

 

Si aun continuas con problemas enviame un mensaje privado.

 

Espero si respuesta te sea de ayuda. Saludos.

Espero mi respuesta haya sido de ayuda, si fue así por favor dale Me gusta para hacérmelo saber.



WhatsApp:+52 5659308712


Email: alfredomendozamg@gmail.com

Xavijavc
Nuevo miembro
4 0 0

Hello, this is the code but it does not appear where to modify the size.


{% if settings.mobileLogo != nil %}
{% capture mobileLogo %}<img loading="lazy" height="{{settings.mobileLogo.height}}" width="{{settings.mobileLogo.width}}" src="{{settings.mobileLogo | img_url: '256x'}}" alt="logo" class="hide-desktop lazyload logo--mobile">{% endcapture %}
{% assign logoStyle = logoStyle | append: ' logo--mobile-available' %}
{% endif %}