Enlarge icons in announcement bar - Effortless theme

Topic summary

A user needed help enlarging social media icons in the announcement bar of their Effortless theme Shopify store.

Solution Provided:

  • Navigate to Online Store → Theme → Edit code
  • Open base.css file in the Assets folder
  • Add CSS code targeting the announcement section social link SVG elements
  • Adjust width and height properties (suggested: 20px or 25px with !important flags)

Outcome:
The CSS solution successfully resolved the issue. Two different code snippets were offered by community members, both targeting the same elements with slightly different selectors and dimensions.

Status: Resolved - user confirmed the fix worked.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.

How to enlarge social icons in my announcement bar?

Hello @xammyja

Can you give me your page URL (with pass if your store password is enabled), so I can check it?

Kind & Best regards,
GemPages Support Team

https://karimadon-philippines.myshopify.com/

PASSWORD: niajuy

Thank you!

@xammyja
Add below css into base.css file

.announcement .announcement__list-social svg, .announcement .announcement__list-tel .icon {
    width: 25px !important;
    height: 25px !important;
}

otherwise replace your svg file code with below code :

Facebook svg code :


Instagram svg code:


1 Like

@xammyja

You can add the below code:

  1. Go to Online Store → Theme → Edit code https://prnt.sc/XkUYXZPnym_E

  2. Open your base.css in the Assets folder.

  3. Paste the below code at the end of the file.

#shopify-section-announcement .social-link svg{
    width: 20px !important;
    height: 20px !important;
}

You can change the width and height of icons.

Best regards,
GemPages Support Team

1 Like

It worked thank you so much!

Hi @xammyja ,

I am so glad that my solution can help :grin: .