Infinite Marquee Product Collectoin
Overview Looking to create an engaging and dynamic storefront for your Shopify store? The Infinite Marquee Product Collection section is the perfect Shopify solution to showcase your product collections in a seamless, continuous scrolling format. This custom Shopify section, designed exclusively for Xebrand, is fully responsive and ensures an immersive shopping experience on any device. With this marquee-style Shopify section, you can highlight featured products, top-selling items, or seasonal collections in a visually captivating way. The infinite scrolling effect adds a modern touch, allowing your customers to browse effortlessly without interruption. This premium Shopify section by Xebrand is ideal for grabbing attention and encouraging product exploration, making it a must-have for enhancing your storefront. Key Features: Infinite Marquee Scrolling: Showcases your product collections in an endless, smooth-scrolling format. Responsive Design: Optimized for desktop, tablet, and mobile devices to ensure a seamless user experience across all platforms. Customizable Settings: Easily modify colors, text, and padding in the Shopify editor to match your brand’s style. Hover-to-Pause Animation: Customers can hover over the products to pause scrolling for a closer look. Dynamic Collection Integration: Display products from your chosen collection, with the ability to loop items for uninterrupted scrolling. Call-to-Action Button: Includes a customizable button with a link to drive traffic to specific product pages or collections. Benefits of Using the Xebrand Infinite Marquee Section
<section class="custom-collection-slider" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
<div class="page-width">
<div class="header">
<h2 style="color: {{ section.settings.header_text_color }};">{{ section.settings.header_text }}</h2>
<p style="color: {{ section.settings.subheader_text_color }};">{{ section.settings.subheader_text }}</p>
</div>
<div class="marquee-container">
<div class="marquee">
<div class="marquee-content">
{% if section.settings.collection %}
{% assign collection_handle = section.settings.collection %}
{% assign collection = collections[collection_handle] %}
{% if collection.products.size > 0 %}
{% for product in collection.products %}
<div class="product-card">
<a href="{{ product.url }}" class="product-link">
<img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}" class="product-image" />
<div class="product-info">
<h3 class="product-title">{{ product.title }}</h3>
<p class="product-price">
{% if product.compare_at_price > product.price %}
<span class="sale-price">{{ product.price | money }}</span>
<span class="compare-price">{{ product.compare_at_price | money }}</span>
{% else %}
<span>{{ product.price | money }}</span>
{% endif %}
</p>
</div>
</a>
</div>
{% endfor %}
<!-- Repeat the products for continuous scrolling -->
{% for product in collection.products %}
<div class="product-card">
<a href="{{ product.url }}" class="product-link">
<img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}" class="product-image" />
<div class="product-info">
<h3 class="product-title">{{ product.title }}</h3>
<p class="product-price">
{% if product.compare_at_price > product.price %}
<span class="sale-price">{{ product.price | money }}</span>
<span class="compare-price">{{ product.compare_at_price | money }}</span>
{% else %}
<span>{{ product.price | money }}</span>
{% endif %}
</p>
</div>
</a>
</div>
{% endfor %}
{% else %}
<p>No products found in this collection.</p>
{% endif %}
{% else %}
<p>Please select a collection.</p>
{% endif %}
</div>
</div>
</div>
<div class="buton-cont">
<a href="{{ section.settings.button_link }}" class="discover-more-btn">{{ section.settings.button_text }}</a>
</div>
</div>
</section>
<style>
.custom-collection-slider {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.header h2 {
margin: 0;
font-size: 44px;
font-weight: bold;
}
.header p {
font-size: 40px;
margin: 0;
}
.buton-cont {
display: flex;
justify-content: center;
}
.custom-collection-slider .header {
text-align: center;
margin-bottom: 60px;
flex-direction: column;
line-height: 1.4;
display: flex;
}
.marquee-container {
overflow: hidden;
width: 100%;
position: relative;
}
.marquee {
display: flex;
animation: marquee 10s linear infinite;
}
.marquee:hover {
animation-play-state: paused; /* Pause the animation on hover */
}
.marquee-content {
display: flex;
width: max-content;
}
.product-card {
flex: 0 0 auto;
width: 300px;
border-radius: 10px;
overflow: hidden;
text-align: center;
margin: 0 10px;
}
.product-card .product-link {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
}
.product-card .product-image {
width: 100%;
height: 400px;
object-fit: cover;
}
.product-info {
padding: 10px 0;
text-align: left;
}
.product-title {
font-size: 16px;
margin: 5px 0;
font-weight: 600;
}
.product-price {
font-size: 14px;
color: #777;
margin: 0;
}
.product-price .sale-price {
color: red;
}
.discover-more-btn {
margin-top: 20px;
padding: 5px 10px;
border: none;
background-color: black;
color: white;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
display: inline-block;
text-align: center;
/* font-weight: bold; */
}
/* Keyframes for infinite scrolling */
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Responsiveness */
@media(max-width:1400px){
.marquee-container {
width: 89vw;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.header h2 {
font-size: 32px;
}
.header p {
font-size: 28px;
}
.product-card {
width: 250px;
}
.product-card .product-image {
height: 250px;
}
.discover-more-btn {
font-size: 14px;
padding: 8px 16px;
}
}
@media (max-width: 480px) {
.header h2 {
font-size: 24px;
}
.header p {
font-size: 20px;
}
.product-card {
width: 200px;
}
.product-card .product-image {
height: 200px;
}
.discover-more-btn {
font-size: 12px;
padding: 6px 12px;
}
}
</style>
{% schema %}
{
"name": "Marquee Slider",
"settings": [
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#f9f9f9"
},
{
"type": "range",
"id": "padding_top",
"label": "Padding Top",
"default": 50,
"min": 0,
"max": 200,
"step": 10
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding Bottom",
"default": 50,
"min": 0,
"max": 200,
"step": 10
},
{
"type": "color",
"id": "header_text_color",
"label": "Header Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "subheader_text_color",
"label": "Subheader Text Color",
"default": "#666666"
},
{
"type": "text",
"id": "header_text",
"label": "Header Text",
"default": "Black Friday"
},
{
"type": "text",
"id": "subheader_text",
"label": "Subheader Text",
"default": "Cyber Monday"
},
{
"type": "collection",
"id": "collection",
"label": "Select Collection"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Discover more"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
}
],
"presets": [
{
"name": "Marquee Slider",
"category": "Custom Sections"
}
]
}
{% endschema %}