Shopify Liquid

Info Section with images v2

Drop this Shopify Liquid snippet into your theme to add the info section with images v2 block. Copy the code below, paste it into your theme files, save and you're done.

108 lines · 2.8 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    <style>
7        .flex-container {
8            display: flex;
9            flex-wrap: wrap;
10            justify-content: center;
11        }
12
13        .item-box {
14            margin: 10px;
15            text-align: center;
16
17        }
18
19        .item-box img {
20            width: 30%;
21border-radius: 50%;
22object-fit: cover;
23        }
24
25        .item-title {
26            margin: 5px 0;
27        }
28
29        .item-description {
30            margin: 5px 0;
31        }
32
33        
34        @media (min-width: 768px) {
35            .item-box {
36                flex: 0 0 30%; 
37            }
38        .item-box img {
39            width: 30%;
40margin-bottom: 15px;
41min-width: 150px;
42        }
43                .flex-container{
44        display: flex;
45    flex-wrap: wrap;
46    max-width: 1000px;
47    align-content: center;
48        }
49}
50
51        
52        @media (max-width: 767px) {
53            .flex-container {
54                flex-direction: column;
55            }
56        .item-box img {
57            width: 32%!important;
58        }
59
60            .item-box {
61                display: flex;
62                flex-direction: row;
63                align-items: center;
64                justify-content: center;
65                flex-wrap: wrap;
66            }
67
68            .item-box:nth-child(odd) {
69                flex-direction: row-reverse; 
70            }
71
72            .item-box img, .item-box .text-content {
73                width: 60%; 
74            }
75        }
76
77      
78    </style>
79</head>
80<body>
81
82<div class="container" style = "justify-content: center; display: flex;">
83    <div class="flex-container" style="padding: 30px 0px 30px 0px;">
84        <div class="item-box">
85            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQOuXSNhx4c8pKvcysPWidz4NibDU-xLeaJw&s" alt="Image 1">
86            <div class="text-content">
87                <h4 class="item-title">Title 1</h4>
88                <p class="item-description">Description 1 goes here</p>
89            </div>
90        </div>
91        <div class="item-box">
92            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQOuXSNhx4c8pKvcysPWidz4NibDU-xLeaJw&s" alt="Image 2">
93            <div class="text-content">
94                <h4 class="item-title">Title 2</h4>
95                <p class="item-description">Description 2 goes here</p>
96            </div> </div>
97        <div class="item-box">
98            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQOuXSNhx4c8pKvcysPWidz4NibDU-xLeaJw&s" alt="Image 3">
99            <div class="text-content">
100                <h4 class="item-title">Title 3</h4>
101                <p class="item-description">Description 3 goes here</p>
102            </div>
103        </div>
104    </div>
105</div>
106
107</body>
108</html>

Related snippets

/ shopify liquid

Info Section with images v2

Related snippets

Infinite scrolling information

Before and after image slider

Reviews Slider v3

Made in USA