Logo gets super compressed on desktop

[7core]

I am using Venture theme. I've tried uploading my logo in various sizes in both PNG and JPEG formats but my header logo gets compressed down to a fuzz no matter what. I've searched all over shopify community but it seems like none of the solutions work on my theme. I have contacted shopify support but after a few days they told me " we figured out that the issue is too much information on the logo, and it was not created to be presented on 50px size" and "This would need to dig deeper into the theme codes and manually customize the header codes" .

Any ideas how I can manually insert my logo into the code to display a higher resolution logo in my header on desktop?

Any help is appreciated.

[Simranjeet]

Please share store URL and I will try to figure it out.

[7core]

https://replicamotorsport.com/ 

[Simranjeet]

Hi,

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media (min-width: 750px){
    #shopify-section-header > header > div.site-header__upper.page-width > div > div.grid__item.small--one-half.medium-up--two-thirds.small--text-center > h1 > a > img {
    max-width: none !important;
    width: 150px !important;
    height: 125px !important;
}
}

Hope this will help. Please let me know if you have any other question.

Thanks, 

[7core]

Hello, unfortunately it just increased the dimensions of the logo in the header, but the quality is still very bad. 

[Simranjeet]

I think you have to re-design the logo for that.

[7core]

I have the logo in SVG format available but Shopify will not let me upload it. Do you know how I can implant the SVG file into the code directly?

[Simranjeet]

You can follow this thread.

[7core]

Unfortunately the code on in my editor looks a bit different. Do you know where I can insert the svg asset? 

{% if section.settings.logo != blank %}
            
            {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
            <a href="/" itemprop="url" class="site-header__logo-link">
              <img src="{{ section.settings.logo | img_url: image_size }}"
                   srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                   alt="{{ section.settings.logo.alt | default: shop.name }}"
                   itemprop="logo">
            </a>

[Simranjeet]

Hi,

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Rename your logo file as logo.svg and upload it in Assets folder.

3. Remove the selected code shown in this image:- 

4. Replace it with- 

          {% if true %}
            {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
            <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
              <img src="{{ 'logo.svg' | asset_url }}"
                   alt="{{ section.settings.logo.alt | default: shop.name }}"
                   itemprop="logo">
            </a>
          {% else %}
            {% assign shop_name_length = shop.name.size %}
            <a href="{{ routes.root_url }}" itemprop="url" {% if shop_name_length > 10 %} class="site-header__shop-name--small"{% endif %}>{{ shop.name }}</a>
          {% endif %}

Hope this will help. 

Thanks

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on simranjeetsingh6076@gmail.com