Logo gets super compressed on desktop

Highlighted
New Member
6 0 0

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.

0 Likes
Highlighted
Explorer
37 4 8

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

0 Likes
Highlighted
New Member
6 0 0
Highlighted
Explorer
37 4 8

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, 

 

0 Likes
Highlighted
New Member
6 0 0

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

0 Likes
Highlighted
Explorer
37 4 8

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

0 Likes
Highlighted
New Member
6 0 0

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?

0 Likes
Highlighted
Explorer
37 4 8

You can follow this thread.

0 Likes
Highlighted
New Member
6 0 0

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>

 

0 Likes
Highlighted
Explorer
37 4 8

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:- 

header_svglogo_venture.JPG

 

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

 

 

0 Likes