Compatibility: All Shopify theme. Styles may vary
In the ever-evolving world of web design, it's crucial to keep your website engaging and visually appealing. One way to achieve this is by incorporating dynamic elements that catch the visitor's eye. In this blog post, we'll explore how to create a Marquee Infinite Announcement section for your website—a versatile feature that provides a scrolling display of content, adding movement and interest without the need for complex scripts or multiple HTML files.
You can check the demo store here. Password: made4uo
What you are buying:
- A section that can be place anywhere in your website. Theme must be Shopify 2.0.
- Customize background color, text color, link, and animation duration
- Select between an image or text to have in a block
- Add a different font just for this section
- Option to change the background color and text color when hovered
- Change the height of the section
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To start:
1. Go to Admin Shopify store > Themes > Actions > Edit Code.
2. Open the Section folder, and create a new section, name it "marquee-component".
3. Replace the default code with the code below. Make sure to SAVE.
<style> {{ section.settings.font | font_face: font_display: 'swap' }} div#shopify-section-marquee-component { height: max-content; display: flex; } .marquee-container { height: var(--marquee-height); display: block; background: var(--marquee-background); } .marquee-container a { color: var(--marquee-color); } {% if section.settings.enable_hover %} .marquee-container:hover{ background: var(--marquee-hover-bg); } .marquee-container:hover a { color: var(--marquee-hover-color); } {% endif %} .marquee-box { height: var(--marquee-height); width: 100vw; overflow: hidden; position: relative; display: flex; align-items: center; } .marquee-box .marquee-wrapper { display: flex; width: calc(100% * 6); height: 100%; position: absolute; overflow: hidden; display: grid; grid-template-columns: repeat(6, 1fr); } .marquee-box .marquee--item { font-family: {{ section.settings.font.family | append: ", " | append: section.settings.font.fallback_families }}; font-style: {{ section.settings.font.style }}; font-weight: {{ section.settings.font.weight }}; transition: all ease 0.5s; animation: marquee calc(var(--marquee-animation-duration) * 1s) linear infinite; } .marquee-box .marquee-wrapper a { min-width: max-content; width: 100%; height: 100%; font-size: {{ section.settings.font_size | append: 'px' }}; line-height: 1.5; display: flex; justify-content: center; align-items: center; text-wrap: nowrap; text-decoration: none; } .marquee-box div { float: left; width: 100%; height: var(--marquee-height); display: flex; gap: var(--marquee-gap); } .marquee-wrapper img { width: 100%; height: auto; object-fit: cover; } @keyframes marquee { 0% { transform: translate(0); } 100% { transform: translate(-100%); } } .marquee--mobile { display: none; } .marquee--tablet { display: none; } @media only screen and (max-width: 1400px) { .marquee-box .marquee-wrapper { width: calc(100% * 4); grid-template-columns: repeat(4, 1fr); } } @media only screen and (max-width: 750px) { .marquee-box .marquee-wrapper { width: calc(100% * 2); grid-template-columns: repeat(2, 1fr); } } </style> <div class="marquee-container" style=" --marquee-height: {{ section.settings.height | append: 'px' }}; --marquee-gap: {{ section.settings.gap | append: 'rem' }}; --marquee-background: {{ section.settings.background }}; --marquee-color: {{ section.settings.font_color }}; --marquee-animation-duration: {{ section.settings.duration }}; --marquee-hover-bg: {{ section.settings.background_hover }}; --marquee-hover-color: {{ section.settings.font_color_hover }}; " > <div class="marquee-box"> <div class="marquee-wrapper" > <div class="marquee--item"> {% for block in section.blocks %} <a href="{{ block.settings.link }}"> {% if block.settings.image %} {{ block.settings.image | image_url: width: 3840 | image_tag: width: section.settings.image.width, height: section.settings.image.height, class: 'marquee-image' }} {% else %} {{ block.settings.text | escape }} {% endif %} </a> {% endfor %} </div> <div class="marquee--item"> {% for block in section.blocks %} <a href="{{ block.settings.link }}"> {% if block.settings.image %} {{ block.settings.image | image_url: width: 3840 | image_tag: width: section.settings.image.width, height: section.settings.image.height, class: 'marquee-image' }} {% else %} {{ block.settings.text | escape }} {% endif %} </a> {% endfor %} </div> </div> </div> </div> {% schema %} { "name": "Marquee component", "settings": [ { "type": "paragraph", "content": "Number of blocks affects the space in between items" }, { "type": "header", "content": "Color settings" }, { "type": "color", "id": "background", "label": "Background color", "default": "#EC008c" }, { "type": "color", "id": "font_color", "label": "Text color", "default": "#ffffff" }, { "type": "checkbox", "id": "enable_hover", "label": "Enable hover", "info": "Please provide colors below if enabled" }, { "type": "color", "id": "background_hover", "label": "Background hover color", "default": "#ffffff" }, { "type": "color", "id": "font_color_hover", "label": "Text hover color", "default": "#EC008c" }, { "type": "font_picker", "id": "font", "label": "Marquee font", "default": "helvetica_n4" }, { "type": "range", "id": "font_size", "min": 12, "max": 100, "step": 1, "unit": " px", "label": "Font size", "default": 15, "info": "This applies to mobile too" }, { "type": "range", "id": "duration", "min": 6, "max": 100, "step": 1, "unit": "s", "label": "Animation duration in seconds", "default": 38 }, { "type": "range", "id": "height", "min": 5, "max": 100, "step": 1, "unit": "px", "label": "Height of the section", "default": 40 }, { "type": "range", "id": "gap", "min": 0, "max": 100, "step": 1, "unit": "rem", "label": "Marquee gap in rem", "default": 2, "info": "Only works if you have several blocks" } ], "blocks": [ { "name": "Marquee", "type": "marquee", "settings": [ { "type": "text", "label": "Text", "id": "text", "default": "Black Friday | Shop & save up to 60% off storewide" }, { "type": "image_picker", "id": "image", "label": "Image", "info": "Leave blank for the text to show instead" }, { "type": "paragraph", "content": "Images might change in size and fill the gap" }, { "type": "url", "id": "link", "label": "Link" } ] } ], "presets": [ { "name": "Marquee component", "blocks": [ { "type": "marquee" }, { "type": "marquee" }, { "type": "marquee" } ] } ] } {% endschema %} |
4. Add the said component to your Shopify website, using the theme editor. Find the "Marquee component."
That's it (",)