Scheduled Bar or Banner Section

Scheduled Bar or Banner Section

Donate to view the code

Thank you

Compatibility: Most of Shopify theme, including Dawn

Add a banner to your Shopify store with simple codes. Use it multiple times in a same page.  Let the bar slides in mobile. You can use this bar section for logo, service information, or announcement.

Schedule it any day you want the banner the appear. You can also have an option to not schedule it. I decided to add the schedule after making the video. You should have this dropdown when you click the Section-bar.

Scheduled banner

 

To start.

  1. Go to your Online store > Themes > Actions > Edit code
  2. Go to Section folder and create a section and name it 'bar-section'. Then paste the code below.
 {% assign bar_interval = section.settings.bar_interval | times: 1000 %}
<bar-section class="section-bar--container" data-bar-interval='{{bar_interval}}' data-day="{{- section.settings.day_schedule -}}">
{%- for block in section.blocks -%}
<div class="section-bar" {{ block.shopify_attributes }}>
<img src="{{block.settings.bar_image | img_url: 'small' }}" alt="{{block.settings.bar_image.alt | img_url: 'small' }}">
{%- if block.settings.text != blank or block.settings.link != blank -%}
<a href="{{ block.settings.link }}" >
<p> {{ block.settings.text | escape }}</p>
</a>
{%- endif -%}
</div>
<div class="section-bar--mobile" {{ block.shopify_attributes }}
data-bar-index = "{{forloop.index}}">
{% if block.settings.bar_image != blank %}
<img src="{{block.settings.bar_image | img_url: 'small' }}" {% if section.settings.no_icon %} style="display: none" {% endif %}
alt="{{block.settings.bar_image.alt | img_url: 'small' }}">
{% endif %}
{%- if block.settings.text != blank or block.settings.link != blank -%}
<a href="{{ block.settings.link }}">
<p>{{ block.settings.text | escape }}
</p>
</a>
{%- endif -%}
</div>
{%- endfor -%}
<div class="dot-box">
<div class="dot-wrapper">
{%- for block in section.blocks -%}
<span class="bar-dot {% if forloop.first %}active-dot{% endif %}"
data-dot-index="{{forloop.index0}}"
>&nbsp</span>
{% endfor %}
</div>
</div>
</bar-section>
<style>
.section-bar--container {
position: relative;
display: flex;
padding: 0 3%;
justify-content: space-around;
height: 50px;
background-color: {{ section.settings.color_scheme }};
overflow: hidden;
}
.section-bar {
display: flex;
padding: 1%;
align-content: center;
align-items: center;
}
.section-bar a:hover {
text-decoration: underline;
}

.section-bar img {
width: 30px;
margin-right: 5px;
}
.section-bar p {
line-height: 1.2;
margin: 0;
text-align: center;
font-size: 14px;
}

.section-bar a {
text-decoration: none;
}

.dot-box {
width: 100%;
display: none;
position: absolute;
left: 0;
bottom: 23%;
justify-content: center;
}

.dot-wrapper {
display: flex;
position: absolute;
width: 100%;
height: max-content;
justify-content: center;
}

.bar-dot {
width: 5px;
height: 5px;
margin: 0 2px;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
cursor: pointer;
}

