Free Code | Shopify experts | Wordpress Experts

Product & Image Text Slider Carousel

by dhiman.639 | May 27, 2024 | Free Code

We are delighted to showcase our new product slider carousel, designed to enhance your shopping experience. This interactive carousel allows you to effortlessly browse through our featured products, highlighting each item with smooth transitions and striking visuals. With intuitive navigation and a clean, modern layout, discovering our latest offerings has never been easier. Explore our curated selection and find your next favorite product with ease in this engaging, user-friendly format.

Please copy the code below and create a section naming product-slider.liquid or anything as per your convenince and enjoy using this .

Also please download flickity.pkgd.min.js and flickity.css from here

<link rel="stylesheet" href="{{ 'flickity.css' | asset_url }}">
<script src="{{ 'flickity.pkgd.min.js' | asset_url }}" async></script>
<div class="page-width section-{{ section.id }}-padding">
  <div class="carousel" data-flickity='{ "groupCells": true ,"freeScroll": true, "wrapAround": true, "autoPlay": true}'>
    {% for block in section.blocks %}
      <div class="carousel-cell">
        <div class="card-wrapper-icons">
          <div class="card-image">{{ block.settings.image | image_url: width: 60 | image_tag }}</div>
          <div class="card-sub">{{ block.settings.label }}</div>
          <div class="card-main">{{ block.settings.description }}</div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

{% style %}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 1 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 1 | round: 0 }}px;
}
.section-{{ section.id }}-padding .carousel-cell {
width: 25%;
height: 350px;
margin-right: 10px;
border-radius: 5px;
text-align:{{section.settings.column_alignment}}
} 
.carousel-cell:before {
display: block;
text-align: center;
line-height: 200px;
font-size: 80px;
color: white;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
box-shadow: none;
}
{% endstyle %}
{% schema %}
{
  "name": "Slider Carousel",
  "settings": [],
  "blocks": [
  {
    "type": "Content",
    "name": "Content",
    "settings": [
      {
        "type": "image_picker",
        "id":"image",
        "label":"Choose an Image"
      },
      {
        "type": "text",
        "id": "label",
        "default": "I am Empty",
        "label": "Write Some Text"
      },
      {
        "type": "text",
        "id": "description",
        "default": "description",
        "label": "Description"
      }
    ]
  }
],
  "presets": [
    {
      "name": "Slider Carousel"
    }
  ]
}
{% endschema %}

Marquee Section Shopify

by dhiman.639 | May 23, 2024 | Free Code

Enhance your Shopify store with a dynamic marquee section to highlight promotions, new arrivals, or special announcements. This eye-catching feature scrolls text across your homepage, capturing customer attention and driving engagement. Customize the content and style to match your brand, ensuring a seamless and attractive addition to your store’s design.

Please copy the code below and create a section naming marquee.liquid or anything as per your convenince and enjoy using this .

{%- assign id = '#shopify-section-' | append: section.id -%}

{% style %}
 {{id}} .marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 200px;
    overflow-x: hidden;
  }
 {{id}} .marquee-content {
      display: flex;
      gap: 8rem;
  }
  {{id}} .track {
    position: absolute;
    white-space: nowrap;
    font-size:6rem;
    will-change: transform;
    animation: marquee 38s linear infinite;
  }

  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

    {{id}} .marquee .track:hover {
      animation-play-state: paused;
    }
{% endstyle %}

<div class="marquee">
  <div class="track">
    <div class="marquee-content">
      {% for i in (1..5) %}
        {% for block in section.blocks %}
          <span class="marquee-gap" style="color:{{ block.settings.color }}">{{ block.settings.text }}</span>
        {% endfor %}
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
  {
  "name": "Marquee Full Width",
  "settings": [],
  "blocks": [
    {
      "type": "ScrollingText",
      "name": "Scrolling Text",
      "limit": 4,
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Title",
          "label": "Scrolling Text"
        },
        {
          "type": "color",
          "id": "color",
          "default": "#000000",
          "label": "Text Color"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee Full Width"
    }
  ]
}
{% endschema %}

Counter Section Shopify

by dhiman.639 | May 22, 2024 | Free Code

Boost Engagement with a Dynamic Counter Section

Introduce a dynamic counter section to your Shopify store to showcase key milestones and achievements. This eye-catching feature enhances credibility and engages customers by displaying real-time data such as the number of products sold, satisfied customers, or active users. By highlighting your store’s success and popularity, you build trust and encourage more visitors to join your growing community.

