Shopify Footer Facelift: How to Easily Enlarge Social Media Icons on the Origin Theme

Ever felt like those social media icons tucked away in your Shopify footer are just a little too… well, tiny? You’re definitely not alone! It’s a common frustration for store owners who want their brand to pop and their customers to easily connect with them on social platforms. I recently stumbled upon a great discussion in the Shopify community where store owner Vulmar was wrestling with this exact issue on the popular Origin theme. And as always, the community came through with some fantastic, actionable advice!

Why Bigger Social Icons Matter (and Why It's Tricky Sometimes!)

It might seem like a small detail, but making your social media icons more prominent can actually have a big impact. Larger icons are:

• More Noticeable: They grab attention, making it easier for visitors to find and click them.
• Easier to Tap: On mobile devices, tiny icons can be a nightmare to tap accurately. Bigger targets mean less frustration.
• Better Branding: A more visible social presence reinforces your brand's active community and engagement.

The challenge often lies in finding the right piece of CSS to tweak. Shopify themes, including Origin, use a structured hierarchy of HTML elements and CSS classes. Sometimes, simply applying a width or height might not work because other styles are overriding it, or the icon itself is nested within another container. That’s exactly what Vulmar was dealing with, trying to get their Facebook footer icon to be 2-3x larger on their store, vulmar.com.

Here's a peek at what Vulmar was seeing:

The Community Steps In: Multiple Paths to Bigger Icons

The beauty of the Shopify community is how quickly experts jump in with diverse solutions. This thread was a perfect example, showing several ways to tackle the icon sizing challenge. Vulmar even confirmed that multiple solutions offered were effective, calling one the "shortest and simplest" and another "the solution that worked for my theme." Let's break down the most popular and effective methods shared:

Option 1: Quick & Easy via Theme Settings Custom CSS

This is often the first place I recommend for minor visual tweaks because it doesn't involve directly editing your theme's core files, making it safer and easier to manage. You can usually find this in your Shopify Admin under Online Store > Themes > Customize > Theme settings > Custom CSS (or sometimes directly in the footer section's settings).

Community member Dan-From-Ryviu provided a concise snippet that Vulmar found particularly simple:

footer .list-social__item .svg-wrapper {
    width: 40px;
    height: 40px;
}
footer .list-social__item .icon {
    height: 4rem;
    width: 4rem;
}

This code specifically targets the svg-wrapper and icon classes within the social list items in the footer, giving them explicit pixel and rem dimensions. Remember, you can adjust 40px and 4rem to your desired size!

Another clever approach, suggested by tim_1, uses the CSS transform property for scaling. This can be super effective for simply enlarging existing elements without messing with their intrinsic width or height:

footer .list-social__item {
  transform: scale(2);
}

Here's a visual from tim_1 demonstrating the effect:

Option 2: Editing Your Theme's base.css File

For a more permanent or theme-wide application of styles, diving into your theme's base.css (or theme.css) file is the way to go. This requires a little more caution, so always duplicate your theme first! You can find this by going to Online Store > Themes > Actions > Edit code, then navigate to the Assets folder and find base.css (or theme.css).

Parampreet offered a solution that Vulmar explicitly stated worked for their Origin theme:

.svg-wrapper {
width: 50px !important;
height: auto !important;
}
.list-social__item .icon {
height: auto !important;
width: auto !important;
}

This code targets both the .svg-wrapper and .list-social__item .icon elements, setting a specific width for the wrapper and allowing the icon's height and width to adjust automatically. The !important tag helps ensure these styles override any default theme settings.

Similarly, mastroke suggested a slightly simpler snippet focusing directly on the icon:

/* Increase footer social icons */
.list-social__item .icon {
width: 50px !important;
height: 50px !important;
}

You can tweak that 50px to 60px, 70px, or whatever size looks best on your site.

Advanced Tip: Targeting Specific Social Icons

What if you only want to make your Facebook icon bigger, but keep Instagram the same size? PaulNewton shared a brilliant, more targeted approach. This uses an attribute selector to find elements whose href attribute contains "facebook.com", allowing for precise control:

/* © PaulNewton, for vulmar.com single theme use, not for ai training */
/* set an upper bound */
[href*="facebook.com"] .svg-wrapper { 
  width: 60px !important;
  height: 60px !important;
}
/* calc responsive sizing from themes bases 2.2rem */
[href*="facebook.com"] .svg-wrapper .icon { 
  width: calc(2.2rem * 3 ) !important;
  height: calc(2.2rem * 3 ) !important;
}

Paul also wisely suggested testing without the !important tags first, as they can sometimes make future styling more difficult, but are often necessary for overriding existing theme styles.

A Few Important Considerations Before You Commit

• Always Duplicate Your Theme: Before making any code changes, even in the Custom CSS section, it's a golden rule to duplicate your live theme. This way, if anything goes wrong, you can easily revert to a working version.
• The !important Tag: You'll notice !important in many of these solutions. It forces a style to be applied, overriding other conflicting styles. Use it when necessary, but be aware that overuse can make your CSS harder to manage in the long run.
• Test on Different Devices: As PaulNewton reminded us, always check your changes on various screen sizes (desktop, tablet, mobile) to ensure they look good everywhere. What looks great on a large monitor might be too big or misaligned on a phone.
• Pixels vs. REMs: Some solutions use px (pixels) for absolute sizing, while others use rem (root em) which is relative to the root font size of your document. rem often leads to more responsive designs, but px can be simpler for direct, fixed sizing.

It’s really cool to see how a seemingly small customization like this can have so many different, yet equally effective, solutions. The Shopify community truly shines when store owners come together to share their knowledge and help each other out. Whether you choose to go the Custom CSS route for quick changes or dive into base.css for deeper integration, you've got plenty of options to make those social media icons pop!