From dc863cdaf6e6550ef4870d46496a110c4bbe93c8 Mon Sep 17 00:00:00 2001
From: bookernath <nathan.booker@bigcommerce.com>
Date: Fri, 22 Oct 2021 11:35:22 -0500
Subject: [PATCH] Use srcset for store logo so it looks good in more conditions

---
 CHANGELOG.md                                |  1 +
 templates/components/common/store-logo.html | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e441be270..e819438dfe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Update store logo to use `srcset`. [#2136](https://github.com/bigcommerce/cornerstone/pull/2136)
 
 ## 6.1.1 (10-01-2021)
 - Fix product images on PDP has clipped outline. [#2124](https://github.com/bigcommerce/cornerstone/pull/2124)
diff --git a/templates/components/common/store-logo.html b/templates/components/common/store-logo.html
index 82a4f65d8b..bb95eb3a12 100644
--- a/templates/components/common/store-logo.html
+++ b/templates/components/common/store-logo.html
@@ -1,13 +1,20 @@
 <a href="{{urls.home}}" class="header-logo__link" data-header-logo-link>
     {{#if settings.store_logo.image}}
         {{#if theme_settings.logo_size '===' 'original'}}
-            <img class="header-logo-image-unknown-size" src="{{getImage settings.store_logo.image 'logo_size'}}" alt="{{settings.store_logo.title}}" title="{{settings.store_logo.title}}">
+        <img class="header-logo-image-unknown-size"
+             src="{{getImage settings.store_logo.image 'logo_size'}}"
+             alt="{{settings.store_logo.title}}"
+             title="{{settings.store_logo.title}}">
         {{else}}
-            <div class="header-logo-image-container">
-                <img class="header-logo-image" src="{{getImage settings.store_logo.image 'logo_size'}}" alt="{{settings.store_logo.title}}" title="{{settings.store_logo.title}}">
-            </div>
+        <div class="header-logo-image-container">
+            <img class="header-logo-image"
+                 src="{{getImage settings.store_logo.image 'logo_size'}}"
+                 srcset="{{getImageSrcset1x2x settings.store_logo.image 'logo_size'}}"
+                 alt="{{settings.store_logo.title}}"
+                 title="{{settings.store_logo.title}}">
+        </div>
         {{/if}}
     {{else}}
-        <span class="header-logo-text">{{settings.store_logo.title}}</span>
+    <span class="header-logo-text">{{settings.store_logo.title}}</span>
     {{/if}}
 </a>