Shopify themes, liquid, logos, and UX
<!-- Trust Badge created and verified by https://www.imcwire.com -->
<div style="width:100%;margin-top:10px;all:unset;">
<style scoped>
.imcwire-logo-container-item {
height: auto;
width: 100%;
position: relative;
padding: 10px 10px;
}
.imcwire-vertical-center {
height: inherit;
display: flex;
align-content: center;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
}
.imcwire-vertical-center img.imcwire-news-logo {
max-width: 100px;
max-height: 66px;
min-width: 50px;
min-height: 14px;
height: auto;
width: auto;
margin: 7px 10px;
overflow: visible;
}
.imcwire-trust-badge,
.imcwire-title,
.imcwire-footer {
font-family: sans-serif !important;
}
.imcwire-title:before,
.imcwire-title:after {
content: "";
flex: 1 1;
border-bottom: 1px solid #d8d8d8;
margin: auto;
width: 27%;
display: block;
position: relative;
}
.imcwire-title:before {
margin-left: 30px;
top: 12px;
}
.imcwire-title:after {
margin-right: 30px;
top: -13px;
}
@media screen and (min-width: 585px) {
.imcwire-logo-container {
padding: 0 20px;
}
}
@media screen and (max-width: 584px) {
.imcwire-news-logo {
max-width: 70px !important;
}
.imcwire-title {
font-size: 15px;
top: -5px;
letter-spacing: 6px;
}
.imcwire-title:before,
.imcwire-title:after {
border-bottom: none !important;
}
.imcwire-leaf {
display: none !important;
}
}
@media screen and (max-width: 340px) {
.imcwire-title-hr {
display: none !important;
}
.imcwire-title {
font-size: 14px;
padding: 0 !important;
}
.imcwire-footer {
font-size: 11px !important;
margin: 20px 0 25px 0 !important;
letter-spacing: 2px !important;
}
.imcwire-news-logo {
max-width: 50px !important;
}
}
.imcwire-logo-container {
text-align: center;
margin: 0 auto 0 auto;
display: flex;
align-content: center;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
.imcwire-newslogos {
display: inline-block;
position: relative;
}
</style>
<div id="imcwire-trust-badge"
style="position: relative;width:100%;background:#ffffff;border-radius:10px;min-height:180px;margin-left: auto;margin-right: auto;padding-bottom:12px;">
<div
style="text-align:center;padding:0px 5px 10px 5px;font-size: 18px;font-family: sans-serif;font-weight: 600;letter-spacing: 8px;line-height: 1.3;">
<div style="height: 58px;">
<span class="imcwire-title" style="z-index: 1; position: relative; padding: 0 20px;margin:0;color:#0e0e0e;">AS SEEN ON</span>
</div>
<div class="imcwire-logo-container">
<div class="imcwire-logo-container-item">
<div class="imcwire-vertical-center">
<a href="https://www.bloomberg.com" target="_Blank" class="imcwire-newslogos">
<img alt="Featured on Bloomberg" class="imcwire-news-logo" src="https://via.placeholder.com/100x66?text=Bloomberg">
</a>
<a href="https://www.marketwatch.com" target="_Blank" class="imcwire-newslogos">
<img alt="Featured on MarketWatch" class="imcwire-news-logo" src="https://via.placeholder.com/100x66?text=MarketWatch">
</a>
<a href="https://www.yahoo.com/news" target="_Blank" class="imcwire-newslogos">
<img alt="Featured on Yahoo News" class="imcwire-news-logo" src="https://via.placeholder.com/100x66?text=Yahoo+News">
</a>
<a href="https://www.digitaljournal.com" target="_Blank" class="imcwire-newslogos">
<img alt="Featured on Digital Journal" class="imcwire-news-logo" src="https://via.placeholder.com/100x66?text=Digital+Journal">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of IMCWire Trust Badge -->
try this in the custom liquid and html section
<div class="instagram-feed">
<div class="instagram-post">
<blockquote
class="instagram-media"
data-instgrm-permalink="https://www.instagram.com/p/POST_ID/"
data-instgrm-version="14"
></blockquote>
</div>
<div class="instagram-post">
<blockquote
class="instagram-media"
data-instgrm-permalink="https://www.instagram.com/p/ANOTHER_POST_ID/"
data-instgrm-version="14"
></blockquote>
</div>
<div class="instagram-post">
<blockquote
class="instagram-media"
data-instgrm-permalink="https://www.instagram.com/p/YET_ANOTHER_POST_ID/"
data-instgrm-version="14"
></blockquote>
</div>
</div>
<script async src="//www.instagram.com/embed.js"></script>
<style>
/* Container for the Instagram Feed */
.instagram-feed {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
gap: 20px; /* Space between posts */
max-width: 1200px; /* Restrict max width */
margin: 0 auto; /* Center the feed */
padding: 20px;
}
/* Individual Instagram Post */
.instagram-post {
position: relative;
min-width: 200px;
aspect-ratio: 1 / 1; /* Maintain square aspect ratio */
overflow: hidden;
background-color: #f9f9f9; /* Fallback background color */
border-radius: 10px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
display: flex;
align-items: center;
justify-content: center;
}
/* Hover effect for better interactivity */
.instagram-post:hover {
transform: scale(1.05); /* Slight zoom on hover */
transition: transform 0.3s ease;
}
/* Responsive Design */
@media screen and (max-width: 1024px) {
.instagram-feed {
grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
}
}
@media screen and (max-width: 768px) {
.instagram-feed {
grid-template-columns: 1fr; /* 1 column on small screens */
}
}
</style>
If this fixed your issue, likes and accepting as a solution are highly appreciated
| Build an online presence with our custom-built Shopify Theme: EcomifyTheme
| Check out our reviews: Trustpilot Reviews
| We are Shopify Partners: EcomGraduates Shopify Partner
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025