BETA Section Converter
Paste your Webflow Section here
This is the site's title within Webflow. You can update what visitors see in search results in each page's settings in the Designer.
Copy a Section from Webflow Designer and paste your component by pressing cmd + v
Copy any component from Webflow Designer and click to get started.Paste your component by pressing cmd + v
Your section is now finished. You can now copy the Code and paste it into your Shopify Theme. Here is a tutorial how.
Dashboard Section Converter New Resources Jonas Schäuffelen Section Converter Paste your Webflow Section here This is the site's title within Webflow. You can update what visitors see in search results in each page's settings in the Designer. Your section is now finished. You can now copy the Code and paste it into your Shopify Theme. Here is a tutorial how. Copy <style>.hero_badge { position: absolute; left: auto; top: auto; right: 3.9375rem; bottom: 2.9375rem; display: flex; height: 7.8125rem; grid-column-gap: 0.5rem; grid-row-gap: 0.5rem } @media screen and (max-width: 479px) { .hero_badge { position: static; height: 5rem; margin-bottom: 5rem } } .hero_button-wrapper { display: flex; margin-top: 1.5rem; justify-content: flex-start; align-items: center; grid-column-gap: 1.4rem; grid-row-gap: 1.4rem } @media screen and (max-width: 479px) { .hero_button-wrapper { flex-direction: column; justify-content: space-between; flex-wrap: nowrap; align-items: stretch } } .hero_badge-img { width: 7.8125rem; height: 7.8125rem } @media screen and (max-width: 479px) { .hero_badge-img { width: 5.4rem; height: 5.5rem } } .li-custom { display: none } .hero_bewertungen { display: none; margin-top: 1rem; grid-column-gap: 1rem; grid-row-gap: 1rem; transform: scale(0.8); transform-origin: 0% 0%} @media screen and (max-width: 479px) { .hero_bewertungen { width: 100%; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; align-items: center; transform: none /* scale(0.8) */ } } .text-size-medium { font-size: 1.25rem } @media screen and (max-width: 479px) { .text-size-medium { font-size: 1.25rem } } .testimonials_img { position: relative; width: 3.25rem; height: 3.25rem; max-width: none; aspect-ratio: 1/1; border-top-style: solid; border-top-width: 3px; border-top-color: hsla(0, 0.00%, 100.00%, 1.00); border-right-style: solid; border-right-width: 3px; border-right-color: hsla(0, 0.00%, 100.00%, 1.00); border-bottom-style: solid; border-bottom-width: 3px; border-bottom-color: hsla(0, 0.00%, 100.00%, 1.00); border-left-style: solid; border-left-width: 3px; border-left-color: hsla(0, 0.00%, 100.00%, 1.00); border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%} .container-large { width: 100%; max-width: 76rem; margin-right: auto; margin-left: auto } .testimonials_component { display: flex; justify-content: center; align-items: center } @media screen and (max-width: 479px) { .testimonials_component { justify-content: flex-start; align-items: center } } @media screen and (max-width: 767px) { .testimonials_component { justify-content: flex-start; align-items: flex-start } } .hero_heading-wrapper { grid-auto-columns: 1fr; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto } .section_hero { position: relative; display: flex; min-height: 70vh; padding-top: 7rem; padding-bottom: 7rem; flex-direction: column; justify-content: center; flex-wrap: nowrap; align-items: stretch } @media screen and (max-width: 767px) { .section_hero { padding-top: 6.6375rem; padding-bottom: 21.3375rem } } @media screen and (max-width: 479px) { .section_hero { padding-top: 1.2375rem; padding-bottom: 3.2375rem } } .section_hero.medium { min-height: auto; padding-top: 5.7375rem; padding-bottom: 19.6375rem } .is-left { justify-content: flex-start; align-items: center } .hero_trust-img { height: 2.9rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; cursor: pointer } @media screen and (max-width: 479px) { .hero_trust-img { display: none } } .hero_component { display: grid; max-width: 40rem; grid-auto-columns: 1fr; grid-column-gap: 0.375rem; grid-row-gap: 0.375rem; grid-template-columns: 1fr; grid-template-rows: auto } @media screen and (max-width: 479px) { .hero_component { margin-bottom: 1rem } } .li-tag { display: none } .direction-icon { height: 6.125rem; margin-left: -0.9375rem } @media screen and (max-width: 479px) { .direction-icon { height: 3.3rem } } @media screen and (max-width: 767px) { .direction-icon { height: 4.3rem } } .direction-icon.medium { height: 4.6rem } .direction-holder { position: absolute; left: 0%; top: auto; right: 0%; bottom: 0%; z-index: 1; display: flex; width: 100%; margin-bottom: -2.5625rem; justify-content: center; align-items: center; pointer-events: none } @media screen and (max-width: 479px) { .direction-holder { margin-bottom: -1.4625rem } } @media screen and (max-width: 767px) { .direction-holder { margin-bottom: -2.0625rem } } .direction-holder.medium { margin-bottom: -2.1625rem } .checkbox_check { width: 1.1875rem } .first-img { margin-left: 0rem } .hero_bg-img { position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; z-index: -1; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover } @media screen and (max-width: 479px) { .hero_bg-img { height: 50%; margin-top: auto; object-position: 90% 50%} } @media screen and (max-width: 767px) { .hero_bg-img { height: 50%; margin-top: auto } } .hero_bg-img.medium { height: 60%; margin-top: auto } .button { padding-top: 0.75rem; padding-right: 1.5rem; padding-bottom: 0.75rem; padding-left: 1.5rem; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 100.00%, 0.10); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 100.00%, 0.10); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 100.00%, 0.10); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 100.00%, 0.10); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; background-color: #10109c; box-shadow: 0 0.625rem 0.625rem 0 hsla(240, 81.40%, 33.73%, 0.10); transition-property: all; transition-duration: 300ms; transition-timing-function: ease; color: white; font-weight: 600; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer } .button:hover { transform: translate(0px, -2px) } @media screen and (max-width: 479px) { .button { width: 100%} } .button-group { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; align-items: center; grid-column-gap: 0.75rem; grid-row-gap: 0.75rem } @media screen and (max-width: 479px) { .button-group { width: 100%; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; align-items: stretch } } .is-secondary { border-top-style: solid; border-top-width: 2px; border-top-color: #000030; border-right-style: solid; border-right-width: 2px; border-right-color: #000030; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #000030; border-left-style: solid; border-left-width: 2px; border-left-color: #000030; background-color: transparent; box-shadow: 0 2px 2px 0 hsla(0, 0.00%, 0.00%, 0.15); color: #000030 } .heading-style-h1 { font-size: 2.75rem; line-height: 1.07; font-weight: 600; letter-spacing: -0.02em } @media screen and (max-width: 767px) { .heading-style-h1 { font-size: 2.5rem } } @media screen and (max-width: 479px) { .heading-style-h1 { font-size: 2rem } } .testimonials_img-wrapper { display: flex; width: 2rem; margin-bottom: 3rem } @media screen and (max-width: 479px) { .testimonials_img-wrapper { margin-bottom: 1.1rem } } .checkbox_list-item { display: flex; justify-content: flex-start; align-items: flex-start; grid-column-gap: 0.4375rem; grid-row-gap: 0.4375rem } .padding-global { padding-right: 2.5rem; padding-left: 2.5rem } @media screen and (max-width: 767px) { .padding-global { padding-right: 1.95rem; padding-left: 1.95rem } } @media screen and (max-width: 479px) { .padding-global { padding-right: 1.35rem; padding-left: 1.35rem } } </style><div class="padding-global"><div class="container-large {{ section.settings.text_color }}">{% assign blockUsed = section.blocks.first %} {% if blockUsed and blockUsed.settings != blank %} <div class="testimonials_component is-left" li-if="blockUsed and blockUsed.settings != blank"> {% for block in section.blocks %} {% if block.type == "testimonial" %} <div class="testimonials_img-wrapper" li-block="Testimonial"> <img class="testimonials_img first-img" width="auto" height="auto" alt="{{ block.settings.image_bild.alt }}" src="{{ block.settings.image_bild | img_url: 'master' }}" loading="lazy"> </div> {% endif %} {% endfor %} </div> {% endif %}<div class="hero_component" li-content-for-blocks=""> {% for block in section.blocks %} {% case block.type %} {% when '@app' %} {% render block %} {% when 'headline' %} <div class="hero_heading-wrapper" li-block="Headline"> <h1 class="heading-style-h1 margin-bottom margin-small"> {{ block.settings.text_headline }} </h1> </div> {% when 'text' %} <div li-block="Text"> <div class="text-size-medium text-weight-medium margin-bottom margin-small"> {{ block.settings.text_intro_text }} </div> </div> {% when 'usps' %} <div class="checkbox_list-item" li-block="USPs"> <img class="checkbox_check" width="auto" height="auto" alt="inherit" src="https://cdn.prod.website-files.com/66fd23c9e94141cab1762003/66fd2404ca41401235000257_check.svg" loading="lazy"> <div> {{ block.settings.richtext_block_text }} </div> </div> {% when 'buttons' %} <div class="hero_button-wrapper" li-block="Buttons" x-data=""> {% if block.settings.text_button_text != blank or block.settings.text_button_text_2 != blank %} <div class="button-group" li-if="block.settings.text_button_text != blank or block.settings.text_button_text_2 != blank"> {% if block.settings.text_button_text != blank %} <div li-if="block.settings.text_button_text != blank"> <a class="button" aria-label="{{ block.settings.text_button_text }}" href="{{ block.settings.url_button_link }}"> {{ block.settings.text_button_text }} </a> </div> {% endif %}{% if block.settings.text_button_text_2 != blank %} <div li-if="block.settings.text_button_text_2 != blank"> <a class="button is-secondary" aria-label="{{ block.settings.text_button_text_2 }}" href="{{ block.settings.url_button_link_2 }}"> {{ block.settings.text_button_text_2 }} </a> </div> {% endif %} </div> {% endif %} <img class="hero_trust-img" width="auto" height="auto" alt="{{ block.settings.image_first_trust_image.alt }}" src="{{ block.settings.image_first_trust_image | img_url: 'master' }}" loading="eager" x-on:click="$refs.targetButton.querySelector('.es-badge-container').click()"> <img class="hero_trust-img" width="auto" height="auto" alt="{{ block.settings.image_second_trust_image.alt }}" src="{{ block.settings.image_second_trust_image | img_url: 'master' }}" loading="eager" x-on:click="$refs.targetButton.querySelector('.es-badge-container').click()"> <div class="hero_bewertungen"><div><!-- Elfsight All-in-One Reviews | Trusted Shops Aqon Pure --> <script src="https://static.elfsight.com/platform/platform.js" async=""></script><div class="elfsight-app-2d15e4ee-1f33-415e-84ba-2f74f050ee22" x-ref="targetButton" data-elfsight-app-lazy=""></div></div></div> </div> {% endcase %} {% endfor %} </div> <div class="hero_badge">{% if section.settings.image_badge_image_2 != blank %} <div li-if="section.settings.image_badge_image_2 != blank"> <img class="hero_badge-img" width="auto" height="auto" alt="{{ section.settings.image_badge_image_2.alt }}" src="{{ section.settings.image_badge_image_2 | img_url: 'master' }}" loading="eager"> </div> {% endif %}{% if section.settings.image_badge_image != blank %} <div li-if="section.settings.image_badge_image != blank"> <img class="hero_badge-img" width="auto" height="auto" alt="{{ section.settings.image_badge_image.alt }}" src="{{ section.settings.image_badge_image | img_url: 'master' }}" loading="eager"> </div> {% endif %}</div></div></div><img class="hero_bg-img" width="auto" height="auto" alt="{{ section.settings.image_background_image.alt }}" src="{{ section.settings.image_background_image | img_url: 'master' }}" loading="eager"> <div class="hero_bg-img is-overlay" style="{% if section.settings.background %}background: {{ section.settings.background }};{% endif %}"></div><div class="hero_bg-img is-overlay is-mobile"></div><div class="li-custom"></div> {% if section.settings.checkbox_pfeil == true %} <div class="direction-holder"><img class="direction-icon" width="auto" height="auto" alt="inherit" src="https://cdn.prod.website-files.com/66fd23c9e94141cab1762003/66fd249ad34e90d332a8c3a3_line-green.svg" loading="lazy"> </div>{% endif %} <div class="container-large text-color-white hide"></div> {% schema %} {"tag":"section","name":"H - Main","class":"section_hero","blocks":[{"name":"Testimonial","type":"testimonial","settings":[{"id":"image_bild","type":"image_picker","label":"Bild"}]},{"name":"Headline","type":"headline","settings":[{"id":"text_headline","type":"text","label":"Headline","default":"\n Die AQON PURE Enth\u00e4rtungsanlage ohne Salz.\n "}]},{"name":"Text","type":"text","settings":[{"id":"text_intro_text","type":"text","label":"Intro Text","default":"\n sads\n "}]},{"name":"USPs","type":"usps","settings":[{"id":"richtext_block_text","type":"richtext","label":"Block Text","default":"<p>\n Semibold Text: This is some text inside of a div b asdasd asdasdasdalock.\n <\/p>"}]},{"name":"Buttons","type":"buttons","settings":[{"id":"text_button_text","type":"text","label":"Button Text","default":"\n Mehr erfahren\n "},{"id":"url_button_link","type":"url","label":"Button Link"},{"id":"text_button_text_2","type":"text","label":"Button Text 2","default":"\n Mehr erfahren\n "},{"id":"url_button_link_2","type":"url","label":"Button Link 2"},{"id":"image_first_trust_image","type":"image_picker","label":"First Trust Image"},{"id":"image_second_trust_image","type":"image_picker","label":"Second Trust Image"}]},{"type":"@app"}],"settings":[{"id":"image_badge_image_2","type":"image_picker","label":"Badge Image 2"},{"id":"image_badge_image","type":"image_picker","label":"Badge Image"},{"id":"image_background_image","type":"image_picker","label":"Background Image"},{"type":"header","content":"background"},{"type":"color_background","id":"background","label":"Background","default":"linear-gradient(180deg, hsla(0, 0.00%, 0.00%, 0.00), hsla(0, 0.00%, 100.00%, 0.00))"},{"type":"select","id":"text_color","label":"Text Farbe","options":[{"value":"text-color-white","label":"Weiss"},{"value":"text-color-primary","label":"Dunkelblau"}],"default":"text-color-primary"},{"id":"checkbox_pfeil","type":"checkbox","label":"Pfeil","default":true}],"presets":[{"name":"H - Main","category":"Liquify","blocks":[{"type":"testimonial"},{"type":"headline"},{"type":"text"},{"type":"usps"},{"type":"buttons"}]}]} {% endschema %} Resources Visit the Liquify Pro documentation Look at our documentation Get detailed information and see how everything works. Webflow Logo Start with a Webflow template Use a fully working template as starting point. Liquify Pro Badge Get the Liquify Pro Webflow app Install the Liquify Pro Webflow App on your project. Shopify Cheat Sheet (Documentation) Shopify liquid Basics (Documentation) Shopify Liquid (Documentation) Learn Shopify Liquid in 10 minutes as a Beginner (Video) Documentation Discord Imprint Terms of Service Privacy Policy ©2025 Liquify GmbH. We are Halbstark, one of the leading Shopify agencies in Germany. Our tool has been meticulously crafted with great care. It's important to note that we have no affiliation with Webflow or Shopify. We are an independent entity dedicated to providing you with a unique and valuable tool for your e-commerce needs. Your feedback is invaluable to us as we continue to improve our service. Thank you for being a part of our journey. Wized LogoPowered by Wized