.active-dot {
background: black;
}
.bar-dot{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.section-bar--mobile{
display: none;
}

@media only screen and (max-width: 1200px) {
.section-bar--container {
align-content: center;
padding: 1% 10%;
}
.section-bar {
display:none;
}
.section-bar--mobile {
width: 100%;
left: 0;
display: flex;
position: absolute;
justify-content: center;
align-items: center;

}
.section-bar--mobile a:hover {
text-decoration: underline;
}
.section-bar--mobile img {
width: 30px;
margin-right: 5px;
}
.section-bar--mobile p {
margin: 0;
}
.section-bar--mobile a{
text-decoration: none;
}

.dot-box {
display: flex;
}
}
@media only screen and (max-width: 400px) {
.section-bar--container {
align-content: center;
padding: 3%;
}
.section-bar--mobile {
font-size: 12px;
}

}
.hideBanner {
display: none;
}
</style>
<script>

</script>


{% schema %}
{
"name": "Section Bar",
"max_blocks": 12,
"settings": [
{
"type": "select",
"id": "day_schedule",
"label": "Schedule which day you want the banner to appear",
"default": "8",
"options": [
{
"value": "1",
"label": "Monday"
},
{
"value": "2",
"label": "Tuesday"
},
{
"value": "3",
"label": "Wednesday"
},
{
"value": "4",
"label": "Thursday"
},
{
"value": "5",
"label": "Friday"
},
{
"value": "6",
"label": "Saturday"
},
{
"value": "0",
"label": "Sunday"
},
{
"value": "8",
"label": "unset"
}
]
},

{
"type": "color",
"id": "color_scheme",
"default": "#F3F3F3",
"label": "Section Bar background color"
},
{
"type": "range",
"id": "bar_interval",
"label": "interval",
"max": 9,
"min": 1,
"step": 1,
"unit": "s",
"default": 3
},
{
"type": "checkbox",
"label": "No image icon on mobile",
"id": "no_icon"
}
],
"blocks": [
{
"type": "section_bar",
"name": "section bar",
"settings": [
{
"type": "image_picker",
"id": "bar_image",
"label": "Section bar icon"
},
{
"type": "text",
"id": "text",
"default": "Welcome to our store",
"label": "Text"
},

{
"type": "url",
"id": "link",
"label": "Section bar link"
}
]
}
],
"presets": [
{
"name": "Section Bar"
}
]
}
{% endschema %}

 

3. Lastly, open the global.js file under the Asset folder, and paste the code at the very bottom. 

class BarSection extends HTMLElement {
constructor() {
super();
this.barInterval = this.dataset.barInterval;
this.bar = this.querySelectorAll('.section-bar--mobile');
this.barDots = this.querySelectorAll('.bar-dot');
this.currentBar = 0;
this.totalBar = this.bar.length;

this.addEventListener("touchstart", this.touchSlide.bind(this));
this.addEventListener("touchend", this.moveSlide.bind(this));
this.barDots.forEach(
(dot) => dot.addEventListener('click', this.showDot.bind(this))
);
this.interval = setInterval(this.nextBar.bind(this), this.barInterval);
this.init();
this.schedule();

}

init() {
this.interval;
this.update(0);
}

schedule () {
this.schedule = this.dataset.day;
this.date = new Date();
this.dayOfWeekNumber = this.date.getDay();

if(this.schedule != 8 ) {
if( this.dayOfWeekNumber != this.schedule){
this.classList.add('hideBanner');
}
}
}

update(dotIndex) {
this.bar.forEach((slide, index) => {slide.style.transform = `translateX(${100 * (index - dotIndex)}%)`;});
this.barDots.forEach(dot => dot.classList.remove('active-dot'));
this.barDots[dotIndex].classList.add('active-dot');
}

touchSlide(e) {
this.touchX;
this.moveX;
this.touchX = e.touches[0].clientX;
if(this.touchX === undefined) {return}
this.moveSlide(this.touchX);
}

moveSlide(e) {
clearInterval(this.interval);
this.touchX = e.currentTarget;
this.moveX = e.changedTouches[0].clientX;

if (this.touchX > this.moveX) {
this.nextBar();
}else {
this.prevBar();
}
}

showDot(e) {
this.barDots.forEach(dot => dot.classList.remove('active-dot'));
e.currentTarget.classList.add('active-dot');
}

prevBar() {
this.currentBar--;
if (this.currentBar < 0) {
this.currentBar = this.totalBar - 1;
}
this.update(this.currentBar);
}

nextBar() {
this.currentBar++;
if (this.currentBar == this.totalBar) {
this.currentBar = 0;
}
this.update(this.currentBar);
}

}

customElements.define('bar-section', BarSection);

 

4. If you want this section to appear in all pages of your website, then open the theme.liquid, under Layout folder, and find the header section. Then paste the code, after the header section if you want the banner below the header. Before the header section, if you want the banner to appear above the header.

   {% section 'bar-section' %}

 

You can also add this to any part of your website as a section.

That's it. We will keep it quick and sweet. 

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription needed. No coding experience
Read More

Awesome slideshow for most of Shopify Themes - Work well with Dawn

Awesome slideshow with 11 unique designs to choose from. No app or subscription needed. No coding experience is necessar
Read More

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.
Read More

1 comentário

Very useful thanks! How would you make the banner image clickable in dawn theme?

Arati

Deixe um comentário