Back to Shopify Liquid
Shopify Liquid
Fake FB Comment
Drop this Shopify Liquid snippet into your theme to add the fake fb comment block. Copy the code below, paste it into your theme files, save and you're done.
192 lines · 7.3 KB
Shopify Liquid
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Floating Comment Boxes</title>7<style>8 body.unique-body-ABC123 {9 font-family: Arial, sans-serif;10 background-color: #f0f2f5;11 margin: 0;12 padding: 20px;13 }1415 .unique-float-animation-container-DEF456 {16 overflow-x: auto;17 white-space: nowrap;18 max-width: 1280px;19 margin: 0 auto;20 padding: 10px;21 }2223 .unique-float-animation-container-DEF456::-webkit-scrollbar {24 display: none;25 }2627 .unique-comment-box-GHI789 {28 display: inline-block;29 background-color: white;30 border-radius: 15px;31 padding: 15px;32 width: 300px;33 max-width: 90%;34 box-shadow: 0 0 10px rgba(0,0,0,0.1);35 font-family: Arial, sans-serif;36 margin-right: 10px;37 vertical-align: top;38 white-space: normal;39 }4041 @keyframes unique-float-JKL012 {42 0% {43 transform: translateY(0);44 }45 50% {46 transform: translateY(-10px);47 }48 100% {49 transform: translateY(0);50 }51 }5253 .unique-float-animation1-MNO345 {54 animation: unique-float-JKL012 4s ease-in-out infinite;55 animation-delay: 0s;56 }5758 .unique-float-animation2-PQR678 {59 animation: unique-float-JKL012 4s ease-in-out infinite;60 animation-delay: 1s;61 }6263 .unique-float-animation3-STU901 {64 animation: unique-float-JKL012 4s ease-in-out infinite;65 animation-delay: 2s;66 }6768 .unique-float-animation4-VWX234 {69 animation: unique-float-JKL012 4s ease-in-out infinite;70 animation-delay: 3s;71 }72</style>73</head>74<body class="unique-body-ABC123">7576<div class="unique-float-animation-container-DEF456">77 <!-- First Comment Box -->78 <div class="unique-comment-box-GHI789 unique-float-animation1-MNO345">79 <div style="display: flex; align-items: center;">80 <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile Picture" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">81 <div>82 <div style="font-weight: bold; font-size: 16px;">John Doe</div>83 <div style="color: gray; font-size: 12px;">5h ago</div>84 </div>85 </div>86 <div style="margin-top: 10px; font-size: 14px; line-height: 1.5;">87 This product is fantastic! It has really made a positive difference in my daily routine. <span style="font-size: 16px;"></span>88 </div>89 <div style="display: flex; align-items: center; margin-top: 10px;">90 <div style="display: flex; align-items: center; margin-right: 15px;">91 <span style="font-size: 16px;">👍</span>92 <span style="font-size: 16px; margin-left: -10px;">❤️</span>93 <span style="font-size: 16px; margin-left: -10px;">😮</span>94 <span style="font-size: 14px; margin-left: 5px;">27</span>95 </div>96 <div style="font-size: 14px; margin-left: auto;">5 Comments</div>97 </div>98 <div style="border-top: 1px solid #e0e0e0; margin-top: 10px; padding-top: 10px; display: flex; justify-content: space-between; font-size: 14px; color: gray;">99 <div>Like</div>100 <div>Comment</div>101 <div>Share</div>102 </div>103 </div>104105 <!-- Second Comment Box -->106 <div class="unique-comment-box-GHI789 unique-float-animation2-PQR678">107 <div style="display: flex; align-items: center;">108 <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">109 <div>110 <div style="font-weight: bold; font-size: 16px;">Jane Smith</div>111 <div style="color: gray; font-size: 12px;">5h ago</div>112 </div>113 </div>114 <div style="margin-top: 10px; font-size: 14px; line-height: 1.5;">115 This product has changed my life! I can't believe how effective it is. <span style="font-size: 16px;">🌟</span>116 </div>117 <div style="display: flex; align-items: center; margin-top: 10px;">118 <div style="display: flex; align-items: center; margin-right: 15px;">119 <span style="font-size: 16px;">👍</span>120 <span style="font-size: 16px; margin-left: -10px;">❤️</span>121 <span style="font-size: 16px; margin-left: -10px;">😮</span>122 <span style="font-size: 14px; margin-left: 5px;">27</span>123 </div>124 <div style="font-size: 14px; margin-left: auto;">5 Comments</div>125 </div>126 <div style="border-top: 1px solid #e0e0e0; margin-top: 10px; padding-top: 10px; display: flex; justify-content: space-between; font-size: 14px; color: gray;">127 <div>Like</div>128 <div>Comment</div>129 <div>Share</div>130 </div>131 </div>132133 <!-- Third Comment Box -->134 <div class="unique-comment-box-GHI789 unique-float-animation3-STU901">135 <div style="display: flex; align-items: center;">136 <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile Picture" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">137 <div>138 <div style="font-weight: bold; font-size: 16px;">Michael Johnson</div>139 <div style="color: gray; font-size: 12px;">5h ago</div>140 </div>141 </div>142 <div style="margin-top: 10px; font-size: 14px; line-height: 1.5;">143 Absolutely love it! It's a game changer. <span style="font-size: 16px;">🔥</span>144 </div>145 <div style="display: flex; align-items: center; margin-top: 10px;">146 <div style="display: flex; align-items: center; margin-right: 15px;">147 <span style="font-size: 16px;">👍</span>148 <span style="font-size: 16px; margin-left: -10px;">❤️</span>149 <span style="font-size: 16px; margin-left: -10px;">😮</span>150 <span style="font-size: 14px; margin-left: 5px;">27</span>151 </div>152 <div style="font-size: 14px; margin-left: auto;">5 Comments</div>153 </div>154 <div style="border-top: 1px solid #e0e0e0; margin-top: 10px; padding-top: 10px; display: flex; justify-content: space-between; font-size: 14px; color: gray;">155 <div>Like</div>156 <div>Comment</div>157 <div>Share</div>158 </div>159 </div>160161 <!-- Fourth Comment Box -->162 <div class="unique-comment-box-GHI789 unique-float-animation4-VWX234">163 <div style="display: flex; align-items: center;">164 <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Profile Picture" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">165 <div>166 <div style="font-weight: bold; font-size: 16px;">Emily Davis</div>167 <div style="color: gray; font-size: 12px;">5h ago</div>168 </div>169 </div>170 <div style="margin-top: 10px; font-size: 14px; line-height: 1.5;">171 Highly recommend! Great quality and performance. <span style="font-size: 16px;">👍</span>172 </div>173 <div style="display: flex; align-items: center; margin-top: 10px;">174 <div style="display: flex; align-items: center; margin-right: 15px;">175 <span style="font-size: 16px;">👍</span>176 <span style="font-size: 16px; margin-left: -10px;">❤️</span>177 <span style="font-size: 16px; margin-left: -10px;">😮</span>178 <span style="font-size: 14px; margin-left: 5px;">27</span>179 </div>180 <div style="font-size: 14px; margin-left: auto;">5 Comments</div>181 </div>182 <div style="border-top: 1px solid #e0e0e0; margin-top: 10px; padding-top: 10px; display: flex; justify-content: space-between; font-size: 14px; color: gray;">183 <div>Like</div>184 <div>Comment</div>185 <div>Share</div>186 </div>187 </div>188</div>189190</body>191</html>
