How to enlarge social icons in my announcement bar?
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.
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
@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:
You can add the below code:
-
Go to Online Store → Theme → Edit code https://prnt.sc/XkUYXZPnym_E
-
Open your base.css in the Assets folder.
-
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
It worked thank you so much!
Hi @xammyja ,
I am so glad that my solution can help
.

