text and image
Page: Product Pages (Optimized for Conversions)


Snippet Code
<style>
#OverlappingImages--template--14451231457366__4713b245-a7f3-4086-bc2b-30858e59764e {
--PT: 59px;
--PB: 60px;
--image-offset: 60px;
}
.overlapping-images {
--image-offset-negative: 60px;
overflow: hidden;
background: #ffffff;
}
.section-padding11 {
--padding-top: 59px;
--padding-bottom: 60px;
padding-top: 59px;
padding-bottom: 60px;
}
.wrapper11 {
width: 1440px;
margin: 0 auto;
max-width: 100%;
}
.overlapping-images__block {
margin: 0 auto;
}
.overlapping-images__images--single-mobile {
padding-bottom: 0;
}
.overlapping-images__images {
position: relative;
width: 100%;
padding: 0;
}
.overlapping-images__images-inner--single {
width: 100%;
margin: 0;
}
.overlapping-images__images-inner {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}
.body--rounded-corners .overlapping-images__image {
border-radius: 8px;
overflow: hidden;
}
.overlapping-images__image {
position: relative;
flex: 1 0 50%;
max-height: 560px;
background-color: #ffffff;
}
.overlapping-images__image-bg {
position: relative;
max-height: inherit;
background: center center / cover no-repeat;
}
.bg-pos-center-center {
background-position: center center !important;
}
.overlapping-images__image-bg::before {
content: "";
display: block;
width: 100%;
height: 0;
min-height: 1px;
font-size: 0;
padding-top: 100.0%;
}
.overlapping-images__content {
max-width: 600px;
}
.text-left {
text-align: left;
}
.main-heading11 {
color: #000;
margin-bottom: 10px;
font-size: 48px;
line-height: 1.2;
font-family: "Instrument Sans", sans-serif;
font-weight: 400;
font-style: normal;
margin: 0 0 24.48px;
}
.overlapping-images__text {
font-size: 21.12px;
margin: 0;
}
.main-text11 {
display: block;
color: #000;
font-family: "Instrument Sans", sans-serif;
font-weight: 400;
font-style: normal;
}
.rte :last-child {
margin-bottom: 0;
}
.overlapping-images__text ul {
margin-left: 0;
list-style-type: none;
}
ul {
margin: 0 0 60px 20px;
padding: 0;
}
.overlapping-images__text ul li {
position: relative;
padding-left: 38.4px;
font-size: 17px;
}
.rte li {
margin-bottom: 7px;
}
.overlapping-images__text ul li::marker {
content: "";
}
.overlapping-images__text ul li::before {
content: "";
display: block;
position: absolute;
top: 9px;
left: 8px;
border-style: solid;
border-width: 0 0 1px 1px;
border-color: #000;
width: 9.25px;
height: 5.25px;
transform: rotate(-45deg);
list-style-type: none;
}
.wrapper11:after {
display: table;
content: "";
clear: both;
}
@media only screen and (min-width: 768px) {
.overlapping-images__block {
display: grid;
align-items: center;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.overlapping-images__block--reverse .overlapping-images__images {
order: 1;
}
}
@media only screen and (min-width: 1024px) {
.wrapper11 {
padding: 0 60px;
}
}
@media only screen and (min-width: 1440px) {
.overlapping-images__block {
gap: 60px;
}
.overlapping-images__block--reverse .overlapping-images__images {
margin: 0 auto 0 0;
}
.overlapping-images__block--reverse .overlapping-images__content {
margin: 0 0 0 auto;
}
.overlapping-images__content {
width: 75%;
}
}
@media only screen and (max-width: 767px) {
.section-padding11 {
--padding-top: 59px;
--padding-bottom: 60px;
}
.overlapping-images__images--single-mobile .overlapping-images__images-inner {
width: 100%;
margin-left: 0;
}
.overlapping-images__content {
padding-top: 30px;
margin-bottom: -15px;
}
.main-heading11 {
font-size: 36px;
}
}
</style>
<div id="shopify-section-template--14451231457366__4713b245-a7f3-4086-bc2b-30858e59764e" class="shopify-section">
<section id="OverlappingImages--template--14451231457366__4713b245-a7f3-4086-bc2b-30858e59764e"
class="section-padding11 overlapping-images"
data-section-id="template--14451231457366__4713b245-a7f3-4086-bc2b-30858e59764e"
data-section-type="overlapping-images">
<div class="wrapper11">
<div class="overlapping-images__block overlapping-images__block--reverse">
<div class="overlapping-images__images overlapping-images__images--single-mobile"
style="max-width: 600px;">
<div
class="overlapping-images__images-inner overlapping-images__images-inner--single">
<div class="overlapping-images__image lazy-image"
style="background-image: none;">
<div class="overlapping-images__image-bg bg-pos-center-center lazyloaded"
data-bgset="//olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1_180x.jpg?v=1643902424 180w 180h, //olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1_360x.jpg?v=1643902424 360w 360h, //olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1_540x.jpg?v=1643902424 540w 540h, //olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1.jpg?v=1643902424 600w 600h"
data-parent-fit="cover"
style="--aspect-ratio: 100.0%; background-image: url("https://olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1.jpg?v=1643902424");">
<picture style="display: none;">
<source data-srcset="//olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1_180x.jpg?v=1643902424 180w 180h, //olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1_360x.jpg?v=1643902424 360w 360h, //olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1_540x.jpg?v=1643902424 540w 540h, //olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1.jpg?v=1643902424 600w 600h"
sizes="593px"
srcset="//olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1_180x.jpg?v=1643902424 180w 180h, //olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1_360x.jpg?v=1643902424 360w 360h, //olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1_540x.jpg?v=1643902424 540w 540h, //olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1.jpg?v=1643902424 600w 600h">
<img alt=""
class="lazyautosizes lazyloaded ls-is-cached"
data-sizes="auto"
data-parent-fit="cover" sizes="593px">
</picture>
</div>
<noscript>
<div class="overlapping-images__image-bg bg-pos-center-center"
style="background-image: url(//olivercompanylondon.com/cdn/shop/files/Oliver_Co._vegan_wallets_photo_1_1024x.jpg?v=1643902424); --aspect-ratio: 100.0%;">
</div>
</noscript>
</div>
</div>
</div>
<div class="overlapping-images__content text-left">
<h2 class="overlapping-images__heading main-heading11">Crafted for Everyday Use
</h2>
<div class="overlapping-images__text main-text11 rte">
<ul>
<li>Hand-painted edges for a refined finish</li>
<li>Reinforced spine for long-lasting durability</li>
<li>Holds up to 12 cards while staying slim</li>
<li>Built-in RFID protection to keep your cards secure</li>
<li>Quick-access pocket for bank notes or your most-used card
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>