Use the code below to create a section called counter-section.liquid and use it in your theme.


{%- assign id = '#shopify-section-' | append: section.id -%}
{% assign cell_align = section.settings.cell_align %}
{% style %}
  {{ id }} .counter-container {
    display: grid;
    max-width:var(--page-width);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
   margin: 0 auto;
  }

  {{ id }} .content {
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }

  {{ id }} .content:hover {
    transform: translateY(-5px);
  }

  {{ id }} .counter {
    font-size: 60px;
    font-weight: bold;
    color: #3498db;
    margin-bottom: 10px;
  }

  {{ id }} .label {
    font-size: 60px;
    font-weight: bold;
    color: #3498db;
    margin-bottom: 5px;
  }

  {{ id }} .description {
    font-size: 14px;
    color: #666;
  }
  {{ id }} .flex-counter {
      display: flex;
      justify-content: center;
      gap: 2px;
      align-items: baseline;
  }
  @media screen and (max-width: 480px) {
  {{ id }} .container {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    padding: 10px;
    gap: 10px;
  }
  
  {{ id }} .content {
    padding: 10px;
  }
  
 {{ id }} .counter {
    font-size: 36px;
  }
  
 {{ id }} .label {
    font-size: 14px;
  }
  
  {{ id }} .description {
    font-size: 12px;
  }
}
{% endstyle %}
<div class="page-width {{ cell_align }}">
   <h2 class="counter-title">{{ section.settings.title }}</h2>
  <h3 class="conter-subtitle">{{ section.settings.subtitle }}</h3>
</div>
<div class="counter-container gradient color-{{ section.settings.section_color_scheme }}">

  
  {% for block in section.blocks %}
    <div class="content" data-count="{{ block.settings.number }}">
      <div class="flex-counter">
        <div class="counter">0</div>
        <div class="label">{{ block.settings.label }}</div>
      </div>
      <div class="description">{{ block.settings.description }}</div>
    </div>
  {% endfor %}
</div>

<script>
 document.addEventListener("DOMContentLoaded", function() {
  const counterElements = document.querySelectorAll('.content');
  const countedElements = new Set(); // Track elements that have been counted
  let isCounting = false;

  function startCounting(element, countValue, duration) {
    const increment = Math.ceil(countValue / (duration / 10));
    let count = 0;
    const interval = setInterval(function() {
      count += increment;
      if (count >= countValue) {
        clearInterval(interval);
        count = countValue;
        isCounting = false;
      }
      element.querySelector('.counter').textContent = count;
    }, 10);
  }

  function handleScroll() {
    if (!isCounting) {
      counterElements.forEach(function(element) {
        if (!countedElements.has(element) && isElementInViewport(element)) {
          const countValue = parseInt(element.getAttribute('data-count'));
          const duration = Math.min(3000, countValue * 10); // Maximum duration 3 seconds
          isCounting = true;
          startCounting(element, countValue, duration);
          countedElements.add(element);
        }
      });
    }
  }

  function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }


  handleScroll();

 
  window.addEventListener('scroll', handleScroll);
});


