social icon

Shopify Discussion

Topic summary

A user enabled the “mega social icon bar” app but encountered a display issue where store icons appeared as square shapes instead of proper icons.

Another user provided a CSS solution to resolve the problem. The fix involves:

  • Adding custom CSS code to theme.css or base.css
  • Setting proper image display properties (block display, auto width, 30px height)
  • Making backgrounds transparent and removing borders
  • Including responsive adjustments for mobile devices (max-width: 767px)

The issue appears to be a styling conflict that can be corrected through custom CSS overrides.

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

hi. i was enabled mega social icon bar but while this app enabled at that time other store icon not show just showing square shape

1 Like
2

Hello @Noore try adding custom CSS to fix it. You can add this to your theme.css or base.css

.store-icon-class img {
    display: block !important;
    width: auto !important;
    height: 30px;
}

.store-icon-class {
    background: transparent !important;
    border: none !important;
}

.store-icon-class {
    display: inline-block !important;
    margin-right: 10px;
}

@media only screen and (max-width: 767px) {
    .store-icon-class img {
        width: 30px !important;
    }
}

thankyou :blush: