Shopify themes, liquid, logos, and UX
First of all, good evening community, sorry for my low level of English.
I need help before launching my store, I will be eternally grateful if you can give me a hand.
I have the Debutify theme installed in my store, and what I want to do is place the logo in SVG format instead of PNG format.
I understand that I have to replace some lines of code in Header.Liquid, but this Debutify topic has a somewhat different structure and has included some scripts that I cannot read, if someone could help me to replace PNG with SVG it would help me a lot since I will launch my business in less than a week.
I attach the code of the logo that I currently use:
<div class="nav-containers nav-container-logo">
<ul class="inner-nav-containers">
{% assign image_size = section.settings.height_logo | prepend: 'x' %}
{% assign image_size_mobile = section.settings.height_logo_mobile | prepend: 'x' %}
{% if template.name == 'index' %}
<h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
{% endif %}
<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
{% if section.settings.inverted_logo and template.name == 'index' or template.name == 'collection' or template.name == 'article' %}
<img class="logo inverted-logo" src="{{ section.settings.inverted_logo | img_url: image_size }}"
srcset="{{ section.settings.inverted_logo | img_url: image_size }} 1x, {{ section.settings.inverted_logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.inverted_logo.alt | default: shop.name }}"
itemprop="logo">
{% else %}
<span class="inverted-logo">{{ shop.name }}</span>
{% endif %}
{% if section.settings.default_logo %}
<img class="logo default-logo" src="{{ section.settings.default_logo | img_url: image_size }}"
srcset="{{ section.settings.default_logo | img_url: image_size }} 1x, {{ section.settings.default_logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.default_logo.alt | default: shop.name }}"
itemprop="logo">
<img class="logo mobile-logo" src="{{ section.settings.default_logo | img_url: image_size_mobile }}"
srcset="{{ section.settings.default_logo | img_url: image_size_mobile }} 1x, {{ section.settings.default_logo | img_url: image_size_mobile, scale: 2 }} 2x"
alt="{{ section.settings.default_logo.alt | default: shop.name }}"
itemprop="logo">
{% else %}
<span class="default-logo">{{ shop.name }}</span>
<span class="mobile-logo">{{ shop.name }}</span>
{% endif %}
</a>
{% if template.name == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</ul>
</div>
User | RANK |
---|---|
151 | |
110 | |
90 | |
53 | |
49 |
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By