shopify dawn theme slider

Scheduled Bar or Banner Section

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

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.

Check DEMO store here 💻

Scheduled banner

What you are buying:

  • Scheduled banner according to your needs
  • Icons and text can be use
  • Clickable link

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 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 -}}">
<ul>
{%- for block in section.blocks -%}
<li class="section-bar" {{ block.shopify_attributes }}>
<img class="{% if section.settings.no_icon %} hide-image {% endif %}" 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 }}" style="color: {{section.settings.text_color}}" >
<p> {{ block.settings.text | escape }}</p>
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>

<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;
background-color: {{ section.settings.color_scheme }};
overflow: hidden;
}

.section-bar--container {
-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--container ul {
position: relative;
flex-wrap: inherit;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1.5rem;
-webkit-overflow-scrolling: touch;
width: 100%;
padding-left: 0;
}

.section-bar--container ul {
scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
-ms-overflow-style: none;
scrollbar-width: none;
}

.section-bar--container ul::-webkit-scrollbar {
height: 0.4rem;
width: 0.4rem;
display: none;
}

.section-bar {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}

.section-bar a:hover {
text-decoration: underline;
}

.section-bar img {
width: 30px;
margin-right: 5px;
}

.section-bar p {
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 5px;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
cursor: pointer;
}

.active-dot {
background: #000;
}

.hide-banner {
display: none !important;
}

@media only screen and (max-width: 1200px) {
.section-bar {
min-width: 100%;
}

.dot-box {
display: flex;
}
}

@media only screen and (max-width: 400px) {
.hide-image {
display: none !important;
}
}

</style>
{% 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": "color",
"id": "text_color",
"default": "#000",
"label": "Section Bar text 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.barSlider = this.querySelector('ul');
this.bar = this.querySelectorAll('li');
this.barDots = this.querySelectorAll('.bar-dot');
this.currentBar = 0;
this.totalBar = this.bar.length;

this.barDots.forEach(
(dot) => dot.addEventListener('click', this.showDot.bind(this))
);
this.interval = setInterval(this.nextBar.bind(this), this.barInterval);
this.init();
const resizeObserver = new ResizeObserver(entries => this.init());
resizeObserver.observe(this.barSlider);
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('hide-banner');
}
}
}

update(dotIndex) {
this.barDots.forEach(dot => dot.classList.remove('active-dot'));
this.barDots[dotIndex].classList.add('active-dot');


this.slideScrollPosition = this.barSlider.clientWidth * dotIndex;
this.barSlider.scrollTo({
left: this.slideScrollPosition
});
}

showDot(e) {
e.preventDefault();
this.update(e.currentTarget.dataset.dotIndex)
}

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

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

 

You can also add this to any part of your website as a section by clicking "Customize theme." Add a section and look for the "Section bar."

That's it (",). We will keep it quick and sweet. 

Copied!
Voltar para o blogue

1 comentário

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

Arati

Deixe um comentário