Trouble Changing Colors With Impulse Theme

Store Design
1

Hey everybody, having an issue with changing colors on a store that currently uses Impulse theme (this current store is in development and not the actual live theme). Trying to change the colors in the store simply with the live customizer will not work and I can’t quite figure out why. If I upload a fresh copy of the theme into my store, it will work without issue so there has to be something I’m missing. I even brought the contents of :root from the freshly uploaded them into the CSS of the one in development and while it displays the default colors, it won’t change them still when I try.

2

Hey @mslee017

I think it would be better if i have the link or the theme file so i can assess where the error is coming from

3

Hey @SidouLF thank you for responding!

https://73kygjp0jyywjohp-20379755.shopifypreview.com will this preview link work or do you need something else?

I am wondering, currently I am using Theme Kit and working on this store for someone else. I think at some point he made changes in the theme customizer and I didn’t run theme download and then was using Theme Kit to make changes, I wonder if this is what caused the problem because I cannot see anything else so far

4

Hey @mslee017

The problem seems to be coming from this section

:root{
  --colorBtnPrimary:{{ settings.color_button | default: "#000" }};
  --colorBtnPrimaryLight:{{ settings.color_button | default: "#000" | color_lighten: 10 }};
  --colorBtnPrimaryDim:{{ settings.color_button | default: "#000" | color_darken: 5 }};
  --colorBtnPrimaryText:{{ settings.color_button_text | default: "#fff" }};
  --colorCartDot:{{ settings.color_cart_dot | default: "#ff4f33" }};

  --colorLink:{{ settings.color_body_text | default: "#1c1d1d" }};

  --colorTextBody:{{ settings.color_body_text | default: "#1c1d1d" }};
  --colorPrice:{{ settings.color_price | default: "#1c1d1d" }};
  --colorTextSavings:{{ settings.color_savings_text | default: "#1c1d1d" }};
  --colorSaleTag:{{ settings.color_sale_tag | default: "#1c1d1d" }};
  --colorSaleTagText:{{ settings.color_sale_tag_text | default: "#ffffff" }};

  --colorBody:{{ settings.color_body_bg | default: "#fff" }};
  --colorBodyDim:{{ settings.color_body_bg | default: "#1c1d1d" | color_darken: 5 }};

  --colorFooter:{{ settings.color_footer | default: "#111" }};
  --colorFooterText:{{ settings.color_footer_text | default: "#fff" }};

  --colorBorder:{{ settings.color_borders | default: "#1c1d1d" }};

  --colorNav:{{ settings.color_header | default: "#fff" }};
  --colorNavText:{{ settings.color_header_text | default: "#000" }};
  --colorAnnouncement:{{ settings.color_announcement | default: "#1c1d1d" }};
  --colorAnnouncementText:{{ settings.color_announcement_text | default: "#fff" }};

  --colorHeroText:{{ settings.color_image_text | default: "#fff" }};

  --colorModalBg:{{ settings.color_modal_overlays | default: "#000" }};

  --colorImageOverlay:{{ settings.color_image_overlay | default: "#000" }};
  --colorImageOverlayOpacity:{{ settings.color_image_overlay_opacity | divided_by: 100.0 }};
  --colorImageOverlayTextShadow:{{ settings.color_image_overlay_text_shadow | divided_by: 100.0 }};

  --colorSmallImageBg:{{ settings.color_small_image_bg | default: "#eee" }};
  --colorLargeImageBg:{{ settings.color_large_image_bg | default: "#1c1d1d" }};
  --colorGridOverlay:{{ settings.collection_grid_tint | default: "#000" }};
  --colorGridOverlayOpacity:0.1;

  --colorDrawers:{{ settings.color_drawer_background | default: "#1c1d1d" }};
  --colorDrawersDim:{{ settings.color_drawer_background | default: "#1c1d1d" | color_darken: 5 }};
  --colorDrawerBorder:{{ settings.color_drawer_border | default: "#343535" }};
  --colorDrawerText:{{ settings.color_drawer_text | default: "#fff" }};
  --colorDrawerTextDark:{{ settings.color_drawer_text | default: "#fff" | color_darken: 15 }};
  --colorDrawerButton:{{ settings.color_drawer_button | default: "#a26b25" }};
  --colorDrawerButtonText:{{ settings.color_drawer_button_text | default: "#fff" }};

  --grid-gutter:17px;
  --drawer-gutter:20px;

  --sizeChartMargin:25px 0;
  --sizeChartIconMargin:5px;

  --newsletterReminderPadding:40px;
  --color-body-text:{{ settings.color_body_text | default: "#1c1d1d" }};
  --color-body:{{ settings.color_body_bg | default: "#fff" }};
  --color-bg:{{ settings.color_body_bg | default: "#fff" }};
}

The expected output on the browser should be

