Hi
I want to change the social icons size on any page I had them.
I tried coding but nothing happens
Please help.
The theme is Jazzbeat
Hello @jlozano
please share your store URL and let me know what you want with size increase or decrease.
Hi @jlozano
This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
To change the size of the social icons on your Shopify store using the Jazzbeat theme, you will need to edit the CSS code for the theme.
In your Shopify admin panel, navigate to the Themes section.
- Click on the “Actions” button for the Jazzbeat theme, and then select “Edit code” from the dropdown menu.
- In the left sidebar, navigate to the Assets folder, and then open the component-list-social.css file.
- Look for the code that controls the size of the social icons. It might be labeled as something like “list-social__item .icon ".
- Add or edit the “width” and “height” properties to adjust the size of the icons. Example: .list-social__item .icon { width: 40px; height: 40px; }
- Save your changes.
hi
livnutrition.mx
I want to increase
But is there a way to set in different sizes on different pages, what I want is to have the option to set the size that I want on the page that I want.
Could it be possible?
Hello @jlozano
You can add code by following these steps to increase social icons on the homepage
-
Go to Online Store → Theme → Edit code.
-
Open your theme.css theme file
-
Paste the below code at the bottom of theme.css
body.template-index .social-media-links svg {
width:40px !important;
height:40px !important;
}
on different pages you can find the class and replace that in above code so it will work on individual pages different sizes.
No doesn’t work!!
Hello @jlozano
please send me screenshot how you added code on file
Hello @jlozano
match the code which i sent and you added there please(adding once again below)
body.template-index .social-media-links svg {
width:40px !important;
height:40px !important;
}
Nice it works!!
Thanks
Hi
So If I want to change the size on other page, I have to go to that page template?
In the TEMPLATES FOLDER (Plantillas-Spanish) I send an image to see if I’m in the correct folder.
Thanks again
Hello @jlozano
you do not need to edit template files.
you can just edit css or let me know for which page you want different size icons i will let you know 1 more sample code
Hello @jlozano
see this screenshot for page class
and code again on same file i mentioned above
body.page-iniciativas .social-media-links svg {
width:40px !important;
height:40px !important;
}
Thanks
You are the master!!!
1 Like
Thankyou so much for your words @jlozano