How to Add Icon to "Add to Cart" button in Impulse theme?

[JordanM]

Hello guys,

I am switching from Debut theme to Impulse theme, however, I can see that in Impulse theme the Add to Cart button doesn’t have a bag icon and I would like to add one like in Debut theme. Does anyone know how I can do that? Here are some images:

That’s an image from Debut theme. It has bag icon:

That’s an image from Impulse theme:

Any help would be appreciated.

[LitExtension]

Hi @JordanM ,

Please send me the code of product-form.liquid file, I will help you to check and add it

[PageFly-Richard]

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

You can add my code as follows: theme → Edit > Search “theme.liquid”.

First : you will paste the code before :

Then paste the code before the tag:

You can also customize the css for the added content with the class "custom-content "

If you find my comment useful, please let me know by giving it a Like. Thank you!

Richard - PageFly

[JordanM]

Hello @PageFly-Richard ,

I tried it, however, it doesn’t work - I still don’t get the shopping bag icon inside the Add to Cart button.

[JordanM]

Hello @LitExtension ,

the code is:

  
  
  
  
  
  
  
  
  
  
  

  {%- if settings.favicon != blank -%}
    
  {%- endif -%}

  {%- render 'seo-title' -%}

  {%- if page_description -%}
  
  {%- endif -%}

  {%- render 'social-meta-tags' -%}

  {%- render 'font-face' -%}
  {{ 'theme.css' | asset_url | stylesheet_tag: preload: true }}
  {%- render 'css-variables' -%}

  

  {{ content_for_header }}

  

  {%- if shop.enabled_currencies.size > 1 -%}
    
  {%- endif -%}

  

  {%- if request.page_type contains 'customers/' -%}
    
  {%- endif -%}

  {{ 'general.accessibility.skip_to_content' | t }}

  

    

    {%- section 'header' -%}

      

      {%- section 'footer-promotions' -%}
      {%- section 'footer' -%}

    

  

  {%- section 'newsletter-popup' -%}

  {%- liquid
    render 'video-modal'
    render 'photoswipe-template'
    render 'tool-tip'
  -%}

[LitExtension]

Hi @JordanM ,

It is product-form.liquid file, not theme.liquid file.

I will check it.

[JordanM]

Hello @LitExtension ,

here is product-form.liquid:

{%- form 'product', product, id: form_id, class: 'product-single__form' -%}

  {%- liquid
    assign enable_dynamic_buttons = false
    if show_dynamic_checkout and template != 'product.preorder'
      assign enable_dynamic_buttons = true
    endif
  -%}

  {%- if enable_dynamic_buttons -%}
    
  {%- endif -%}

    {%- liquid
      assign default_text = 'products.product.add_to_cart' | t
      assign button_text = 'products.product.add_to_cart' | t
      if template == 'product.preorder'
        assign default_text = 'products.product.preorder' | t
        assign button_text = 'products.product.preorder' | t
      endif
      unless current_variant.available
        assign button_text = 'products.product.sold_out' | t
      endunless
    -%}

    

    {%- if enable_dynamic_buttons -%}
      {{ form | payment_button }}
    {%- endif -%}

  {%- if enable_dynamic_buttons -%}
    

  {%- endif -%}

  {{ form | payment_terms }}

  

  
  {%- if product.options.size > 1 -%}
    
  {%- endif -%}
{%- endform -%}

[LitExtension]

Hi @JordanM ,

Please change all code:

{%- form 'product', product, id: form_id, class: 'product-single__form' -%}

  {%- liquid
    assign enable_dynamic_buttons = false
    if show_dynamic_checkout and template != 'product.preorder'
      assign enable_dynamic_buttons = true
    endif
  -%}

  {%- if enable_dynamic_buttons -%}
    
  {%- endif -%}

    {%- liquid
      assign default_text = 'products.product.add_to_cart' | t
      assign button_text = 'products.product.add_to_cart' | t
      if template == 'product.preorder'
        assign default_text = 'products.product.preorder' | t
        assign button_text = 'products.product.preorder' | t
      endif
      unless current_variant.available
        assign button_text = 'products.product.sold_out' | t
      endunless
    -%}

    

    {%- if enable_dynamic_buttons -%}
      {{ form | payment_button }}
    {%- endif -%}

  {%- if enable_dynamic_buttons -%}
    

  {%- endif -%}

  {{ form | payment_terms }}

  

  
  {%- if product.options.size > 1 -%}
    
  {%- endif -%}
{%- endform -%}

Hope it helps!

[JordanM]

Hello @LitExtension ,

thank you very much. May you also tell me how i can change the icon?

[LitExtension]

Hi @JordanM ,

You can change the svg icon file here, it will display fine: