Temas de Shopify, liquid, logotipos y temas similares
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.
Como podéis ver para la versión de escritorio se ve muy bien pero para la móvil es muy grande.
Hola @Xavijavc
El error que presentas parece ser tema de una configuración de estilos. Puedes intentar lo siguiente:
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:
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
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 %}
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:
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:
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
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 %}
¿Alguna vez has creado una colección y has tenido problemas para añadir tus productos a...
By Ann Sep 10, 2024Una de las cosas que más presión genera a la hora de emprender con un negocio es conver...
By Teo Aug 20, 2024¿Alguna vez has visitado una página web lenta con imágenes pixeladas? ¿Qué haces cuando...
By Ann Aug 13, 2024