xxxxxxxxxx
 
<!-- 
​
Paste your HTML code here
👉 Click [Try view] to preview
👉 Click [Beautiful code] to format HTML codes
👉 Click [Copy to clipboard] and use in the product description, collection description, page, blog, article, theme settings, metafields,... 
​
-->
​

1.Layouts

Select layout

      <div class="row align-items-center text-center layout-column-2">
        <div class="col-12 col-md-6 mb-2 mt-2">
          [[ COLUMN LEFT ]] 
        </div>
        <div class="col-12 col-md-6 mb-2 mt-2">
          [[COLUMN RIGHT ]]
        </div>
      </div>

[[ COLUMN LEFT ]]

[[COLUMN RIGHT ]]

[[ COLUMN LEFT ]]

[[COLUMN RIGHT ]]

[[ COLUMN LEFT ]]

[[COLUMN RIGHT ]]

[[ COLUMN LEFT ]]

[[COLUMN RIGHT ]]

[[ COLUMN LEFT ]]

[[ COLUMN MIDDLE ]]

[[ COLUMN RIGHT ]]

[[ SMALL COLUMN 1 ]]

[[ SMALL COLUMN 2 ]]

[[ BIG COLUMN ]]

[[ SMALL COLUMN 1 ]]

[[ SMALL COLUMN 2 ]]

[[ BIG COLUMN ]]

[[ SMALL COLUMN 1 ]]

[[ SMALL COLUMN 2 ]]

[[ BIG COLUMN ]]

[[ COLUMN LEFT ]]

[[ COLUMN MIDDLE 1 ]]

[[ COLUMN MIDDLE 2 ]]

[[ COLUMN RIGHT ]]

[[ COLUMN 1 ]]

[[ COLUMN 2 ]]

[[ COLUMN 3 ]]

[[ COLUMN 4 ]]

[[ COLUMN 5 ]]

[[ COLUMN 6 ]]

[[ HTML CONTENT FIRST ]]

[[ HTML CONTENT MIDDLE 1 ]]

[[ HTML CONTENT MIDDLE 2 ]]

[[ HTML CONTENT MIDDLE 3 ]]

[[ HTML CONTENT LAST ]]

2. Build elements

# Typography

Select type

      <h1 class="h1">This is H1 heading</h1>

This is H1 heading

#Divided, the gaps between the element

Select divide

<hr class="border-primary"/>

Select banner

      <div class="mb-3">
        <img class="lybn-lazyload lazyload" alt="HTML builder image" data-src="https://cdn.shopify.com/s/files/1/0092/7563/7839/files/mmenu-2.jpg?57915" />
      </div>

# Snippets

Select snippet

      <blockquote class="blockquote blockquote-1 bg-white p-5 shadow rounded">
        <div class="blockquote-custom-icon bg-info shadow-sm"></div>
        <p class="mb-0 mt-2 font-italic">
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut. <a href="#" class="text-info">@consequat</a>"
        </p>
        <footer class="blockquote-footer pt-3 mt-3 border-top">
          Someone famous in
          <cite title="Source Title">Source Title</cite>
        </footer>
      </blockquote>

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut. @consequat"

Someone famous in Source Title

Design Quality

Rich and beautifully designed. There are countless features allowing for a great deal of flexibility in website creation. Logical and precise it's well thought out and works seamlessly as it should. The customer support is great too; timely, direct. I recommend.

Sky Walker

CEO

[[ Icon ]]

Service heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

[[ Icon ]]

Service heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

[[ Icon ]] Service heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ajay Core

CTO

card image

Sunlimetech

This is basic card with image on top, title, description and button.

[[Icon]]

[[ CONTENT TEXT 1 ]]

[[ CONTENT TEXT 2 ]]

[[ CONTENT TEXT 3 ]]

[[ CONTENT TEXT 4 ]]

# Other components

Rating

<ul class="rating text-center">
      <li class="rated">
      </li>
<li class="rated">
      </li>
<li class="rated">
      </li>
<li>
      </li>
<li>
    </li>
</ul>

Countdown 1

<div class="js-countdown js-countdown--1" data-time="2025-05-11T00:00:00"></div>

26Days
07Hours
51Mins
39Secs

Countdown 2

<div class="js-countdown js-countdown--2" data-time="2025-05-11T00:00:00"></div>

26Days
07Hours
51Mins
39Secs

Google maps

👉 Get embled code here

<div class="gmap-iframe"><div class="mapouter">
<div class="gmap_canvas"><iframe width="1080" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div>
<style>.mapouter{position:relative;text-align:right;height:500px;width:1080px}.gmap_canvas{overflow:hidden;background:0 0!important;height:500px;width:1080px}.gmap-iframe .gmap_canvas,.gmap-iframe .mapouter,.gmap-iframe iframe{width:100%!important}@media (max-width:767px){.gmap-iframe .gmap_canvas,.gmap-iframe .mapouter,.gmap-iframe iframe{height:350px!important}}</div></div></style>
</div></div>

#Icon (Click to copy code)

<i class="icon-app"></i>

