Dawn theme header icon ang logo loading issue - urgent

Store Design
, , , ,
1

I’m using the dawn theme in that I want to know why the heart icon is taking time to load and header logo too. I want to resolve this. Please anyone help with me. I’ll attach the video for your view.

Video link: https://drive.google.com/file/d/1aGLFdaMbS4pMPB3ET9gRAWCE-XKSgFQd/view?usp=sharing

website: https://ambersilverz.myshopify.com/

password: amber

2

You can move the code below at the bottom of your theme.liquiud file to right below <head> tag and check again

 <style>
@media screen and (max-width: 767px) {
sticky-header.header-wrapper.color-scheme-c1f087a9-728a-4226-984e-ed55ed0213ae.gradient header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-account {
    align-items: center !important;
}
header-drawer {
    padding-top: 2rem !important;
}
.header__icons.header__icons--localization.header-localization {
    padding-top: 2rem !important;
}
}
</style>

Best regards,
Dan from Ryviu: Product Reviews App

3

This happens because the icon is output by the App. App needs time to load it’s code and then add the icon to the page code.

You may reserve the space so that when icon is added, there is no CLS.

Or, you may try and add this HTML code to the theme code – app will replace it, but it will be there before app loads.
Would also need to add some CSS to make it look proper…

4

@tim_1 can you please provide those code

5

Let’s start with the simple stuff – this will reserve the empty space. Put it into “Custom CSS” of the Header section.

  .header__icon--account + .header__icon--cart {
    margin-left: 45px;
  }

Outputting a dummy heart would be a bit more complex…

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it