icon and text
Page: Product Pages (Optimized for Conversions)
Snippet Code
<style>
#shopify-section-template--14451231457366__wallet-comparison .wallet-comparison {
padding-bottom: 96px;
}
.wallet-comparison {
padding-top: 135px;
}
.wrapper--full-padded {
width: 100%;
margin: 0 auto;
max-width: 100%;
}
.comparison__heading {
margin-bottom: 19px;
font-size: 34px;
line-height: 49px;
text-align: center;
}
.comparison__subtext {
display: block;
margin-bottom: 57px;
font-size: 19px;
line-height: 26px;
text-align: center;
}
.comparison__table-wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0 auto;
max-width: 796px;
}
.comparison__table-column {
display: flex;
flex-direction: column;
padding: 13px 0;
background-color: white;
}
.comparison__table-column:first-of-type .comparison__table-cell:first-of-type {
border-radius: 5px 0 0 0;
}
.comparison__table-cell:first-of-type {
border: none;
height: 88px;
}
.comparison__table-cell {
display: flex;
justify-content: center;
align-items: center;
padding: 0 33px;
height: 93px;
border-top: 1px solid #00000033;
background-color: #FAFAFA;
}
.comparison__table-cell-label {
display: block;
font-size: 19.2px;
line-height: 23.04px;
text-align: center;
font-weight: 500;
}
.comparison__table-column:nth-of-type(2) {
padding: 0;
border: 1px solid black;
}
.comparison__table-column:nth-of-type(2) .comparison__table-cell:first-of-type {
background-color: black;
height: 100.8px;
}
svg:not(:root) {
overflow: hidden;
}
.icon-oliver-table {
display: flex;
align-items: center;
justify-content: center;
width: 166px;
height: 23px;
}
.cls-1 {
fill: #fff;
}
.comparison__table-column:nth-of-type(2) .comparison__table-cell {
background-color: white;
}
.icon-checkmark {
display: flex;
align-items: center;
justify-content: center;
overflow: visible !important;
height: 40px;
width: 40px;
}
.icon-checkmark-mobile {
display: none;
width: 26px;
height: 26px;
}
.comparison__table-column:last-of-type .comparison__table-cell:first-of-type {
border-radius: 0 5px 0 0;
}
.comparison__table-heading {
display: block;
font-size: 19.2px;
line-height: 25px;
text-align: center;
font-weight: 500;
}
.icon-crossmark {
display: flex;
align-items: center;
justify-content: center;
height: 51px;
width: 51px;
}
.icon-crossmark-mobile {
display: none;
width: 26px;
height: 26px;
}
.wrapper--full-padded:after {
display: table;
content: "";
clear: both;
}
.comparison__table-column:first-of-type .comparison__table-cell:last-of-type {
border-radius: 0 0 0 5px;
}
.comparison__table-cell:last-of-type {
height: 91px;
}
.comparison__table-column:nth-of-type(2) .comparison__table-cell:last-of-type {
height: 100.8px;
}
.comparison__table-cell-value-label {
display: block;
text-align: center;
}
.comparison__table-column:last-of-type .comparison__table-cell:last-of-type {
border-radius: 0 0 5px 0;
}
@media only screen and (min-width: 1024px) {
.wrapper--full-padded {
padding: 0 60px;
--wrapper-width: 1920px;
}
}
@media (max-width: 768px) {
.comparison__heading {
margin-bottom: 13px;
}
.comparison__subtext {
margin-bottom: 32px;
font-size: 15px;
line-height: 21px;
}
.comparison__table-wrapper {
overflow-x: scroll;
display: flex;
width: 100%;
max-width: 322px;
}
.comparison__table-column:first-of-type .comparison__table-cell {
width: 132px;
}
.comparison__table-cell:first-of-type {
height: 44px;
}
.comparison__table-cell {
height: 61px;
}
.comparison__table-cell-label {
font-size: 10px;
line-height: 12px;
}
.comparison__table-column:nth-of-type(2) .comparison__table-cell:first-of-type {
height: 54px;
}
.comparison__table-column:nth-of-type(2) .comparison__table-cell {
padding: 0 8px;
width: 95px;
border: none !important;
}
.icon-checkmark {
display: none;
}
.icon-checkmark-mobile {
display: block;
}
.comparison__table-column:last-of-type .comparison__table-cell {
width: 91px;
padding: 0 17px;
}
.comparison__table-heading {
font-size: 9px;
line-height: 11.7px;
}
.icon-crossmark {
display: none;
}
.icon-crossmark-mobile {
display: block;
}
.comparison__table-cell:last-of-type {
height: 54px;
}
.comparison__table-column:nth-of-type(2) .comparison__table-cell:last-of-type,
.comparison__table-cell:last-of-type {
height: 54px;
}
.comparison__table-cell-value-label {
font-size: 11px;
line-height: 14px;
}
}
</style>
<div id="shopify-section-template--14451231457366__wallet-comparison" class="shopify-section">
<section class="wallet-comparison">
<div class="wrapper--full-padded">
<h1 class="comparison__heading">
Oliver Co vs. Standard Wallets
</h1>
<span class="comparison__subtext">
We give you the best quality you can get – from our materials to our customer service.
</span>
<div class="comparison__table-wrapper">
<div class="comparison__table-column">
<div class="comparison__table-cell"></div>
<div class="comparison__table-cell">
<span class="comparison__table-cell-label">
Premium sustainable materials
</span>
</div>
<div class="comparison__table-cell">
<span class="comparison__table-cell-label">
Beautiful, refined detailing
</span>
</div>
<div class="comparison__table-cell">
<span class="comparison__table-cell-label">
Compact, modern design
</span>
</div>
<div class="comparison__table-cell">
<span class="comparison__table-cell-label">
Ethical, transparent sourcing
</span>
</div>
<div class="comparison__table-cell">
<span class="comparison__table-cell-label">
Designed in the UK
</span>
</div>
<div class="comparison__table-cell">
<span class="comparison__table-cell-label">
Warranty
</span>
</div>
</div>
<div class="comparison__table-column">
<div class="comparison__table-cell">
<svg class="icon-oliver-table" xmlns="http://www.w3.org/2000/svg"
id="Layer_1" data-name="Layer 1" viewBox="0 0 142.82 14.3">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<path class="cls-1"
d="m14.08,7.21c-.04,3.55-2.21,7.09-7.03,7.09S0,10.83,0,7.23,2.31,0,7.05,0s7.07,3.62,7.03,7.21m-11.54.06c.06,2.25,1.27,4.66,4.5,4.66s4.45-2.43,4.48-4.68c.04-2.31-1.25-4.9-4.48-4.9S2.49,4.96,2.55,7.27M20.89.27v13.71h9.63v-2.39h-7.05V.27h-2.58Zm16.38,13.71h2.57V.27h-2.57v13.71ZM60.31.27h-2.9l-4.15,10.67L49.12.27h-2.9l5.7,13.77h2.68L60.31.27Zm16.72,11.16h-7.7v-3.09h7.42v-2.41h-7.42v-3.15h7.7V.27h-10.26v13.71h10.26v-2.55Zm19.07,2.55h-3.07l-4-4.58h-2.49v4.58h-2.59V.26c2.18,0,4.35.02,6.52.02,3.23.02,4.94,2.17,4.94,4.54,0,1.88-.86,3.78-3.47,4.31l4.15,4.68v.18Zm-9.56-11.3v4.39h3.94c1.65,0,2.35-1.1,2.35-2.19s-.73-2.19-2.35-2.19h-3.94Zm34.7,7.79c-.9.9-2.25,1.39-3.45,1.39-3.39,0-4.7-2.37-4.72-4.64-.02-2.29,1.41-4.76,4.72-4.76,1.19,0,2.41.41,3.31,1.29l1.72-1.66c-1.41-1.39-3.17-2.1-5.03-2.1-4.95,0-7.29,3.64-7.27,7.23.02,3.56,2.18,7.07,7.27,7.07,1.98,0,3.8-.65,5.21-2.04l-1.76-1.78Zm21.59-3.27c-.04,3.55-2.21,7.09-7.03,7.09s-7.05-3.47-7.05-7.07S131.05,0,135.79,0s7.07,3.62,7.03,7.21m-11.54.06c.06,2.25,1.27,4.66,4.51,4.66s4.44-2.43,4.48-4.68c.04-2.31-1.25-4.9-4.48-4.9s-4.56,2.6-4.51,4.91">
</path>
</svg>
</div>
<div class="comparison__table-cell">
<svg class="icon-checkmark" xmlns="http://www.w3.org/2000/svg"
fill="none">
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.538"
d="M30.16 15.998 17.931 27.663l-6.104-5.833"></path>
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.538"
d="M21 40.993c11.046 0 20-8.953 20-19.996C41 9.953 32.046 1 21 1S1 9.953 1 20.997C1 32.04 9.954 40.993 21 40.993Z">
</path>
</svg>
<svg class="icon-checkmark-mobile" xmlns="http://www.w3.org/2000/svg"
width="26" height="26" fill="none" viewBox="0.49 0.5 27.01 27">
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round"
d="M19.953 10.752 12 18.337l-3.969-3.793"></path>
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round"
d="M13.996 27.004c7.182 0 13.005-5.821 13.005-13.002C27 6.822 21.178 1 13.996 1S.992 6.821.992 14.002c0 7.18 5.822 13.002 13.005 13.002Z">
</path>
</svg>
</div>
<div class="comparison__table-cell">
<svg class="icon-checkmark" xmlns="http://www.w3.org/2000/svg"
fill="none">
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.538"
d="M30.16 15.998 17.931 27.663l-6.104-5.833"></path>
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.538"
d="M21 40.993c11.046 0 20-8.953 20-19.996C41 9.953 32.046 1 21 1S1 9.953 1 20.997C1 32.04 9.954 40.993 21 40.993Z">
</path>
</svg>
<svg class="icon-checkmark-mobile" xmlns="http://www.w3.org/2000/svg"
width="26" height="26" fill="none" viewBox="0.49 0.5 27.01 27">
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round"
d="M19.953 10.752 12 18.337l-3.969-3.793"></path>
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round"
d="M13.996 27.004c7.182 0 13.005-5.821 13.005-13.002C27 6.822 21.178 1 13.996 1S.992 6.821.992 14.002c0 7.18 5.822 13.002 13.005 13.002Z">
</path>
</svg>
</div>
<div class="comparison__table-cell">
<svg class="icon-checkmark" xmlns="http://www.w3.org/2000/svg"
fill="none">
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.538"
d="M30.16 15.998 17.931 27.663l-6.104-5.833"></path>
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.538"
d="M21 40.993c11.046 0 20-8.953 20-19.996C41 9.953 32.046 1 21 1S1 9.953 1 20.997C1 32.04 9.954 40.993 21 40.993Z">
</path>
</svg>
<svg class="icon-checkmark-mobile" xmlns="http://www.w3.org/2000/svg"
width="26" height="26" fill="none" viewBox="0.49 0.5 27.01 27">
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round"
d="M19.953 10.752 12 18.337l-3.969-3.793"></path>
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round"
d="M13.996 27.004c7.182 0 13.005-5.821 13.005-13.002C27 6.822 21.178 1 13.996 1S.992 6.821.992 14.002c0 7.18 5.822 13.002 13.005 13.002Z">
</path>
</svg>
</div>
<div class="comparison__table-cell">
<svg class="icon-checkmark" xmlns="http://www.w3.org/2000/svg"
fill="none">
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.538"
d="M30.16 15.998 17.931 27.663l-6.104-5.833"></path>
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.538"
d="M21 40.993c11.046 0 20-8.953 20-19.996C41 9.953 32.046 1 21 1S1 9.953 1 20.997C1 32.04 9.954 40.993 21 40.993Z">
</path>
</svg>
<svg class="icon-checkmark-mobile" xmlns="http://www.w3.org/2000/svg"
width="26" height="26" fill="none" viewBox="0.49 0.5 27.01 27">
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round"
d="M19.953 10.752 12 18.337l-3.969-3.793"></path>
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round"
d="M13.996 27.004c7.182 0 13.005-5.821 13.005-13.002C27 6.822 21.178 1 13.996 1S.992 6.821.992 14.002c0 7.18 5.822 13.002 13.005 13.002Z">
</path>
</svg>
</div>
<div class="comparison__table-cell">
<svg class="icon-checkmark" xmlns="http://www.w3.org/2000/svg"
fill="none">
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.538"
d="M30.16 15.998 17.931 27.663l-6.104-5.833"></path>
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.538"
d="M21 40.993c11.046 0 20-8.953 20-19.996C41 9.953 32.046 1 21 1S1 9.953 1 20.997C1 32.04 9.954 40.993 21 40.993Z">
</path>
</svg>
<svg class="icon-checkmark-mobile" xmlns="http://www.w3.org/2000/svg"
width="26" height="26" fill="none" viewBox="0.49 0.5 27.01 27">
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round"
d="M19.953 10.752 12 18.337l-3.969-3.793"></path>
<path stroke="#D46114" stroke-linecap="round"
stroke-linejoin="round"
d="M13.996 27.004c7.182 0 13.005-5.821 13.005-13.002C27 6.822 21.178 1 13.996 1S.992 6.821.992 14.002c0 7.18 5.822 13.002 13.005 13.002Z">
</path>
</svg>
</div>
<div class="comparison__table-cell">
<span class="comparison__table-cell-value-label">
2 years
</span>
</div>
</div>
<div class="comparison__table-column">
<div class="comparison__table-cell">
<span class="comparison__table-heading">
Standard wallets
</span>
</div>
<div class="comparison__table-cell">
<svg class="icon-crossmark" xmlns="http://www.w3.org/2000/svg"
width="3.1875rem" height="3.1875rem" fill="none">
<path stroke="#5C5C5C" stroke-miterlimit="10"
stroke-width="1.275"
d="M25.502 44.614c10.563 0 19.125-8.56 19.125-19.12s-8.562-19.12-19.125-19.12c-10.562 0-19.125 8.56-19.125 19.12s8.563 19.12 19.125 19.12Z">
</path>
<path stroke="#5C5C5C" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.275"
d="m31.877 19.12-12.75 12.747M31.877 31.867l-12.75-12.746">
</path>
</svg>
<svg class="icon-crossmark-mobile" xmlns="http://www.w3.org/2000/svg"
width="26" height="26" fill="none"
viewBox="4.45 3.55 25.27 25.27">
<path stroke="#5C5C5C" stroke-miterlimit="10"
d="M17.09 28.315c6.703 0 12.136-5.433 12.136-12.135S23.793 4.045 17.091 4.045c-6.703 0-12.136 5.433-12.136 12.135s5.433 12.135 12.136 12.135Z">
</path>
<path stroke="#5C5C5C" stroke-linecap="round"
stroke-linejoin="round"
d="m21.135 12.135-8.09 8.09M21.135 20.225l-8.09-8.09">
</path>
</svg>
</div>
<div class="comparison__table-cell">
<svg class="icon-crossmark" xmlns="http://www.w3.org/2000/svg"
width="3.1875rem" height="3.1875rem" fill="none">
<path stroke="#5C5C5C" stroke-miterlimit="10"
stroke-width="1.275"
d="M25.502 44.614c10.563 0 19.125-8.56 19.125-19.12s-8.562-19.12-19.125-19.12c-10.562 0-19.125 8.56-19.125 19.12s8.563 19.12 19.125 19.12Z">
</path>
<path stroke="#5C5C5C" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.275"
d="m31.877 19.12-12.75 12.747M31.877 31.867l-12.75-12.746">
</path>
</svg>
<svg class="icon-crossmark-mobile" xmlns="http://www.w3.org/2000/svg"
width="26" height="26" fill="none"
viewBox="4.45 3.55 25.27 25.27">
<path stroke="#5C5C5C" stroke-miterlimit="10"
d="M17.09 28.315c6.703 0 12.136-5.433 12.136-12.135S23.793 4.045 17.091 4.045c-6.703 0-12.136 5.433-12.136 12.135s5.433 12.135 12.136 12.135Z">
</path>
<path stroke="#5C5C5C" stroke-linecap="round"
stroke-linejoin="round"
d="m21.135 12.135-8.09 8.09M21.135 20.225l-8.09-8.09">
</path>
</svg>
</div>
<div class="comparison__table-cell">
<svg class="icon-crossmark" xmlns="http://www.w3.org/2000/svg"
width="3.1875rem" height="3.1875rem" fill="none">
<path stroke="#5C5C5C" stroke-miterlimit="10"
stroke-width="1.275"
d="M25.502 44.614c10.563 0 19.125-8.56 19.125-19.12s-8.562-19.12-19.125-19.12c-10.562 0-19.125 8.56-19.125 19.12s8.563 19.12 19.125 19.12Z">
</path>
<path stroke="#5C5C5C" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.275"
d="m31.877 19.12-12.75 12.747M31.877 31.867l-12.75-12.746">
</path>
</svg>
<svg class="icon-crossmark-mobile" xmlns="http://www.w3.org/2000/svg"
width="26" height="26" fill="none"
viewBox="4.45 3.55 25.27 25.27">
<path stroke="#5C5C5C" stroke-miterlimit="10"
d="M17.09 28.315c6.703 0 12.136-5.433 12.136-12.135S23.793 4.045 17.091 4.045c-6.703 0-12.136 5.433-12.136 12.135s5.433 12.135 12.136 12.135Z">
</path>
<path stroke="#5C5C5C" stroke-linecap="round"
stroke-linejoin="round"
d="m21.135 12.135-8.09 8.09M21.135 20.225l-8.09-8.09">
</path>
</svg>
</div>
<div class="comparison__table-cell">
<svg class="icon-crossmark" xmlns="http://www.w3.org/2000/svg"
width="3.1875rem" height="3.1875rem" fill="none">
<path stroke="#5C5C5C" stroke-miterlimit="10"
stroke-width="1.275"
d="M25.502 44.614c10.563 0 19.125-8.56 19.125-19.12s-8.562-19.12-19.125-19.12c-10.562 0-19.125 8.56-19.125 19.12s8.563 19.12 19.125 19.12Z">
</path>
<path stroke="#5C5C5C" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.275"
d="m31.877 19.12-12.75 12.747M31.877 31.867l-12.75-12.746">
</path>
</svg>
<svg class="icon-crossmark-mobile" xmlns="http://www.w3.org/2000/svg"
width="26" height="26" fill="none"
viewBox="4.45 3.55 25.27 25.27">
<path stroke="#5C5C5C" stroke-miterlimit="10"
d="M17.09 28.315c6.703 0 12.136-5.433 12.136-12.135S23.793 4.045 17.091 4.045c-6.703 0-12.136 5.433-12.136 12.135s5.433 12.135 12.136 12.135Z">
</path>
<path stroke="#5C5C5C" stroke-linecap="round"
stroke-linejoin="round"
d="m21.135 12.135-8.09 8.09M21.135 20.225l-8.09-8.09">
</path>
</svg>
</div>
<div class="comparison__table-cell">
<svg class="icon-crossmark" xmlns="http://www.w3.org/2000/svg"
width="3.1875rem" height="3.1875rem" fill="none">
<path stroke="#5C5C5C" stroke-miterlimit="10"
stroke-width="1.275"
d="M25.502 44.614c10.563 0 19.125-8.56 19.125-19.12s-8.562-19.12-19.125-19.12c-10.562 0-19.125 8.56-19.125 19.12s8.563 19.12 19.125 19.12Z">
</path>
<path stroke="#5C5C5C" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.275"
d="m31.877 19.12-12.75 12.747M31.877 31.867l-12.75-12.746">
</path>
</svg>
<svg class="icon-crossmark-mobile" xmlns="http://www.w3.org/2000/svg"
width="26" height="26" fill="none"
viewBox="4.45 3.55 25.27 25.27">
<path stroke="#5C5C5C" stroke-miterlimit="10"
d="M17.09 28.315c6.703 0 12.136-5.433 12.136-12.135S23.793 4.045 17.091 4.045c-6.703 0-12.136 5.433-12.136 12.135s5.433 12.135 12.136 12.135Z">
</path>
<path stroke="#5C5C5C" stroke-linecap="round"
stroke-linejoin="round"
d="m21.135 12.135-8.09 8.09M21.135 20.225l-8.09-8.09">
</path>
</svg>
</div>
<div class="comparison__table-cell">
<span class="comparison__table-cell-value-label">
~1 year
</span>
</div>
</div>
</div>
</div>
</section>
</div>Instructions
Heyy Guys 
Watch the video below to learn how to Import these Codes into your Shopify Ecommerce Store!