:root{
  --colorBtnPrimary:#111111;
  --colorBtnPrimaryLight:#2b2b2b;
  --colorBtnPrimaryDim:#040404;
  --colorBtnPrimaryText:#fff;
  --colorCartDot:#ff4f33;

  --colorLink:#000000;

  --colorTextBody:#000000;
  --colorPrice:#1c1d1d;
  --colorTextSavings:#c20000;
  --colorSaleTag:#990000;
  --colorSaleTagText:#ffffff;

  --colorBody:#ffffff;
  --colorBodyDim:#f2f2f2;

  --colorFooter:#ffffff;
  --colorFooterText:#000000;

  --colorBorder:#e8e8e1;

  --colorNav:#fff;
  --colorNavText:#000;
  --colorAnnouncement:#0f0f0f;
  --colorAnnouncementText:#fff;

  --colorHeroText:#fff;

  --colorModalBg:#e6e6e6;

  --colorImageOverlay:#000;
  --colorImageOverlayOpacity:0.0;
  --colorImageOverlayTextShadow:0.1;

  --colorSmallImageBg:#f4f4f4;
  --colorLargeImageBg:#0f0f0f;
  --colorGridOverlay:#000000;
  --colorGridOverlayOpacity:0.1;

  --colorDrawers:#ffffff;
  --colorDrawersDim:#f2f2f2;
  --colorDrawerBorder:#e8e8e1;
  --colorDrawerText:#000000;
  --colorDrawerTextDark:#000000;
  --colorDrawerButton:#111111;
  --colorDrawerButtonText:#ffffff;

  --grid-gutter:17px;
  --drawer-gutter:20px;

  --sizeChartMargin:25px 0;
  --sizeChartIconMargin:5px;

  --newsletterReminderPadding:40px;
  --color-body-text:#000000;
  --color-body:#ffffff;
  --color-bg:#ffffff;
}

This could be because there is a specific setting not allowing the rendering of the rest of the colors or another error try removing this

--sizeChartMargin:25px 0;	
  --sizeChartIconMargin:5px;	
  --newsletterReminderPadding:40px;

Or just copy and paste this instead

:root{
  --colorBtnPrimary:{{ settings.color_button | default: "#000" }};
  --colorBtnPrimaryLight:{{ settings.color_button | default: "#000" | color_lighten: 10 }};
  --colorBtnPrimaryDim:{{ settings.color_button | default: "#000" | color_darken: 5 }};
  --colorBtnPrimaryText:{{ settings.color_button_text | default: "#fff" }};
  --colorCartDot:{{ settings.color_cart_dot | default: "#ff4f33" }};

  --colorLink:{{ settings.color_body_text | default: "#1c1d1d" }};

  --colorTextBody:{{ settings.color_body_text | default: "#1c1d1d" }};
  --colorPrice:{{ settings.color_price | default: "#1c1d1d" }};
  --colorTextSavings:{{ settings.color_savings_text | default: "#1c1d1d" }};
  --colorSaleTag:{{ settings.color_sale_tag | default: "#1c1d1d" }};
  --colorSaleTagText:{{ settings.color_sale_tag_text | default: "#ffffff" }};

  --colorBody:{{ settings.color_body_bg | default: "#fff" }};
  --colorBodyDim:{{ settings.color_body_bg | default: "#1c1d1d" | color_darken: 5 }};

  --colorFooter:{{ settings.color_footer | default: "#111" }};
  --colorFooterText:{{ settings.color_footer_text | default: "#fff" }};

  --colorBorder:{{ settings.color_borders | default: "#1c1d1d" }};

  --colorNav:{{ settings.color_header | default: "#fff" }};
  --colorNavText:{{ settings.color_header_text | default: "#000" }};
  --colorAnnouncement:{{ settings.color_announcement | default: "#1c1d1d" }};
  --colorAnnouncementText:{{ settings.color_announcement_text | default: "#fff" }};

  --colorHeroText:{{ settings.color_image_text | default: "#fff" }};

  --colorModalBg:{{ settings.color_modal_overlays | default: "#000" }};

  --colorImageOverlay:{{ settings.color_image_overlay | default: "#000" }};
  --colorImageOverlayOpacity:{{ settings.color_image_overlay_opacity | divided_by: 100.0 }};
  --colorImageOverlayTextShadow:{{ settings.color_image_overlay_text_shadow | divided_by: 100.0 }};

  --colorSmallImageBg:{{ settings.color_small_image_bg | default: "#eee" }};
  --colorLargeImageBg:{{ settings.color_large_image_bg | default: "#1c1d1d" }};
  --colorGridOverlay:{{ settings.collection_grid_tint | default: "#000" }};
  --colorGridOverlayOpacity:0.1;

  --colorDrawers:{{ settings.color_drawer_background | default: "#1c1d1d" }};
  --colorDrawersDim:{{ settings.color_drawer_background | default: "#1c1d1d" | color_darken: 5 }};
  --colorDrawerBorder:{{ settings.color_drawer_border | default: "#343535" }};
  --colorDrawerText:{{ settings.color_drawer_text | default: "#fff" }};
  --colorDrawerTextDark:{{ settings.color_drawer_text | default: "#fff" | color_darken: 15 }};
  --colorDrawerButton:{{ settings.color_drawer_button | default: "#a26b25" }};
  --colorDrawerButtonText:{{ settings.color_drawer_button_text | default: "#fff" }};

  --grid-gutter:17px;
  --drawer-gutter:20px;
  --color-body-text:{{ settings.color_body_text | default: "#1c1d1d" }};
  --color-body:{{ settings.color_body_bg | default: "#fff" }};
  --color-bg:{{ settings.color_body_bg | default: "#fff" }};
}

Let me know if that worked

5

Worked, thank you so much!