Hello @neomirae ,
To view natural images in a marquee, follow the steps below:
-
Navigate to the online store.
-
Go to themes → Edit Code → Add a new section and select the file format as liquid.
-
Name the file “scrolling-banner” and click “Done.”
-
Remove all dummy code and replace it with the following:
{{ 'countdown-timer.css' | asset_url | stylesheet_tag: preload: true }}
{% schema %}
{
"name": "Scrolling banner",
"class": "section-scrolling-banner",
"disabled_on": {
"groups": [
"aside"
]
},
"settings": [
{
"id": "full_width",
"type": "checkbox",
"label": "Full page width",
"default": true
},
{
"type": "color_scheme",
"id": "section_color_scheme",
"label": "Color scheme",
"default": "background-1"
},
{
"type": "range",
"id": "text_size",
"min": 12,
"max": 200,
"step": 2,
"unit": "px",
"label": "Text size",
"default": 12
},
{
"type": "range",
"id": "vertical_padding",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Vertical padding",
"default": 10
},
{
"type": "range",
"id": "speed",
"min": 0.5,
"max": 40,
"step": 0.5,
"unit": "x",
"label": "Speed",
"default": 35
},
{
"type": "select",
"id": "direction",
"label": "Direction",
"options": [
{
"label": "Left to right",
"value": "right"
},
{
"label": "Right to left",
"value": "left"
}
],
"default": "left"
},
{
"type": "range",
"id": "space",
"min": 0,
"max": 140,
"step": 5,
"unit": "px",
"label": "Space between items",
"default": 50
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"limit": 20,
"settings": [
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Your scrolling text here"
},
{
"type": "color",
"id": "color",
"label": "Color",
"default": "rgba(0,0,0,0)"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "checkbox",
"id": "use_h1",
"label": "Set as primary page heading",
"info": "Use # tag. One per page recommended. [Read more](https://cleancanvas.co.uk/support/symmetry/section-h1-setting)",
"default": false
},
{
"type": "header",
"content": "Stencil text"
},
{
"type": "paragraph",
"content": "Some or all of your text can appear as a stencil outline. May not work in all browsers."
},
{
"type": "checkbox",
"id": "stencil_all_text",
"label": "Stencil all text",
"default": false
}
]
},
{
"type": "icon",
"name": "Icon",
"limit": 20,
"settings": [
{
"type": "select",
"id": "icon",
"label": "Icon",
"default": "star",
"options": [
{
"value": "circle",
"label": "circle"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar",
"label": "Calendar"
},
{
"value": "chat_bubble",
"label": "Chat bubble"
},
{
"value": "check_mark",
"label": "Check mark"
},
{
"value": "check_mark_in_circle",
"label": "Check mark in circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit_card",
"label": "Credit card"
},
{
"value": "dollar_sign",
"label": "Dollar sign"
},
{
"value": "dryer",
"label": "Dryer"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "iron",
"label": "Iron"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "leather",
"label": "Leather"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map_pin",
"label": "Map pin"
},
{
"value": "pants",
"label": "Pants"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "price_tag",
"label": "Price tag"
},
{
"value": "question_mark",
"label": "Question mark"
},
{
"value": "return",
"label": "Return"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shoe",
"label": "Shoe"
},
{
"value": "silhouette",
"label": "Silhouette"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "washing",
"label": "Washing"
}
]
},
{
"type": "range",
"id": "icon_width",
"min": 10,
"max": 200,
"step": 5,
"label": "Icon width",
"unit": "px",
"default": 50
},
{
"type": "color",
"id": "color",
"label": "Color",
"default": "rgba(0,0,0,0)"
}
]
},
{
"type": "image",
"name": "Image",
"limit": 20,
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"min": 10,
"max": 400,
"step": 5,
"label": "Image width",
"unit": "px",
"default": 100
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
},
{
"type": "button",
"name": "Button",
"limit": 20,
"settings": [
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Read more"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "primary",
"options": [
{
"label": "Primary",
"value": "primary"
},
{
"label": "Secondary",
"value": "secondary"
},
{
"label": "Custom",
"value": "custom"
}
]
},
{
"type": "color",
"id": "color_bg",
"label": "Custom background color",
"default": "#fff"
},
{
"type": "color",
"id": "color_text",
"label": "Custom text color",
"default": "#333"
}
]
},
{
"type": "countdown",
"name": "Countdown timer",
"settings": [
{
"type": "text",
"id": "end_date",
"label": "End date",
"info": "Required. Format: YYYY-MM-DD."
},
{
"type": "text",
"id": "end_time",
"label": "End time (optional)",
"info": "Format: 17:00 (24 hour clock). Uses the store's timezone."
},
{
"type": "richtext",
"id": "end_text",
"label": "End text",
"info": "This shows when the date and time elapses."
},
{
"type": "checkbox",
"id": "hide_on_end",
"label": "Hide the timer when the date and time elapses",
"default": false
},
{
"type": "color",
"id": "color",
"label": "Color",
"default": "rgba(0,0,0,0)"
},
{
"type": "range",
"id": "number_size",
"min": 20,
"max": 120,
"step": 2,
"unit": "px",
"label": "Number size",
"default": 40
},
{
"type": "select",
"id": "divider_type",
"label": "Divider type",
"default": "colon",
"options": [
{
"value": "colon",
"label": "Colon"
},
{
"value": "dot",
"label": "Dot"
},
{
"value": "line",
"label": "Line"
},
{
"value": "none",
"label": "None"
}
]
},
{
"type": "checkbox",
"id": "show_timer_labels",
"label": "Show labels",
"default": true
}
]
}
],
"presets": [
{
"name": "Scrolling banner",
"settings": {
},
"blocks": [
{
"type": "text"
}
]
}
]
}
{% endschema %}
- Add a new asset file, create a blank file with the extension .js, name it “scrolling-banner,” and click “Done.” Paste the JavaScript code into this file.
if (!customElements.get('scrolling-banner')) {
class ScrollingBanner extends HTMLElement {
constructor() {
super();
this.initLazyScript();
}
initLazyScript() {
// Transforms can confuse lazy loading in browsers, so we coordinate loading here
// Load all countdown timers
customElements.whenDefined('countdown-timer').then(() => {
this.querySelectorAll('countdown-timer').forEach((el) => el.init());
});
// Load all images
this.querySelectorAll('img[loading="lazy"]').forEach((el) => {
el.loading = 'eager';
});
// After fonts have loaded
document.fonts.ready.then(() => this.querySelector('.marquee').classList.add('marquee--animate'));
}
}
window.customElements.define('scrolling-banner', ScrollingBanner);
}
- Create a new snippet file, name it after the image file, and click “Done.” Paste the relevant code for the images.
{%- comment -%}
Parameters:
- image {Object} - Image object.
- sizes {String} - Content for the 'sizes' attribute (optional, default is 100vw).
- widths {String} - Comma separated list of image widths for the 'srcset' attribute (optional).
- class {String} - Class name(s) for the 'class' attribute (optional).
- loading {String} - eager/lazy/manual (optional, default is lazy)
- fetchpriority {String} - low/high/nil, passed on to image_tag (optional, default is nil)
- size_cols_desktop {Number} - width on desktop is 'page container width / this number'
- size_cols_mobile {Number} - width on mobile is 'screen width / this number'
- custom_aspect_ratio {Number} - aspect ratio to force on image (optional)
- custom_crop {String} - top/bottom/left/right/contain (optional, default is cover with focal point).
- as_mobile_source {Boolean} - Will output instead of for use in
- Lastly, create another new snippet file, name it after the icon file, and click "Done." Paste the corresponding code for the icons.
```markup
{%- if icon != blank -%}
{%- endif -%}
