Shopify Liquid

Info Section with images v1

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

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

Related snippets

/ shopify liquid

Info Section with images v1

Related snippets

Info Section with images v2

Infinite scrolling information

Before and after image slider

Reviews Slider v3