Head over to the Sections folder and click Add a new section, and name the section guarantee and click add. You will now have a bare bone section liquid file with minimal code. Delete all the default code and add the below code to that liquid file.
<div class="guarantee-banner">
<h2 class="guarantee-header">{{ section.settings.header }}</h2>
<div class="guarantee-wrapper">
{% for block in section.blocks %}
<div class="guarantee-item">
{% if block.settings.icon == 'van' %}
<svg class="guarantee-icon" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;">
<path class="secondary-color"
d="M156.88,265.736h99.28c5.36-7.12,14.08-11.68,23.92-11.68s18.64,4.56,24,11.68H368V71.256H156.88 V265.736z" />
<path class="primary-color"
d="M368,56H156.88c-8.832,0-16,7.168-16,16v43.6h-36.728H51.28c-5.96,0-11.432,3.32-14.184,8.608 l-35.28,67.68c-0.072,0.144-0.096,0.304-0.16,0.448c-0.464,0.952-0.832,1.944-1.096,2.992c-0.048,0.184-0.128,0.36-0.168,0.552 C0.144,196.968,0,198.112,0,199.28v67.2c0,8.832,7.16,16,16,16h24.72c-0.008,0.328-0.08,0.632-0.08,0.96 c0,24.568,20.56,44.56,45.832,44.56c25.232,0,45.768-19.992,45.768-44.56c0-0.328-0.072-0.64-0.08-0.96h24.72h77.52 c-0.008,0.328-0.08,0.632-0.08,0.96c0,24.568,20.52,44.56,45.76,44.56c25.28,0,45.84-19.992,45.84-44.56 c0-0.328-0.072-0.64-0.08-0.96H368c8.832,0,16-7.168,16-16V72C384,63.168,376.832,56,368,56z M60.984,147.6h27.168v35.68H42.376 L60.984,147.6z M32,215.28h72.152c8.84,0,16-7.168,16-16V147.6h20.728v102.88h-23.568c-0.168-0.152-0.368-0.256-0.536-0.4 c-1.824-1.576-3.752-3.016-5.8-4.288c-0.392-0.24-0.8-0.448-1.2-0.672c-1.904-1.104-3.88-2.072-5.936-2.896 c-0.368-0.152-0.72-0.32-1.096-0.464c-2.288-0.848-4.648-1.496-7.056-1.984c-0.536-0.112-1.08-0.192-1.624-0.28 c-2.496-0.416-5.024-0.696-7.592-0.696c-2.584,0-5.12,0.288-7.632,0.696c-0.528,0.088-1.056,0.168-1.584,0.272 c-2.448,0.488-4.848,1.144-7.168,2.008c-0.288,0.112-0.56,0.24-0.848,0.352c-2.248,0.888-4.408,1.944-6.472,3.152 c-0.224,0.136-0.464,0.248-0.68,0.384c-2.184,1.336-4.232,2.856-6.152,4.536c-0.112,0.104-0.256,0.168-0.368,0.272H32V215.28z M86.48,296c-7.632,0-13.832-5.632-13.832-12.56c0-2.64,0.832-5.032,2.608-7.336c4.704-6.232,15.864-6.576,21.352-1.016 c0.4,0.408,0.832,0.768,1.184,1.232c1.632,2.096,2.464,4.488,2.464,7.12C100.24,290.368,94.072,296,86.48,296z M280.08,296 c-7.584,0-13.76-5.632-13.76-12.56c0-2.64,0.832-5.032,2.608-7.336c4.736-6.272,15.816-6.52,21.288-1.08 c0.424,0.424,0.88,0.808,1.248,1.296c1.632,2.096,2.464,4.488,2.464,7.12C293.92,290.368,287.712,296,280.08,296z M310.984,250.48 c-0.16-0.144-0.36-0.24-0.52-0.384c-1.832-1.584-3.776-3.032-5.832-4.304c-0.384-0.24-0.784-0.44-1.176-0.664 c-1.912-1.104-3.904-2.08-5.968-2.904c-0.368-0.144-0.712-0.32-1.088-0.456c-2.288-0.848-4.664-1.496-7.08-1.976 c-0.544-0.112-1.08-0.192-1.632-0.28c-2.504-0.416-5.04-0.696-7.616-0.696s-5.104,0.288-7.608,0.696 c-0.528,0.088-1.048,0.168-1.576,0.272c-2.448,0.488-4.84,1.144-7.152,2.008c-0.288,0.104-0.56,0.24-0.84,0.352 c-2.248,0.888-4.4,1.944-6.464,3.152c-0.224,0.136-0.456,0.248-0.68,0.384c-2.192,1.336-4.24,2.864-6.16,4.552 c-0.112,0.096-0.24,0.16-0.352,0.256h-76.36V131.6V88H352v35.624H245.336c-8.84,0-16,7.168-16,16s7.16,16,16,16H352V174.4h-71.896 c-8.832,0-16,7.16-16,16c0,8.832,7.168,16,16,16H352v44.08L310.984,250.48L310.984,250.48z" />
</svg>
{% elsif block.settings.icon == 'cart' %}
<svg class="guarantee-icon" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;">
<polygon class="secondary-color" points="121.683,244.296 322.403,244.296 368.003,93.336 86.803,93.336 " />
<path class="primary-color"
d="M227.011,27.44c-8.832,0-16,7.168-16,16v34.64H99.531L84.395,12.408C82.723,5.144,76.259,0,68.803,0 h-52.8c-8.832,0-16,7.168-16,16s7.168,16,16,16h40.072l15.136,65.664c0,0.008,0,0.008,0,0.016l30.352,131.376H84.675 c-23.384,0-42.416,19-42.416,42.344c0,23.352,19.024,42.344,42.416,42.344h22.968c-2.4,5.912-3.752,12.36-3.752,19.128 c0,28.192,22.976,51.128,51.216,51.128c28.232,0,51.208-22.936,51.208-51.128c0-6.768-1.352-13.208-3.752-19.128h45.944 c-2.4,5.912-3.752,12.36-3.752,19.128c0,28.192,22.976,51.128,51.216,51.128c28.232,0,51.2-22.936,51.2-51.128 s-22.968-51.128-51.2-51.128H84.675c-5.744,0-10.416-4.64-10.416-10.344c0-5.704,4.672-10.344,10.416-10.344h237.688 c1.64,0,3.192-0.32,4.68-0.776c0.248-0.08,0.496-0.144,0.736-0.232c1.408-0.504,2.72-1.184,3.904-2.04 c0.224-0.16,0.408-0.344,0.624-0.512c1.04-0.832,1.976-1.776,2.784-2.848c0.144-0.184,0.304-0.336,0.44-0.528 c0.816-1.184,1.424-2.504,1.904-3.888c0.072-0.2,0.216-0.36,0.28-0.568l45.6-150.96c1.464-4.84,0.544-10.096-2.472-14.168 c-3.008-4.064-7.776-6.456-12.84-6.456H243.011V43.44C243.011,34.608,235.843,27.44,227.011,27.44z M174.315,332.872 c0,10.544-8.616,19.128-19.208,19.128s-19.216-8.576-19.216-19.128c0-10.544,8.624-19.128,19.216-19.128 C165.699,313.752,174.315,322.328,174.315,332.872z M295.971,352c-10.6,0-19.216-8.576-19.216-19.128 c0-10.544,8.624-19.128,19.216-19.128s19.2,8.576,19.2,19.128S306.563,352,295.971,352z M346.459,110.08l-35.936,118.96H134.411 l-27.488-118.96h104.088v34.224l-5.544-4.6c-6.8-5.632-16.88-4.688-22.528,2.104c-5.64,6.8-4.696,16.888,2.104,22.528l31.76,26.344 c0.232,0.192,0.48,0.32,0.72,0.496c0.344,0.256,0.688,0.504,1.056,0.728c0.496,0.304,1,0.576,1.52,0.824 c0.368,0.176,0.728,0.36,1.112,0.504c0.592,0.232,1.192,0.4,1.8,0.56c0.344,0.088,0.68,0.2,1.04,0.272 c0.984,0.184,1.984,0.296,2.976,0.296c1,0,1.992-0.112,2.976-0.296c0.352-0.064,0.688-0.176,1.032-0.272 c0.608-0.16,1.208-0.328,1.8-0.56c0.384-0.152,0.744-0.328,1.112-0.504c0.52-0.248,1.024-0.512,1.52-0.824 c0.368-0.232,0.712-0.472,1.056-0.728c0.232-0.176,0.488-0.304,0.72-0.496l31.76-26.344c6.8-5.648,7.744-15.728,2.104-22.528 c-5.64-6.808-15.744-7.736-22.528-2.104l-5.544,4.6V110.08H346.459z" />
</svg>
{% elsif block.settings.icon == 'arrows' %}
<svg class="guarantee-icon" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;">
<path class="primary-color"
d="M16,207.68c8.832,0,16-7.168,16-16C32,103.632,103.328,32,191,32 c38.456,0,74.584,13.608,103.064,38.072H279.4c-8.832,0-16,7.168-16,16s7.168,16,16,16h52.512c8.832,0,16-7.168,16-16V33.336 c0-8.832-7.168-16-16-16s-16,7.168-16,16v13.336C281.544,16.704,237.712,0,191,0C85.68,0,0,85.992,0,191.68 C0,200.512,7.16,207.68,16,207.68z" />
<path class="primary-color"
d="M368,176.32c-8.84,0-16,7.16-16,16C352,280.368,280.672,352,193,352 c-38.016,0-73.752-13.28-102.072-37.2h15.368c8.832,0,16-7.168,16-16c0-8.84-7.168-16-16-16h-52.52c-0.144,0-0.272,0.04-0.408,0.04 c-0.608,0.016-1.216,0.104-1.816,0.184c-0.448,0.064-0.896,0.104-1.336,0.208c-0.528,0.12-1.048,0.312-1.568,0.488 c-0.48,0.168-0.968,0.312-1.432,0.52c-0.44,0.2-0.856,0.456-1.28,0.696c-0.504,0.288-1,0.56-1.472,0.896 c-0.12,0.088-0.256,0.136-0.376,0.232c-0.272,0.208-0.48,0.464-0.736,0.688c-0.432,0.368-0.848,0.736-1.232,1.152 c-0.36,0.384-0.672,0.784-0.984,1.2c-0.312,0.408-0.616,0.816-0.896,1.248c-0.28,0.448-0.52,0.912-0.752,1.376 c-0.224,0.456-0.448,0.912-0.632,1.4c-0.184,0.496-0.328,0.992-0.464,1.504c-0.136,0.488-0.264,0.976-0.344,1.48 c-0.096,0.568-0.136,1.136-0.168,1.712c-0.024,0.328-0.096,0.64-0.096,0.984v52.736c0,8.832,7.168,16,16,16s16-7.168,16-16v-12.72 C103.88,367.856,147.056,384,193,384c105.32,0,191-85.992,191-191.68C384,183.48,376.832,176.32,368,176.32z" />
</svg>
{% elsif block.settings.icon == 'bubble' %}
<svg class="guarantee-icon" viewBox="0 0 384.138 384.138" style="enable-background:new 0 0 384.138 384.138;">
<path class="secondary-color"
d="M22.457,282.973c13.36,13.28,61.44-12.88,61.44-12.88c6.16,3.6,12.96,6.48,19.52,8.96 c-18.48-48.72-8.08-105.92,31.12-145.12c39.52-39.52,97.12-49.84,146.08-30.88c-6.72-17.36-17.04-33.68-31.04-47.76 c-53.44-53.36-140.08-53.36-193.44,0c-45.2,45.2-52.16,114.08-20.88,166.56C35.257,221.853,9.177,269.773,22.457,282.973z" />
<path class="primary-color"
d="M292.705,91.693c-7.664-17.472-18.224-33.304-31.824-46.976 c-59.608-59.512-156.528-59.512-216.056,0.008C-2.527,92.077-13.359,164.133,17.097,222.853 c-11.136,22.464-22.76,55.472-5.912,72.216c16.92,16.824,50.176,5.016,72.68-6.168c2.336,1.12,4.888,2.232,7.568,3.344 c7.584,17.48,18.12,33.36,31.808,47.12c29.448,29.392,68.592,44.688,108.112,44.688c23.528,0,47.2-5.424,69.032-16.52 c22.504,11.208,55.664,22.968,72.592,6.144c16.8-16.808,5.176-49.76-5.952-72.184c30.48-58.768,19.648-130.832-27.736-178.12 C325.689,109.765,309.969,99.245,292.705,91.693z M76.249,256.781c-15.072,8.2-33.696,14.696-41.648,14.792 c0.136-7.896,6.592-26.368,14.712-41.336l4.344-8.008l-4.664-7.824c-28.28-47.44-20.688-107.912,18.448-147.056 c23.536-23.528,54.464-35.296,85.392-35.296c30.92,0,61.848,11.76,85.392,35.264c3.864,3.888,7.44,7.992,10.712,12.288 c-1.264-0.144-2.536-0.216-3.8-0.336c-1.056-0.096-2.104-0.2-3.16-0.28c-2.928-0.208-5.864-0.328-8.792-0.368 c-0.392-0.008-0.792-0.032-1.184-0.04c-3.304-0.016-6.6,0.096-9.888,0.296c-0.984,0.056-1.96,0.16-2.936,0.24 c-2.352,0.192-4.704,0.424-7.048,0.72c-1.128,0.144-2.248,0.296-3.368,0.464c-2.344,0.352-4.672,0.76-7,1.224 c-0.944,0.184-1.896,0.352-2.84,0.552c-3.2,0.696-6.384,1.472-9.536,2.368c-0.528,0.152-1.048,0.336-1.576,0.496 c-2.64,0.784-5.256,1.632-7.856,2.56c-1.04,0.368-2.064,0.768-3.096,1.168c-2.128,0.808-4.248,1.672-6.344,2.576 c-1.04,0.448-2.072,0.896-3.104,1.368c-2.344,1.08-4.656,2.232-6.952,3.424c-0.664,0.352-1.344,0.664-2.008,1.024 c-2.896,1.568-5.752,3.248-8.552,5.008c-0.776,0.488-1.52,1.016-2.288,1.512c-2.064,1.352-4.104,2.744-6.104,4.2 c-0.936,0.68-1.856,1.376-2.776,2.072c-1.888,1.44-3.736,2.928-5.568,4.456c-0.816,0.688-1.648,1.36-2.448,2.064 c-2.56,2.24-5.072,4.544-7.504,6.968c-2.44,2.44-4.76,4.968-7.008,7.536c-0.728,0.832-1.408,1.696-2.12,2.536 c-1.496,1.792-2.96,3.6-4.368,5.448c-0.752,0.992-1.488,1.992-2.216,3c-1.304,1.808-2.568,3.64-3.784,5.496 c-0.664,1-1.328,2-1.96,3.016c-1.32,2.12-2.576,4.272-3.784,6.448c-0.424,0.76-0.88,1.504-1.296,2.272 c-1.576,2.936-3.048,5.92-4.424,8.944c-0.336,0.736-0.624,1.496-0.944,2.24c-1.008,2.32-1.976,4.656-2.872,7.024 c-0.416,1.112-0.8,2.232-1.192,3.36c-0.72,2.056-1.408,4.128-2.04,6.216c-0.36,1.184-0.712,2.368-1.04,3.568 c-0.592,2.144-1.128,4.304-1.632,6.48c-0.256,1.096-0.528,2.184-0.752,3.28c-0.6,2.896-1.12,5.816-1.552,8.744 c-0.056,0.36-0.128,0.712-0.184,1.072c-0.464,3.264-0.792,6.544-1.04,9.84c-0.08,1.08-0.112,2.152-0.168,3.232 c-0.12,2.264-0.216,4.528-0.24,6.8c-0.008,1.256,0,2.504,0.024,3.76c0.032,2.152,0.112,4.304,0.232,6.464 c0.072,1.24,0.136,2.48,0.24,3.72c0.192,2.36,0.464,4.72,0.768,7.072c0.128,0.992,0.224,1.984,0.368,2.968 c0.032,0.216,0.048,0.44,0.08,0.656L76.249,256.781z M334.801,308.885c8.128,14.96,14.584,33.416,14.712,41.312 c-7.936-0.128-26.552-6.64-41.64-14.848l-7.944-4.32l-7.792,4.552c-47.288,27.648-107.464,19.904-146.256-18.832 c-12.208-12.28-21.464-26.616-27.504-42.632c-16.816-44.336-6.032-94.624,27.472-128.136c2.6-2.6,5.328-5.016,8.112-7.336 c0.776-0.648,1.568-1.264,2.36-1.888c2.208-1.744,4.464-3.408,6.768-4.984c0.736-0.504,1.456-1.024,2.2-1.512 c3.008-1.96,6.072-3.8,9.216-5.48c0.408-0.216,0.832-0.4,1.248-0.616c2.776-1.432,5.592-2.752,8.456-3.96 c0.896-0.376,1.792-0.736,2.696-1.096c2.72-1.072,5.472-2.048,8.256-2.92c0.632-0.2,1.256-0.432,1.888-0.616 c3.408-1.008,6.864-1.864,10.344-2.568c0.68-0.136,1.368-0.232,2.056-0.36c2.848-0.528,5.72-0.944,8.608-1.264 c0.936-0.104,1.88-0.208,2.824-0.288c3.216-0.28,6.448-0.448,9.68-0.472c0.328,0,0.656-0.032,0.984-0.032 c3.392,0.008,6.784,0.168,10.176,0.464c0.792,0.072,1.576,0.184,2.368,0.272c2.584,0.272,5.16,0.624,7.728,1.064 c1.04,0.176,2.08,0.384,3.12,0.592c2.44,0.488,4.864,1.064,7.28,1.704c0.952,0.248,1.904,0.48,2.848,0.752 c3.296,0.96,6.568,2.024,9.808,3.28l0.04,0.016c15.64,6.008,29.696,15.176,41.776,27.256c39.16,39.088,46.744,99.552,18.44,147.04 l-4.672,7.848L334.801,308.885z" />
<path class="primary-color"
d="M224.393,136.861c-45.304,6.824-80.488,41.816-87.544,87.064c-1.36,8.728,4.608,16.912,13.336,18.28 c0.832,0.128,1.664,0.192,2.488,0.192c7.744,0,14.56-5.64,15.792-13.536c4.816-30.88,29.776-55.704,60.696-60.36 c8.736-1.312,14.752-9.464,13.44-18.2C241.281,141.557,233.113,135.525,224.393,136.861z" />
</svg>
{% elsif block.settings.icon == 'click' %}
<svg class="guarantee-icon" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;">
<polygon class="secondary-color"
points="344,193.56 104.568,104.128 194.104,343.312 247.152,290.32 324.168,367.256 368,323.472 290.976,246.536 " />
<path class="primary-color"
d="M313.616,247.28l41.696-41.664c3.848-3.848,5.472-9.392,4.32-14.712 c-1.152-5.32-4.936-9.688-10.032-11.592L110.16,89.88c-5.872-2.192-12.48-0.752-16.912,3.68c-4.432,4.432-5.864,11.048-3.664,16.92 l89.536,239.184c1.904,5.096,6.272,8.872,11.592,10.024c5.304,1.128,10.848-0.472,14.696-4.32l41.744-41.688l65.712,65.64 c3.112,3.12,7.208,4.68,11.296,4.68s8.184-1.56,11.304-4.68l43.832-43.784c3.016-3,4.704-7.072,4.704-11.32 s-1.688-8.32-4.696-11.32L313.616,247.28z M324.16,345.384l-65.712-65.648c-3.12-3.12-7.208-4.68-11.304-4.68 c-4.096,0-8.184,1.56-11.304,4.68l-35.472,35.424l-68.52-183.024l183.216,68.44l-35.416,35.384c-3,3-4.688,7.072-4.688,11.32 c0,4.248,1.688,8.32,4.696,11.32l65.688,65.616L324.16,345.384z" />
<path class="primary-color"
d="M54.336,32.056c-6.248-6.248-16.376-6.232-22.624,0.016s-6.24,16.384,0.016,22.624l14.824,14.808 c0,0,0.008,0,0.008,0.008l7.584,7.568c3.12,3.12,7.216,4.68,11.304,4.68c4.096,0,8.192-1.568,11.32-4.696 c6.248-6.248,6.24-16.384-0.016-22.624L54.336,32.056z" />
<path class="primary-color"
d="M161.488,47.64V16c0-8.832-7.168-16-16-16c-8.84,0-16,7.168-16,16v31.64c0,8.832,7.16,16,16,16 C154.32,63.64,161.488,56.472,161.488,47.64z" />
<path class="primary-color"
d="M63.688,145.36c0-8.832-7.16-16-16-16H16c-8.84,0-16,7.168-16,16s7.16,16,16,16h31.688 C56.52,161.36,63.688,154.2,63.688,145.36z" />
</svg>
{% elsif block.settings.icon == 'award' %}
<svg class="guarantee-icon" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;">
<path class="secondary-color"
d="M121.921,367.256l70.08-108.16l70.08,108.16l13.52-51.68l52.4,8.4l-67.68-104.48 c-18.96,14.56-42.64,23.2-68.32,23.2s-49.36-8.64-68.32-23.2l-67.68,104.48l52.4-8.4L121.921,367.256z" />
<path class="primary-color"
d="M42.593,333.456c3.456,5.296,9.68,8.072,15.936,7.064l38.064-6.096l9.848,37.632 c1.608,6.136,6.68,10.736,12.944,11.744c6.232,0.984,12.512-1.784,15.968-7.096l56.648-87.44l56.648,87.432 c2.984,4.6,8.064,7.304,13.432,7.304c0.832,0,1.688-0.064,2.536-0.2c6.256-1.008,11.336-5.616,12.936-11.744l9.848-37.632 l38.064,6.096c6.24,1.008,12.48-1.768,15.936-7.064s3.464-12.128,0.024-17.432l-60.096-92.776 c25.344-24.344,39.624-57.696,39.624-93.568C320.961,58.176,263.113,0,192.001,0S63.041,58.176,63.041,129.68 c0,35.88,14.296,69.24,39.624,93.568l-60.096,92.768C39.137,321.328,39.145,328.16,42.593,333.456z M278.137,300.52 c-8.064-1.304-15.92,3.776-18.008,11.744l-4.344,16.592l-45.784-70.664c0.456-0.064,0.896-0.184,1.344-0.256 c2.688-0.4,5.336-0.936,7.984-1.504c1.064-0.232,2.136-0.4,3.192-0.656c3.696-0.904,7.352-1.944,10.944-3.176 c0.408-0.144,0.808-0.328,1.216-0.472c3.16-1.12,6.28-2.352,9.344-3.72c1.112-0.496,2.2-1.072,3.304-1.6 c2.32-1.12,4.624-2.272,6.888-3.536c0.48-0.272,0.992-0.48,1.472-0.752l39.32,60.696L278.137,300.52z M95.041,129.68 c0-53.856,43.496-97.68,96.96-97.68s96.96,43.824,96.96,97.68c0,30.848-13.976,59.224-38.384,77.872 c-16.944,13.008-37.2,19.888-58.576,19.888s-41.632-6.88-58.608-19.92C109.017,188.904,95.041,160.528,95.041,129.68z M128.305,242.528c0.496,0.288,1.024,0.504,1.52,0.784c2.192,1.224,4.424,2.336,6.672,3.424c1.176,0.568,2.328,1.176,3.512,1.704 c2.976,1.328,6,2.512,9.064,3.608c0.496,0.176,0.976,0.4,1.472,0.568c3.584,1.224,7.224,2.264,10.912,3.168 c1.072,0.264,2.168,0.44,3.248,0.672c2.632,0.568,5.264,1.096,7.936,1.496c0.456,0.072,0.896,0.192,1.352,0.256l-45.784,70.664 l-4.336-16.592c-1.864-7.128-8.304-11.952-15.464-11.952c-0.84,0-1.696,0.064-2.544,0.2l-16.88,2.704L128.305,242.528z" />
<path class="primary-color"
d="M157.785,139.088l-5.992,18.536c-2.128,6.6,0.232,13.824,5.856,17.88 c5.616,4.064,13.216,4.04,18.816-0.048l15.536-11.352l15.544,11.36c2.8,2.056,6.128,3.08,9.44,3.08 c3.288,0,6.576-1.008,9.376-3.032c5.616-4.064,7.984-11.288,5.856-17.888l-5.992-18.528l15.632-11.432 c5.584-4.088,7.912-11.304,5.768-17.88c-2.144-6.576-8.288-11.032-15.208-11.032h-19.224l-5.952-18.456 c-2.144-6.616-8.296-11.096-15.24-11.096s-13.096,4.48-15.224,11.088l-5.96,18.456h-19.224c-6.92,0-13.056,4.456-15.208,11.032 c-2.152,6.584,0.176,13.8,5.768,17.88L157.785,139.088z M192.001,127.592c0.096,0.072,0.2,0.152,0.304,0.216 c-0.056,0.152-0.104,0.312-0.16,0.472c-0.104,0-0.192,0-0.296,0c-0.048-0.16-0.104-0.32-0.152-0.472 C191.801,127.736,191.897,127.664,192.001,127.592z" />
</svg>
{% elsif block.settings.icon == 'heart' %}
<svg class="guarantee-icon" viewBox="0 0 383.907 383.907" style="enable-background:new 0 0 383.907 383.907;">
<path class="secondary-color"
d="M302.227,173.171c-36.24,0-65.6,29.36-65.6,65.6c0,18.64,7.76,35.44,20.16,47.36 c11.84,11.36,27.76,18.32,45.44,18.32c36.24,0,65.68-29.36,65.68-65.68c0-18.24-7.44-34.64-19.44-46.56 C336.627,180.451,320.307,173.171,302.227,173.171z" />
<path class="primary-color"
d="M321.571,223.555h-3.312v-3.328c0-8.832-7.168-16-16-16s-16,7.168-16,16v3.328h-3.336 c-8.832,0-16,7.168-16,16s7.168,16,16,16h3.336v3.328c0,8.832,7.168,16,16,16s16-7.168,16-16v-3.328h3.312c8.832,0,16-7.168,16-16 S330.411,223.555,321.571,223.555z" />
<path class="primary-color"
d="M349.051,50.507c-42.4-42.32-109.312-45.632-155.552-9.928 C146.723,4.659,77.067,7.963,34.427,50.531c-45.904,46-45.904,120.84,0.008,166.848l145.92,145.92 c3,3.008,7.072,4.696,11.312,4.696c4.24,0,8.312-1.688,11.312-4.688l55.096-55.104c13.08,8.448,28.312,12.984,44.152,12.984 c45.04,0,81.68-36.64,81.68-81.68c0-17.352-5.48-33.832-15.496-47.656C394.171,146.211,386.731,88.275,349.051,50.507z M191.667,329.363L57.075,194.771c-33.464-33.536-33.464-88.104-0.024-121.616c16.688-16.656,39.656-24.984,62.608-24.984 s45.896,8.328,62.536,24.968c6.248,6.248,16.368,6.248,22.616,0.016c33.536-33.472,88.104-33.472,121.608-0.024 c25.624,25.68,32.072,64.168,17.568,96.224c-0.416-0.248-0.88-0.416-1.304-0.664c-2.32-1.328-4.688-2.536-7.12-3.624 c-0.568-0.256-1.112-0.552-1.68-0.792c-2.968-1.248-6.008-2.296-9.112-3.176c-0.8-0.232-1.624-0.4-2.432-0.608 c-2.44-0.616-4.904-1.12-7.4-1.504c-0.936-0.144-1.864-0.296-2.808-0.416c-3.272-0.392-6.56-0.664-9.904-0.664 c-45,0-81.6,36.608-81.6,81.6c0,2.528,0.152,5.024,0.376,7.512c0.064,0.736,0.16,1.472,0.248,2.208 c0.216,1.824,0.488,3.624,0.816,5.416c0.136,0.72,0.256,1.448,0.408,2.16c0.496,2.32,1.064,4.608,1.76,6.864 c0.024,0.088,0.048,0.184,0.072,0.272c0.728,2.336,1.592,4.624,2.528,6.88c0.272,0.656,0.576,1.304,0.864,1.96 c0.736,1.648,1.52,3.264,2.368,4.864c0.344,0.656,0.688,1.32,1.056,1.968c1.104,1.952,2.28,3.872,3.552,5.736 c0.12,0.176,0.216,0.36,0.336,0.528c0.016,0.024,0.032,0.056,0.048,0.08L191.667,329.363z M302.227,289.195 c-12.84,0-25.04-4.928-34.352-13.856c-9.832-9.456-15.248-22.176-15.248-35.824c0-27.344,22.248-49.6,49.6-49.6 c4.952,0,9.792,0.72,14.4,2.104c7.68,2.312,14.72,6.48,20.56,12.288c0.008,0.008,0.008,0.008,0.016,0.008 c9.48,9.432,14.704,21.928,14.704,35.2C351.907,266.907,329.619,289.195,302.227,289.195z" />
<path class="primary-color"
d="M117.211,71.155c-32.888,0-59.64,26.76-59.64,59.648c0,8.832,7.168,16,16,16s16-7.168,16-16 c0-15.24,12.4-27.648,27.64-27.648c8.832,0,16-7.168,16-16S126.051,71.155,117.211,71.155z" />
</svg>
{% elsif block.settings.icon == 'money' %}
<svg class="guarantee-icon" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;">
<path class="secondary-color"
d="M192,15.256c-97.2,0-176,79.232-176,176.952c0,97.752,78.8,175.048,176,175.048 s176-77.296,176-175.048C368,94.496,289.2,15.256,192,15.256z" />
<path class="primary-color"
d="M192,0C86.136,0,0,86.56,0,192.952C0,298.296,86.136,384,192,384s192-85.704,192-191.048 C384,86.56,297.864,0,192,0z M192,352c-88.224,0-160-71.344-160-159.048C32,104.2,103.776,32,192,32s160,72.2,160,160.952 C352,280.656,280.224,352,192,352z" />
<path class="primary-color"
d="M212.952,176H208v-27.704h26c8.832,0,16-7.168,16-16s-7.168-16-16-16h-26v-7.24 c0-8.832-7.168-16-16-16c-8.84,0-16,7.168-16,16v7.24h-5.256c-25.2,0-45.704,20.568-45.704,45.848 c0,25.288,20.504,45.856,45.704,45.856H176v27.68h-26c-8.84,0-16,7.168-16,16s7.16,16,16,16h26v7.256c0,8.832,7.16,16,16,16 c8.832,0,16-7.168,16-16v-7.256h5.256c25.2,0,45.704-20.56,45.704-45.832C258.96,196.568,238.464,176,212.952,176z M170.744,176 c-7.552,0-13.704-6.216-13.704-13.856s6.144-13.848,13.704-13.848H176V176H170.744z M213.256,235.68H208V208h5.256 c7.552,0,13.704,6.216,13.704,13.856C226.96,229.48,220.816,235.68,213.256,235.68z" />
<path class="primary-color"
d="M292.24,122.384c-7.832,4.088-10.872,13.752-6.792,21.584c7.68,14.704,11.736,31.32,11.736,48.024 c0,16.96-3.944,33.12-11.736,48.04c-4.088,7.832-1.048,17.504,6.792,21.584c2.36,1.232,4.888,1.824,7.384,1.824 c5.776,0,11.344-3.136,14.2-8.6c10.048-19.264,15.36-40.984,15.36-62.832s-5.312-43.584-15.36-62.84 C309.744,121.336,300.072,118.288,292.24,122.384z" />
<path class="primary-color"
d="M91.76,122.384c-7.808-4.088-17.496-1.048-21.584,6.784c-10.048,19.264-15.36,40.984-15.36,62.832 s5.312,43.584,15.36,62.84c2.856,5.472,8.432,8.6,14.2,8.6c2.488,0,5.024-0.584,7.384-1.824 c7.832-4.088,10.872-13.752,6.792-21.584c-7.68-14.704-11.736-31.312-11.736-48.024c0-16.96,3.944-33.12,11.736-48.04 C102.632,136.136,99.592,126.472,91.76,122.384z" />
</svg>
{% endif %}
<h3 class="guarantee-title">{{ block.settings.icon_header }}</h5>
<p class="guarantee-text">{{ block.settings.icon_text }}</p>
</div>
{% endfor %}
</div>
<!--- Coded by bluish.io --->
</div>
{% style %}
.primary-color {
fill: {{ section.settings.primary_color }};
}
.secondary-color {
fill: {{ section.settings.secondary_color }};
}
{% endstyle %}
{% schema %}
{
"name": "Guarantee",
"settings": [
{
"type": "text",
"id": "header",
"label": "Guarantee badge header"
},
{
"type": "color",
"id": "primary_color",
"label": "Primary icon color"
},
{
"type": "color",
"id": "secondary_color",
"label": "Secondary icon color"
}
] ,
"blocks": [
{
"type": "badge",
"name": "Guarantee badge",
"settings": [
{
"type": "select",
"id": "icon",
"label": "Choose an icon",
"options": [
{
"value": "arrows",
"label": "Arrows circle"
},
{
"value": "award",
"label": "Award/Guarantee"
},
{
"value": "money",
"label": "Dollar sign"
},
{
"value": "heart",
"label": "Love heard"
},
{
"value": "click",
"label": "Mouse click"
},
{
"value": "cart",
"label": "Shipping cart"
},
{
"value": "van",
"label": "Shipping van"
},
{
"value": "bubble",
"label": "Text bubble"
}
],
"default": "van"
},
{
"type": "text",
"id": "icon_header",
"label": "Icon header"
},
{
"type": "text",
"id": "icon_text",
"label": "Icon text"
}
]
}
] ,
"presets": [
{
"name": "Guarantee badges",
"category":"Custom"
}
]
}
{% endschema %}
Add Code in Theme.css
Go to the Assets folder, find the style sheet (“CSS/SCSS”) file your theme uses, we are using the free Shopify Dawn theme, so in this case the CSS/SCSS file is named base.css. Scroll to the very bottom and paste the below code.
.guarantee-icon {
width: 48px;
}
.guarantee-header {
text-align: center;
font-size: 32px;
}
.guarantee-banner {
max-width: 1200px;
margin: auto;
padding-bottom: 32px;
margin-top: 55px;
}
.guarantee-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.guarantee-item {
text-align: center;
margin: 20px 10px;
}
.guarantee-item svg {
margin-bottom: 15px;
height: 50px;
}
@media ( max-width: 749px ) {
.guarantee-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
Create Trust Badges in The Customizer
You’re done! Go to your theme customizer. Find the Guarantee section and add it to your home page.
No comments: