Home Policy Block
Last updated
Last updated
To show Policy Block on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
When you are happy with your changes, don't forget click Save HTML and Publish to repackage the edited theme.
After that, input sample content below:
<div class="section-block section-block-banners" id="policyBlock">
<div class="container">
<div class="policyBlock__container">
<div class="policyBlock__item home-banner-image FadeInUpAnimation" dataNumberAnimated="1">
<div class="policyBlock__wrapper">
<div class="policyBlock__img">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none">
<path
d="M12.5 42.5C12.5 43.8261 13.0268 45.0979 13.9645 46.0355C14.9021 46.9732 16.1739 47.5 17.5 47.5C18.8261 47.5 20.0979 46.9732 21.0355 46.0355C21.9732 45.0979 22.5 43.8261 22.5 42.5M12.5 42.5C12.5 41.1739 13.0268 39.9021 13.9645 38.9645C14.9021 38.0268 16.1739 37.5 17.5 37.5C18.8261 37.5 20.0979 38.0268 21.0355 38.9645C21.9732 39.9021 22.5 41.1739 22.5 42.5M12.5 42.5H7.5V32.5M22.5 42.5H37.5M37.5 42.5C37.5 43.8261 38.0268 45.0979 38.9645 46.0355C39.9021 46.9732 41.1739 47.5 42.5 47.5C43.8261 47.5 45.0979 46.9732 46.0355 46.0355C46.9732 45.0979 47.5 43.8261 47.5 42.5M37.5 42.5C37.5 41.1739 38.0268 39.9021 38.9645 38.9645C39.9021 38.0268 41.1739 37.5 42.5 37.5C43.8261 37.5 45.0979 38.0268 46.0355 38.9645C46.9732 39.9021 47.5 41.1739 47.5 42.5M47.5 42.5H52.5V27.5M5 12.5H32.5V42.5M52.5 27.5H32.5M52.5 27.5L45 15H32.5M7.5 22.5H17.5"
stroke="#15191E"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="policyBlock__content">
<span class="title">Free Shipping</span>
<span class="des">Free Shipping for orders over $200</span>
</div>
</div>
</div>
<div class="policyBlock__item home-banner-image FadeInUpAnimation" dataNumberAnimated="2">
<div class="policyBlock__wrapper">
<div class="policyBlock__img">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none">
<path
d="M23.75 22.5H23.775M36.25 22.5H36.275M23.75 32.5C24.5647 33.3315 25.5371 33.9921 26.6103 34.443C27.6835 34.894 28.8359 35.1263 30 35.1263C31.1641 35.1263 32.3165 34.894 33.3897 34.443C34.4629 33.9921 35.4353 33.3315 36.25 32.5M45 10C46.9891 10 48.8968 10.7902 50.3033 12.1967C51.7098 13.6032 52.5 15.5109 52.5 17.5V37.5C52.5 39.4891 51.7098 41.3968 50.3033 42.8033C48.8968 44.2098 46.9891 45 45 45H32.5L20 52.5V45H15C13.0109 45 11.1032 44.2098 9.6967 42.8033C8.29018 41.3968 7.5 39.4891 7.5 37.5V17.5C7.5 15.5109 8.29018 13.6032 9.6967 12.1967C11.1032 10.7902 13.0109 10 15 10H45Z"
stroke="#15191E"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="policyBlock__content">
<span class="title">Support 24/7</span>
<span class="des">Within 30 days for an exchange.</span>
</div>
</div>
</div>
<div class="policyBlock__item home-banner-image FadeInUpAnimation" dataNumberAnimated="3">
<div class="policyBlock__wrapper">
<div class="policyBlock__img">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none">
<path
d="M28.6489 52.115C21.1221 49.7819 14.8155 44.581 11.0919 37.6361C7.36832 30.6913 6.52669 22.5603 8.7489 15C16.5377 15.3564 24.1593 12.6664 29.9989 7.5C35.8385 12.6664 43.4601 15.3564 51.2489 15C52.9456 20.7728 52.8672 26.9224 51.0239 32.65M37.4995 47.5L42.4995 52.5L52.4995 42.5"
stroke="#15191E"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="policyBlock__content">
<span class="title">Money Guarantee</span>
<span class="des">Within 30 days for an exchange.</span>
</div>
</div>
</div>
<div class="policyBlock__item home-banner-image FadeInUpAnimation" dataNumberAnimated="4">
<div class="policyBlock__wrapper">
<div class="policyBlock__img">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" fill="none">
<path
d="M42.5 20V12.5C42.5 11.837 42.2366 11.2011 41.7678 10.7322C41.2989 10.2634 40.663 10 40 10H15C13.6739 10 12.4021 10.5268 11.4645 11.4645C10.5268 12.4021 10 13.6739 10 15M10 15C10 16.3261 10.5268 17.5979 11.4645 18.5355C12.4021 19.4732 13.6739 20 15 20H45C45.663 20 46.2989 20.2634 46.7678 20.7322C47.2366 21.2011 47.5 21.837 47.5 22.5V30M10 15V45C10 46.3261 10.5268 47.5979 11.4645 48.5355C12.4021 49.4732 13.6739 50 15 50H45C45.663 50 46.2989 49.7366 46.7678 49.2678C47.2366 48.7989 47.5 48.163 47.5 47.5V40M50 30V40H40C38.6739 40 37.4021 39.4732 36.4645 38.5355C35.5268 37.5979 35 36.3261 35 35C35 33.6739 35.5268 32.4021 36.4645 31.4645C37.4021 30.5268 38.6739 30 40 30H50Z"
stroke="#15191E"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="policyBlock__content">
<span class="title">Flexible Payment</span>
<span class="des">Within 30 days for an exchange.</span>
</div>
</div>
</div>
</div>
</div>
</div>
Please click the "Run Pen" button to be used