Product & Image Text Slider Carousel

Product & Image Text Slider Carousel

by | 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

Marquee Section Shopify

by | 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

Counter Section Shopify

by | 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 %}