</script>
{% schema %}
{
  "name": "Scroll up Counter",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Top Title",
      "label": "Title"
    },
    {
      "type": "text",
      "id": "subtitle",
      "default": "Subtitle",
      "label": "Subtitle"
    },
    {
      "type": "color_scheme",
      "id": "section_color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "select",
      "id": "cell_align",
      "label": "Slide Alignment",
      "options": [
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "right"
        }
      ],
      "default": "center"
    }
  ],
  "blocks": [
    {
      "type": "Content",
      "name": "Content",
      "limit": 3,
      "settings": [
        {
          "type": "number",
          "id": "number",
          "label": "Counter Value",
          "default": 1
        },
        {
          "type": "text",
          "id": "label",
          "default": "K",
          "label": "Counter Label"
        },
        {
          "type": "text",
          "id": "description",
          "default": "description",
          "label": "description"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Scroll up Counter"
    }
  ]
}
{% endschema %}

Pricing Table Section Shopify

by Rohit Gurung | May 21, 2024 | Free Code

The Importance of an Effective Pricing Section in Your Shopify Store

A clear and compelling pricing section is crucial for converting visitors into customers on your Shopify store. This section serves as a vital touchpoint where potential customers evaluate the value and affordability of your products or services. An effective pricing table not only highlights the different plans or product options available but also emphasizes the unique features and benefits of each tier, making it easier for customers to make informed decisions.

Key benefits of a well-designed pricing section include:

Transparency and Trust: By clearly displaying pricing information, you build trust with your customers. Transparency in pricing helps reduce uncertainty and fosters a sense of reliability.
Ease of Comparison: A structured pricing table allows customers to quickly compare different options. This can highlight the advantages of higher-tier plans or more comprehensive products, encouraging upsells.
Enhanced User Experience: A clean, intuitive design ensures that visitors can easily navigate through the options. This enhances the overall user experience, reducing friction and helping to guide potential buyers towards making a purchase.
Highlighting Value Propositions: Use this section to underscore the unique value propositions of each pricing tier. This can include special features, benefits, or exclusive offers that differentiate your products from competitors.
Driving Conversions: A strategically designed pricing section can effectively drive conversions by appealing to different customer segments. By addressing various needs and budgets, you cater to a broader audience, increasing the likelihood of conversion.

Incorporate these principles into your pricing section to maximize its impact. Remember, the goal is to make it as easy as possible for your customers to see the value you offer and to choose the plan or product that best suits their needs.

To get the Pricing table please use the code below

Below is the style for the pricing table

{% style %}
  .pricingTable {
    margin: 40px auto;
  }
  .pricingTable > .pricingTable-title {
    text-align: center;
  
    font-size: 3em;
    font-size: 300%;
    margin-bottom: 20px;
    letter-spacing: 0.04em;
  }
  .pricingTable > .pricingTable-subtitle {
    text-align: center;
  
    font-size: 1.8em;
    letter-spacing: 0.04em;
    margin-bottom: 60px;
  }
  @media screen and (max-width: 480px) {
    .pricingTable > .pricingTable-subtitle {
      margin-bottom: 30px;
    }
  }
  .pricingTable-firstTable {
    list-style: none;
    padding-left: 2em;
    padding-right: 2em;
    text-align: center;
  }
  .pricingTable-firstTable_table {
    vertical-align: middle;
    width: 31%;
   
    display: inline-block;
    padding: 0px 30px 40px;
    text-align: center;
    max-width: 320px;
    transition: all 0.3s ease;
    border-radius: 5px;
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table {
      display: block;
      width: 90%;
      margin: 0 auto;
      max-width: 90%;
      margin-bottom: 20px;
      padding: 10px;
      padding-left: 20px;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table > * {
      display: inline-block;
      vertical-align: middle;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table > * {
      display: block;
      float: none;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:after {
      display: table;
      content: "";
      clear: both;
    }
  }
  .pricingTable-firstTable_table:hover {
    transform: scale(1.08);
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:hover {
      transform: none;
    }
  }
  .pricingTable-firstTable_table:not(:last-of-type) {
    margin-right: 1.5%;
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:not(:last-of-type) {
      margin-right: auto;
    }
  }
  .pricingTable-firstTable_table:nth-of-type(2) {
    position: relative;
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:nth-of-type(2) h1 {
      padding-top: 8%;
    }
  }
  .pricingTable-firstTable_table:nth-of-type(2):before {
    content: "Most Popular";
    position: absolute;
    color: white;
    display: block;
    background-color: #3bbdee;
    text-align: center;
    right: 15px;
    top: -25px;
    height: 65px;
    width: 65px;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 0.5em;
    padding-top: 22px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    transition: all 0.5s ease;
  }
  @media screen and (max-width: 988px) {
    .pricingTable-firstTable_table:nth-of-type(2):before {
      font-size: 0.6em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table:nth-of-type(2):before {
      left: 10px;
      width: 45px;
      height: 45px;
      top: -10px;
      padding-top: 13px;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table:nth-of-type(2):before {
      font-size: 0.8em;
    }
  }
  .pricingTable-firstTable_table:nth-of-type(2):hover:before {
    transform: rotate(360deg);
  }
  .pricingTable-firstTable_table__header {
    font-size: 1.6em;
    padding: 40px 0px;
    border-bottom: 2px solid #fff;
    letter-spacing: 0.03em;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__header {
      font-size: 1.45em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__header {
      padding: 0px;
      border-bottom: none;
      float: left;
      width: 33%;
      padding-top: 3%;
      padding-bottom: 2%;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__header {
      font-size: 1.3em;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__header {
      float: none;
      width: 100%;
      font-size: 1.8em;
      margin-bottom: 5px;
    }
  }
  .pricingTable-firstTable_table__pricing {
    font-size: 3em;
    padding: 30px 0px;
    border-bottom: 2px solid #fff;
    line-height: 0.7;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__pricing {
      font-size: 2.8em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__pricing {
      border-bottom: none;
      padding: 0;
      float: left;
      clear: left;
      width: 33%;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__pricing {
      font-size: 2.4em;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__pricing {
      float: none;
      width: 100%;
      font-size: 3em;
      margin-bottom: 10px;
    }
  }
  .pricingTable-firstTable_table__pricing span:first-of-type {
    font-size: 0.35em;
    vertical-align: top;
    letter-spacing: 0.15em;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__pricing span:first-of-type {
      font-size: 0.3em;
    }
  }
  .pricingTable-firstTable_table__pricing span:last-of-type {
    vertical-align: bottom;
    font-size: 0.3em;
    letter-spacing: 0.04em;
    padding-left: 0.2em;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__pricing span:last-of-type {
      font-size: 0.25em;
    }
  }
  .pricingTable-firstTable_table__options {
    list-style: none;
    padding: 15px;
    font-size: 0.9em;
    border-bottom: 2px solid #fff;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__options {
      font-size: 0.85em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__options {
      border-bottom: none;
      padding: 0;
      margin-right: 10%;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__options {
      font-size: 0.7em;
      margin-right: 8%;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__options {
      font-size: 1.3em;
      margin-right: none;
      margin-bottom: 10px;
    }
  }
  .pricingTable-firstTable_table__options > li {
    padding: 8px 0px;
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__options > li {
      text-align: left;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__options > li {
      padding: 5px 0;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__options > li {
      text-align: center;
    }
  }
  .pricingTable-firstTable_table__options > li:before {
    content: "✓";
    display: inline-flex;
    margin-right: 15px;
    color: white;
 background-color: green;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    font-size: 0.8em;
    padding: 2px;
    align-items: center;
    justify-content: center;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__options > li:before {
      width: 14px;
      height: 14px;
      padding: 1.5px;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__options > li:before {
      width: 12px;
      height: 12px;
    }
  }
  .pricingTable-firstTable_table__getstart {
    color: white;
    border: 0;
    background-color: #71ce73;
    margin-top: 30px;
    border-radius: 5px;
    cursor: pointer;
    padding: 15px;
    box-shadow: 0px 3px 0px 0px #66ac64;
    letter-spacing: 0.07em;
    transition: all 0.4s ease;
  }
  @media screen and (max-width: 1068px) {
    .pricingTable-firstTable_table__getstart {
      font-size: 0.95em;
    }
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__getstart {
      margin-top: 0;
    }
  }
  @media screen and (max-width: 610px) {
    .pricingTable-firstTable_table__getstart {
      font-size: 0.9em;
      padding: 10px;
    }
  }
  @media screen and (max-width: 480px) {
    .pricingTable-firstTable_table__getstart {
      font-size: 1em;
      width: 50%;
      margin: 10px auto;
    }
  }
  .pricingTable-firstTable_table__getstart:hover {
    transform: translateY(-10px);
    box-shadow: 0px 40px 29px -19px rgba(102, 172, 100, 0.9);
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__getstart:hover {
      transform: none;
      box-shadow: none;
    }
  }
  .pricingTable-firstTable_table__getstart:active {
    box-shadow: inset 0 0 10px 1px #66a564, 0px 40px 29px -19px rgba(102, 172, 100, 0.95);
    transform: scale(0.95) translateY(-9px);
  }
  @media screen and (max-width: 767px) {
    .pricingTable-firstTable_table__getstart:active {
      transform: scale(0.95) translateY(0);
      box-shadow: none;
    }
  }
{% endstyle %}

Below is the liquid code for the pricing table

    
      <div class="pricingTable gradient color-{{ section.settings.section_color_scheme }}">
      <h2 class="pricingTable-title">{{ section.settings.title }}</h2>
      <h3 class="pricingTable-subtitle">{{ section.settings.subtitle }}</h3>

      <ul class="pricingTable-firstTable">
        {% for block in section.blocks %}
          <li class="pricingTable-firstTable_table" style="background-color:{{ block.settings.bgcolor }}">
            <h1 class="pricingTable-firstTable_table__header">{{ block.settings.title }}</h1>
            <p class="pricingTable-firstTable_table__pricing">
              <span>$</span><span>{{ block.settings.price }}</span><span>{{ block.settings.interval }}</span>
            </p>
            <ul class="pricingTable-firstTable_table__options">
              {% if block.settings.list-item-1 != blank %}
              <li>{{ block.settings.list-item-1 }}</li>
              {% endif %}
              {% if block.settings.list-item-2 != blank %}
              <li>{{ block.settings.list-item-2 }}</li>
              {% endif %}
              {% if block.settings.list-item-3 != blank %}
              <li>{{ block.settings.list-item-3 }}</li>
              {% endif %}
              {% if block.settings.list-item-4 != blank %}
              <li>{{ block.settings.list-item-4 }}</li>
              {% endif %}
              {% if block.settings.list-item-5 != blank %}
              <li>{{ block.settings.list-item-5 }}</li>
              {% endif %}
            </ul>
            <button class="pricingTable-firstTable_table__getstart"><a href="{{ block.settings.button_link }}">{{ block.settings.button }}</a></button>
          </li>
        {% endfor %}
      </ul>
    </div>

Below is the Schema for the pricing table

    
{% schema %}
{
  "name": "Pricing Table",
  "settings": [
      {
          "type": "text",
          "id": "title",
          "default": "Top Title",
          "label": "Title"
        },
      {
          "type": "text",
          "id": "subtitle",
          "default": "Subtitle",
          "label": "Subtitle"
        },
      {
      "type": "color_scheme",
      "id": "section_color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    }
  ],
  "blocks": [
    {
      "type": "table",
      "name": "Table",
      "limit": 3,
        "settings": [
         {
          "type": "text",
          "id": "title",
          "default": "Title",
          "label": "Title"
        },
           {
          "type": "text",
          "id": "price",
          "default": "Price",
          "label": "Price"
        },
              {
          "type": "select",
          "id": "interval",
          "options": [
            {
              "value": "monthly",
              "label": "Monthly"
            },
            {
              "value": "yearly",
              "label": "Yearly"
            }
          ],
          "default": "monthly",
          "label": "Monthly"
        },
          {
            "type": "text",
          "id": "list-item-1",
          "default": "List Item 1",
          "label": "List Item 1"
          },
          {
            "type": "text",
          "id": "list-item-2",
          "default": "List Item 2",
          "label": "List Item 2"
          },
          {
            "type": "text",
          "id": "list-item-3",
          "default": "List Item 3",
          "label": "List Item 3"
          },
          {
            "type": "text",
          "id": "list-item-4",
          "default": "List Item 4",
          "label": "List Item 4"
          },
          {
            "type": "text",
          "id": "list-item-5",
          "default": "List Item 5",
          "label": "List Item 5"
          },
          {
          "type": "text",
          "id": "button",
          "default": "Button Title",
          "label": "Button Title"
        },
           {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
        },
          {
            "type":"color",
            "id":"bgcolor",
            "default": "#FFFFFF",
            "label":"Background Color"
          }
        ]
    }
  ],
  "presets": [
   {
     "name":"Pricing Table"
   }
  ]
}
{% endschema %}

Latest Sections

Product on sale
Awesome Partner Logo Section

Original price was: $29.99.Current price is: $9.99.
Add to cart
Product on sale
Portfolio Slider Section With Text

Original price was: $59.99.Current price is: $14.99.
Add to cart
Product on sale
Responsive Comparison Table Section

Original price was: $59.99.Current price is: $14.99.
Add to cart
Product on sale
Massonary Image Grid Gallery Section

Original price was: $29.00.Current price is: $9.00.
Add to cart
Product on sale
Shopify Amazing Slider Section

Original price was: $99.00.Current price is: $0.00.
Add to cart

View Top Rated Sections

Product on sale
Awesome Partner Logo Section

Original price was: $29.99.Current price is: $9.99.
Add to cart
Product on sale
Portfolio Slider Section With Text

Original price was: $59.99.Current price is: $14.99.
Add to cart
Product on sale
Responsive Comparison Table Section

Original price was: $59.99.Current price is: $14.99.
Add to cart
Product on sale
Massonary Image Grid Gallery Section

Original price was: $29.00.Current price is: $9.00.
Add to cart
Product on sale
Shopify Amazing Slider Section

Original price was: $99.00.Current price is: $0.00.
Add to cart