<i class="icon-app-alt"></i>

<i class="icon-arrow-down"></i>

<i class="icon-arrow-left"></i>

<i class="icon-arrow-right"></i>

<i class="icon-arrow-up"></i>

<i class="icon-arrow-thin-down"></i>

<i class="icon-arrow-thin-left"></i>

<i class="icon-arrow-thin-right"></i>

<i class="icon-arrow-thin-up"></i>

<i class="icon-chevron-down"></i>

<i class="icon-chevron-left"></i>

<i class="icon-chevron-right"></i>

<i class="icon-chevron-up"></i>

<i class="icon-bag"></i>

<i class="icon-cart"></i>

<i class="icon-circle"></i>

<i class="icon-check-circle"></i>

<i class="icon-coffee"></i>

<i class="icon-square"></i>

<i class="icon-check-square"></i>

<i class="icon-checkout"></i>

<i class="icon-close"></i>

<i class="icon-contract"></i>

<i class="icon-copy"></i>

<i class="icon-divide"></i>

<i class="icon-dot-circle"></i>

<i class="icon-download"></i>

<i class="icon-envelope"></i>

<i class="icon-compare"></i>

<i class="icon-facebook"></i>

<i class="icon-gear"></i>

<i class="icon-gear-alt"></i>

<i class="icon-globe-europe"></i>

<i class="icon-hamburger"></i>

<i class="icon-heart"></i>

<i class="icon-heart-solid"></i>

<i class="icon-home"></i>

<i class="icon-idea"></i>

<i class="icon-idea-2"></i>

<i class="icon-instagram"></i>

<i class="icon-linkedin-in"></i>

<i class="icon-lock"></i>

<i class="icon-mail"></i>

<i class="icon-minus"></i>

<i class="icon-mobile-phone"></i>

<i class="icon-more-alt"></i>

<i class="icon-notebook"></i>

<i class="icon-package"></i>

<i class="icon-pause"></i>

<i class="icon-pencil-ruler"></i>

<i class="icon-phone"></i>

<i class="icon-phone-alt"></i>

<i class="icon-pictue"></i>

<i class="icon-picture-alt"></i>

<i class="icon-pin"></i>

<i class="icon-pin-2"></i>

<i class="icon-pinterest"></i>

<i class="icon-placeholder"></i>

<i class="icon-play"></i>

<i class="icon-plus"></i>

<i class="icon-quickview"></i>

<i class="icon-quote"></i>

<i class="icon-remove"></i>

<i class="icon-route"></i>

<i class="icon-search"></i>

<i class="icon-send"></i>

<i class="icon-sign-out"></i>

<i class="icon-sliders"></i>

<i class="icon-snapchat"></i>

<i class="icon-speaker"></i>

<i class="icon-star"></i>

<i class="icon-star-alt"></i>

<i class="icon-trophy"></i>

<i class="icon-trophy-2"></i>

<span class="icon-truck"></span>

<i class="icon-tumblr"></i>

<i class="icon-twitter"></i>

<i class="icon-typography"></i>

<i class="icon-user"></i>

<i class="icon-view"></i>

<i class="icon-vimeo"></i>

<i class="icon-youtube"></i>

#Introduction (v1.08)

This tool is used to quickly create HTML templates in Shopify or other platform with Bootstrap 4.3.1 You can paste the HTML codes generated from this tool into product desription, collection description, page, theme settings, metafields,... in your Shopify store. This tool is only integrated into this demonstration store, so it does not affect your page or your theme speed, you simply copy the HTML from this tool. Based on Apollo framework 4.0, Bootstrap 4.3.1 and other technologies (Shopify, jQuery, Smashicons, HTML5, CSS3,..) These are not hard-code, they work with CSS classes in Apollo framework 4.0. In some cases, colors and fonts display differently than here, depending on your theme settings. Feel free to contact us if you have any issues with this tool or Apollo framework 4.0. ( apollotheme@gmail.com | trandinhnghiait | nvchien91 ) Please note that we do not support issues that appear when you paste the codes into 3rd party themes.

How this works?

HtmlBuilder

Easy to Use

In 2020

1.Layouts

2. Build elements

# Typography

This is H1 heading

This is H1 heading

This is H2 heading

This is H3 heading

This is H4 heading

This is H5 heading

This is H6 heading

#Divided, the gaps between the element

# Banners, images

Nice Lily

Holy Sadie

Dreamy Honey Now

Crazy Layla

Creative Zoe

Warm Oscar

Sweet Marley

Glowing Ruby

Charming Roxy

Fresh Bubba

Wild Romeo

Strange Dexter

Free Sarah

Silly Chico

Faithful Milo

# Snippets

Design Quality

Sky Walker

Service heading

Service heading

[[ Icon ]] Service heading

Ajay Core

Sunlimetech

ACCORDION TITLE 1

ACCORDION TITLE 2

ACCORDION TITLE 3

ACCORDION TITLE 4

# Other components

Rating

Countdown 1

Countdown 2

Google maps

#Icon (Click to copy code)

#Introduction (v1.08)