Shopify themes, liquid, logos, and UX
Since the 2.0 themes came out I have been using them for various projects and all I can say is that they are pretty good but very simplistic. In the past few days, I've been working on a new project but can't seem to figure out how to add new "sections"on the themes (that i find on codepen, since I have very little/basic knowledge of coding).
In the past themes, I would add a custom liquid to the editor, add all the CSS to theme.scss.liquid and if there was any JS that needed to be added I would go ahead and either put it on "theme.js" or "theme.liquid". And voila!! Everything would work perfectly.
With Dawn that I currently use, I add all CSS codes to base.css(of course change some things around so they do not affect any codes that are already in the theme) and add HTML on the custom liquid. When I have to add JS I go ahead and add it to global.js but doesn't seem to work at all!
What I wanna know is how can I add the codepen mentioned below to my theme in a custom liquid. Like what is the theme file i have to add the JS to? Am i doing something completely wrong? Please enlighten me!!
CODEPEN THAT WOULD LOVE TO ADD:
https://codepen.io/lmgonzalves/pen/djEgmv
Any help would be very much appreciated! Sorry for the long post!
@KetanKumar @made4Uo @LitCommerce @oscprofessional @PageFly-Victor
Hi @Panagi1091,
You can add a custom section by following the instructions below.
NOTE: If you try to add this section in multiple locations, it might cause an error. Also, make sure your theme supports SCSS, you might need to convert it to CSS.
1. In your Admin store, click Online store > Themes
2. Go to the theme you want to edit, click Actions > Edit code
3. In your Section folder, click Add a new section
4. You have to enclose your code like below.
html code here....
<style>
Place your CSS style here
<style>
<script>
Place your javascript code here
</script>
{% schema %}
{
"name": "Section name",
"settings": [],
"presets": [
{
"name": "Section name",
}
]
}
{% endschema %}
NOTE: You need the presets so you can see the section in your Theme editor. You can change the "Section name" to whatever you want.
Thanks for getting back to me! Tried that but all i get is "Invalid JSON in tag 'schema'" since i have no idea what to add on the settings and presets. Is this the best way to do it?
<div class="container">
<!-- Container for all sliders, and pagination -->
<main class="sliders-container">
<!-- Here will be injected sliders for images, numbers, titles and links -->
<!-- Simple pagination for the slider -->
<ul class="pagination">
<li class="pagination__item"><a class="pagination__button"></a></li>
<li class="pagination__item"><a class="pagination__button"></a></li>
<li class="pagination__item"><a class="pagination__button"></a></li>
<li class="pagination__item"><a class="pagination__button"></a></li>
</ul>
</main>
</div>
<style>
// SCSS mixin to generate the final CSS code for the slider
// Params:
// - $cssClass: CSS class to match the slider container
// - $slider-length: Length (width or height) of slider container
// - $slider-center: If slider should be centered
// - $slide-width: Fixed width for each slide
// - $slide-height: Fixed height for each slide
// - $vertical: If slider should be vertical (true), or horizontal (false)
// - $reverse: If slider should have reversed slides (first items at the end)
// - $debug: Show helpful background colors to help debugging
@mixin ms(
// Default values
$cssClass: 'ms-container',
$slider-length: 400px,
$slider-center: false,
$slide-width: 90px,
$slide-height: 90px,
$vertical: false,
$reverse: false,
$debug: false
) {
// Slider container
.#{$cssClass} {
position: relative;
@IF $slider-center {
margin: 0 auto;
}
overflow: hidden;
@IF $debug {
background-color: rgba(0, 0, 0, 0.2);
}
@IF $debug {
// Just for testing the current slide position (centered)
&:before {
content: '';
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 100%;
}
}
@IF $vertical {
// Styles for vertical slider
&.ms-container--vertical {
width: $slide-width;
height: $slider-length;
max-height: 100%;
@IF $debug {
&:before {
left: 0;
top: calc(50% - #{$slide-height / 2});
width: 100%;
height: $slide-height;
}
}
// Centering slider track vertically, to get current slide centered
.ms-track {
flex-direction: column;
top: calc(50% - #{$slide-height / 2});
}
@IF $reverse {
// Reverse styles
&.ms-container--reverse .ms-track {
flex-direction: column-reverse;
top: auto;
bottom: calc(50% - #{$slide-height / 2});
}
}
// Positioning slides vertically
.ms-slide {
display: flex;
}
}
} @else {
// Styles for horizontal slider
&.ms-container--horizontal {
width: $slider-length;
height: $slide-height;
max-width: 100%;
@IF $debug {
&:before {
left: calc(50% - #{$slide-width / 2});
top: 0;
width: $slide-width;
height: 100%;
}
}
// Centering slider track horizontally, to get current slide centered
.ms-track {
left: calc(50% - #{$slide-width / 2});
}
@IF $reverse {
// Reverse styles
&.ms-container--reverse .ms-track {
flex-direction: row-reverse;
left: auto;
right: calc(50% - #{$slide-width / 2});
}
}
// Positioning slides horizontally
.ms-slide {
display: inline-flex;
}
}
}
// Slider track
.ms-track {
display: flex;
position: absolute;
white-space: nowrap;
padding: 0;
margin: 0;
list-style: none;
}
// Slides
.ms-slide {
align-items: center;
justify-content: center;
width: $slide-width;
height: $slide-height;
user-select: none;
@IF $debug {
// A testing backgrounds for slides
&:nth-child(2n) {
background-color: rgba(0, 0, 0, 0.1);
}
&:nth-child(2n + 1) {
background-color: rgba(0, 0, 0, 0.2);
}
}
}
}
}
// Images
$ms-images-slide-width: 700px;
$ms-images-slide-height: 400px;
// SCSS mixin to generate the final CSS code for the slider
@include ms(
$cssClass: 'ms--images', // CSS class to match the slider container
$slider-length: 100%, // The slider container will have full width
$slider-center: false, // Don't need to center it, as it is full width
$slide-width: $ms-images-slide-width, // Fixed width for each slide
$slide-height: $ms-images-slide-height, // Fixed height for each slide
$vertical: false, // The slider should be horizontal
$reverse: false, // Normal order
$debug: false // No debbug backgrounds in production
);
// Custom styles for images slider
.ms--images {
left: calc(50% - #{$ms-images-slide-width / 2 - 70px});
&.ms-container--horizontal .ms-track {
left: -70px;
}
// Slides images
.ms-slide {
&:nth-child(1) .ms-slide__image {
background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/harvey-gibson-498362-unsplash.jpg');
}
&:nth-child(2) .ms-slide__image {
background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/andre-hunter-461305-unsplash.jpg');
}
&:nth-child(3) .ms-slide__image {
background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/joanna-nix-389128-unsplash.jpg');
}
&:nth-child(4) .ms-slide__image {
background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/jurica-koletic-321003-unsplash.jpg');
}
}
.ms-slide__image-container {
width: 80%;
height: 80%;
background-color: rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.ms-slide__image {
width: 100%;
height: 100%;
background-size: cover;
}
}
// Numbers
$ms-numbers-slide-width: 240px;
$ms-numbers-slide-height: 240px;
@include ms(
$cssClass: 'ms--numbers',
$slider-length: $ms-numbers-slide-width,
$slider-center: false,
$slide-width: $ms-numbers-slide-width,
$slide-height: $ms-numbers-slide-height,
$vertical: false,
$reverse: false,
$debug: false
);
.ms--numbers {
position: absolute;
left: calc(50% - #{$ms-images-slide-width / 2 + 30px});
top: calc(50% - #{$ms-images-slide-height / 2 + $ms-numbers-slide-height / 2 - 20px});
z-index: -1;
pointer-events: none;
.ms-slide {
font-size: 9em;
font-weight: 900;
color: rgba(255, 255, 255, 0.2);
}
}
// Titles
$ms-titles-slide-width: 400px;
$ms-titles-slide-height: 170px;
@include ms(
$cssClass: 'ms--titles',
$slider-length: $ms-titles-slide-height,
$slider-center: false,
$slide-width: $ms-titles-slide-width,
$slide-height: $ms-titles-slide-height,
$vertical: true,
$reverse: true,
$debug: false
);
.ms--titles {
position: absolute;
left: calc(50% - #{$ms-images-slide-width / 2 + 70px});
top: calc(50% - #{$ms-titles-slide-height / 2});
z-index: 1;
pointer-events: none;
.ms-track {
white-space: normal;
}
.ms-slide {
font-size: 3.3em;
font-weight: 600;
h3 {
margin: 0;
text-shadow: 1px 1px 2px black;
}
}
}
// Links
$ms-links-slide-width: 120px;
$ms-links-slide-height: 60px;
@include ms(
$cssClass: 'ms--links',
$slider-length: $ms-links-slide-height,
$slider-center: false,
$slide-width: $ms-links-slide-width,
$slide-height: $ms-links-slide-height,
$vertical: true,
$reverse: false,
$debug: false
);
.ms--links {
position: absolute;
left: calc(50% - #{$ms-images-slide-width / 2 + 70px});
top: calc(50% + #{$ms-titles-slide-height / 2 + 20px});
z-index: 1;
.ms-track {
white-space: normal;
}
.ms-slide__link {
font-weight: 600;
padding: 5px 0 8px;
border-bottom: 2px solid white;
cursor: pointer;
}
}
// Pagination
.pagination {
display: flex;
position: absolute;
left: calc(50% - #{$ms-images-slide-width / 2 + 70px});
top: calc(100%);
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 1;
&__button {
display: inline-block;
position: relative;
width: 36px;
height: 20px;
margin: 0 5px;
cursor: pointer;
&:before, &:after {
content: '';
position: absolute;
left: 0;
top: calc(50% - 1px);
width: 100%;
box-shadow: 0 1px 0 #0B0D14;
}
&:before {
height: 2px;
background-color: #6A3836;
}
&:after {
height: 3px;
background-color: #DC4540;
opacity: 0;
transition: 0.5s opacity;
}
}
}
.pagination__item--active .pagination__button:after {
opacity: 1;
}
// Responsive styles
@media screen and (max-width: 860px) {
.ms--numbers {
left: calc(50% - #{$ms-numbers-slide-width / 2});
}
.ms--titles {
left: calc(50% - #{$ms-titles-slide-width / 2});
top: calc(50% - #{$ms-titles-slide-height / 2 + 50px});
text-align: center;
}
.ms--links {
left: calc(50% - #{$ms-links-slide-width / 2});
top: calc(50% + #{$ms-links-slide-height / 2 + 50px});
}
.pagination {
left: 50%;
top: calc(100% - 50px);
transform: translateX(-50%);
}
}
@media screen and (max-width: 600px) {
.ms--images {
overflow: visible;
}
}
@media screen and (max-width: 400px) {
.ms--titles {
.ms-slide {
transform: scale(0.8);
}
}
}
$color-primary: rgba(255, 255, 255, 1);
$color-secondary: rgba(255, 255, 255, 0.5);
*, *:before, *:after {
box-sizing: border-box;
}
body {
color: $color-primary;
background-color: #1B1C21;
overflow: hidden;
}
a {
color: $color-primary;
text-decoration: none;
cursor: pointer;
}
.container {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: rgba(0, 0, 0, 0.1);
&:before {
content: '';
position: absolute;
left: -150%;
top: 0;
width: 300%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
transform: rotate(45deg);
z-index: -1;
}
}
.sliders-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
<style>
<script>
(function() {
var slidersContainer = document.querySelector('.sliders-container');
// Initializing the numbers slider
var msNumbers = new MomentumSlider({
el: slidersContainer,
cssClass: 'ms--numbers',
range: [1, 4],
rangeContent: function (i) {
return '0' + i;
},
style: {
transform: [{scale: [0.4, 1]}],
opacity: [0, 1]
},
interactive: false
});
// Initializing the titles slider
var titles = [
'King of the Ring Fight',
'Sound of Streets',
'Urban Fashion',
'Windy Sunset'
];
var msTitles = new MomentumSlider({
el: slidersContainer,
cssClass: 'ms--titles',
range: [0, 3],
rangeContent: function (i) {
return '<h3>'+ titles[i] +'</h3>';
},
vertical: true,
reverse: true,
style: {
opacity: [0, 1]
},
interactive: false
});
// Initializing the links slider
var msLinks = new MomentumSlider({
el: slidersContainer,
cssClass: 'ms--links',
range: [0, 3],
rangeContent: function () {
return '<a class="ms-slide__link">View Case</a>';
},
vertical: true,
interactive: false
});
// Get pagination items
var pagination = document.querySelector('.pagination');
var paginationItems = [].slice.call(pagination.children);
// Initializing the images slider
var msImages = new MomentumSlider({
// Element to append the slider
el: slidersContainer,
// CSS class to reference the slider
cssClass: 'ms--images',
// Generate the 4 slides required
range: [0, 3],
rangeContent: function () {
return '<div class="ms-slide__image-container"><div class="ms-slide__image"></div></div>';
},
// Syncronize the other sliders
sync: [msNumbers, msTitles, msLinks],
// Styles to interpolate as we move the slider
style: {
'.ms-slide__image': {
transform: [{scale: [1.5, 1]}]
}
},
// Update pagination if slider change
change: function(newIndex, oldIndex) {
if (typeof oldIndex !== 'undefined') {
paginationItems[oldIndex].classList.remove('pagination__item--active');
}
paginationItems[newIndex].classList.add('pagination__item--active');
}
});
// Select corresponding slider item when a pagination button is clicked
pagination.addEventListener('click', function(e) {
if (e.target.matches('.pagination__button')) {
var index = paginationItems.indexOf(e.target.parentNode);
msImages.select(index);
}
});
})();
</script>
{% schema %}
{
"name": "Carousel Image Slider",
"settings": [],
"presets": [
{
"name": "Carousel Image Slider",
}
]
}
{% endschema %}
Tried that but I get an error. Might be since I do not know what to put on "settings" and "presets" I get an error of "Invalid JSON in tag 'schema'.
Tried that but I get an error. Might be since I do not know what to put on "settings" and "presets" I get an error of "Invalid JSON in tag 'schema'.
Hi @Panagi1091,
Can you share your code? So we can figure out where the errors coming from
Sure thing! Thanks in advance 🙂
<div class="container">
<!-- Container for all sliders, and pagination -->
<main class="sliders-container">
<!-- Here will be injected sliders for images, numbers, titles and links -->
<!-- Simple pagination for the slider -->
<ul class="pagination">
<li class="pagination__item"><a class="pagination__button"></a></li>
<li class="pagination__item"><a class="pagination__button"></a></li>
<li class="pagination__item"><a class="pagination__button"></a></li>
<li class="pagination__item"><a class="pagination__button"></a></li>
</ul>
</main>
</div>
<style>
// SCSS mixin to generate the final CSS code for the slider
// Params:
// - $cssClass: CSS class to match the slider container
// - $slider-length: Length (width or height) of slider container
// - $slider-center: If slider should be centered
// - $slide-width: Fixed width for each slide
// - $slide-height: Fixed height for each slide
// - $vertical: If slider should be vertical (true), or horizontal (false)
// - $reverse: If slider should have reversed slides (first items at the end)
// - $debug: Show helpful background colors to help debugging
@mixin ms(
// Default values
$cssClass: 'ms-container',
$slider-length: 400px,
$slider-center: false,
$slide-width: 90px,
$slide-height: 90px,
$vertical: false,
$reverse: false,
$debug: false
) {
// Slider container
.#{$cssClass} {
position: relative;
@IF $slider-center {
margin: 0 auto;
}
overflow: hidden;
@IF $debug {
background-color: rgba(0, 0, 0, 0.2);
}
@IF $debug {
// Just for testing the current slide position (centered)
&:before {
content: '';
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 100%;
}
}
@IF $vertical {
// Styles for vertical slider
&.ms-container--vertical {
width: $slide-width;
height: $slider-length;
max-height: 100%;
@IF $debug {
&:before {
left: 0;
top: calc(50% - #{$slide-height / 2});
width: 100%;
height: $slide-height;
}
}
// Centering slider track vertically, to get current slide centered
.ms-track {
flex-direction: column;
top: calc(50% - #{$slide-height / 2});
}
@IF $reverse {
// Reverse styles
&.ms-container--reverse .ms-track {
flex-direction: column-reverse;
top: auto;
bottom: calc(50% - #{$slide-height / 2});
}
}
// Positioning slides vertically
.ms-slide {
display: flex;
}
}
} @else {
// Styles for horizontal slider
&.ms-container--horizontal {
width: $slider-length;
height: $slide-height;
max-width: 100%;
@IF $debug {
&:before {
left: calc(50% - #{$slide-width / 2});
top: 0;
width: $slide-width;
height: 100%;
}
}
// Centering slider track horizontally, to get current slide centered
.ms-track {
left: calc(50% - #{$slide-width / 2});
}
@IF $reverse {
// Reverse styles
&.ms-container--reverse .ms-track {
flex-direction: row-reverse;
left: auto;
right: calc(50% - #{$slide-width / 2});
}
}
// Positioning slides horizontally
.ms-slide {
display: inline-flex;
}
}
}
// Slider track
.ms-track {
display: flex;
position: absolute;
white-space: nowrap;
padding: 0;
margin: 0;
list-style: none;
}
// Slides
.ms-slide {
align-items: center;
justify-content: center;
width: $slide-width;
height: $slide-height;
user-select: none;
@IF $debug {
// A testing backgrounds for slides
&:nth-child(2n) {
background-color: rgba(0, 0, 0, 0.1);
}
&:nth-child(2n + 1) {
background-color: rgba(0, 0, 0, 0.2);
}
}
}
}
}
// Images
$ms-images-slide-width: 700px;
$ms-images-slide-height: 400px;
// SCSS mixin to generate the final CSS code for the slider
@include ms(
$cssClass: 'ms--images', // CSS class to match the slider container
$slider-length: 100%, // The slider container will have full width
$slider-center: false, // Don't need to center it, as it is full width
$slide-width: $ms-images-slide-width, // Fixed width for each slide
$slide-height: $ms-images-slide-height, // Fixed height for each slide
$vertical: false, // The slider should be horizontal
$reverse: false, // Normal order
$debug: false // No debbug backgrounds in production
);
// Custom styles for images slider
.ms--images {
left: calc(50% - #{$ms-images-slide-width / 2 - 70px});
&.ms-container--horizontal .ms-track {
left: -70px;
}
// Slides images
.ms-slide {
&:nth-child(1) .ms-slide__image {
background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/harvey-gibson-498362-unsplash.jpg');
}
&:nth-child(2) .ms-slide__image {
background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/andre-hunter-461305-unsplash.jpg');
}
&:nth-child(3) .ms-slide__image {
background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/joanna-nix-389128-unsplash.jpg');
}
&:nth-child(4) .ms-slide__image {
background-image: url('https://cdn.jsdelivr.net/gh/lmgonzalves/momentum-slider@3b3037f7f1bab402fe3c75cd20ab18e04e1cbe0b/portfolio-carousel/img/jurica-koletic-321003-unsplash.jpg');
}
}
.ms-slide__image-container {
width: 80%;
height: 80%;
background-color: rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.ms-slide__image {
width: 100%;
height: 100%;
background-size: cover;
}
}
// Numbers
$ms-numbers-slide-width: 240px;
$ms-numbers-slide-height: 240px;
@include ms(
$cssClass: 'ms--numbers',
$slider-length: $ms-numbers-slide-width,
$slider-center: false,
$slide-width: $ms-numbers-slide-width,
$slide-height: $ms-numbers-slide-height,
$vertical: false,
$reverse: false,
$debug: false
);
.ms--numbers {
position: absolute;
left: calc(50% - #{$ms-images-slide-width / 2 + 30px});
top: calc(50% - #{$ms-images-slide-height / 2 + $ms-numbers-slide-height / 2 - 20px});
z-index: -1;
pointer-events: none;
.ms-slide {
font-size: 9em;
font-weight: 900;
color: rgba(255, 255, 255, 0.2);
}
}
// Titles
$ms-titles-slide-width: 400px;
$ms-titles-slide-height: 170px;
@include ms(
$cssClass: 'ms--titles',
$slider-length: $ms-titles-slide-height,
$slider-center: false,
$slide-width: $ms-titles-slide-width,
$slide-height: $ms-titles-slide-height,
$vertical: true,
$reverse: true,
$debug: false
);
.ms--titles {
position: absolute;
left: calc(50% - #{$ms-images-slide-width / 2 + 70px});
top: calc(50% - #{$ms-titles-slide-height / 2});
z-index: 1;
pointer-events: none;
.ms-track {
white-space: normal;
}
.ms-slide {
font-size: 3.3em;
font-weight: 600;
h3 {
margin: 0;
text-shadow: 1px 1px 2px black;
}
}
}
// Links
$ms-links-slide-width: 120px;
$ms-links-slide-height: 60px;
@include ms(
$cssClass: 'ms--links',
$slider-length: $ms-links-slide-height,
$slider-center: false,
$slide-width: $ms-links-slide-width,
$slide-height: $ms-links-slide-height,
$vertical: true,
$reverse: false,
$debug: false
);
.ms--links {
position: absolute;
left: calc(50% - #{$ms-images-slide-width / 2 + 70px});
top: calc(50% + #{$ms-titles-slide-height / 2 + 20px});
z-index: 1;
.ms-track {
white-space: normal;
}
.ms-slide__link {
font-weight: 600;
padding: 5px 0 8px;
border-bottom: 2px solid white;
cursor: pointer;
}
}
// Pagination
.pagination {
display: flex;
position: absolute;
left: calc(50% - #{$ms-images-slide-width / 2 + 70px});
top: calc(100%);
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 1;
&__button {
display: inline-block;
position: relative;
width: 36px;
height: 20px;
margin: 0 5px;
cursor: pointer;
&:before, &:after {
content: '';
position: absolute;
left: 0;
top: calc(50% - 1px);
width: 100%;
box-shadow: 0 1px 0 #0B0D14;
}
&:before {
height: 2px;
background-color: #6A3836;
}
&:after {
height: 3px;
background-color: #DC4540;
opacity: 0;
transition: 0.5s opacity;
}
}
}
.pagination__item--active .pagination__button:after {
opacity: 1;
}
// Responsive styles
@media screen and (max-width: 860px) {
.ms--numbers {
left: calc(50% - #{$ms-numbers-slide-width / 2});
}
.ms--titles {
left: calc(50% - #{$ms-titles-slide-width / 2});
top: calc(50% - #{$ms-titles-slide-height / 2 + 50px});
text-align: center;
}
.ms--links {
left: calc(50% - #{$ms-links-slide-width / 2});
top: calc(50% + #{$ms-links-slide-height / 2 + 50px});
}
.pagination {
left: 50%;
top: calc(100% - 50px);
transform: translateX(-50%);
}
}
@media screen and (max-width: 600px) {
.ms--images {
overflow: visible;
}
}
@media screen and (max-width: 400px) {
.ms--titles {
.ms-slide {
transform: scale(0.8);
}
}
}
$color-primary: rgba(255, 255, 255, 1);
$color-secondary: rgba(255, 255, 255, 0.5);
*, *:before, *:after {
box-sizing: border-box;
}
body {
color: $color-primary;
background-color: #1B1C21;
overflow: hidden;
}
a {
color: $color-primary;
text-decoration: none;
cursor: pointer;
}
.container {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: rgba(0, 0, 0, 0.1);
&:before {
content: '';
position: absolute;
left: -150%;
top: 0;
width: 300%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
transform: rotate(45deg);
z-index: -1;
}
}
.sliders-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
<style>
<script>
(function() {
var slidersContainer = document.querySelector('.sliders-container');
// Initializing the numbers slider
var msNumbers = new MomentumSlider({
el: slidersContainer,
cssClass: 'ms--numbers',
range: [1, 4],
rangeContent: function (i) {
return '0' + i;
},
style: {
transform: [{scale: [0.4, 1]}],
opacity: [0, 1]
},
interactive: false
});
// Initializing the titles slider
var titles = [
'King of the Ring Fight',
'Sound of Streets',
'Urban Fashion',
'Windy Sunset'
];
var msTitles = new MomentumSlider({
el: slidersContainer,
cssClass: 'ms--titles',
range: [0, 3],
rangeContent: function (i) {
return '<h3>'+ titles[i] +'</h3>';
},
vertical: true,
reverse: true,
style: {
opacity: [0, 1]
},
interactive: false
});
// Initializing the links slider
var msLinks = new MomentumSlider({
el: slidersContainer,
cssClass: 'ms--links',
range: [0, 3],
rangeContent: function () {
return '<a class="ms-slide__link">View Case</a>';
},
vertical: true,
interactive: false
});
// Get pagination items
var pagination = document.querySelector('.pagination');
var paginationItems = [].slice.call(pagination.children);
// Initializing the images slider
var msImages = new MomentumSlider({
// Element to append the slider
el: slidersContainer,
// CSS class to reference the slider
cssClass: 'ms--images',
// Generate the 4 slides required
range: [0, 3],
rangeContent: function () {
return '<div class="ms-slide__image-container"><div class="ms-slide__image"></div></div>';
},
// Syncronize the other sliders
sync: [msNumbers, msTitles, msLinks],
// Styles to interpolate as we move the slider
style: {
'.ms-slide__image': {
transform: [{scale: [1.5, 1]}]
}
},
// Update pagination if slider change
change: function(newIndex, oldIndex) {
if (typeof oldIndex !== 'undefined') {
paginationItems[oldIndex].classList.remove('pagination__item--active');
}
paginationItems[newIndex].classList.add('pagination__item--active');
}
});
// Select corresponding slider item when a pagination button is clicked
pagination.addEventListener('click', function(e) {
if (e.target.matches('.pagination__button')) {
var index = paginationItems.indexOf(e.target.parentNode);
msImages.select(index);
}
});
})();
</script>
{% schema %}
{
"name": "Carousel Slider",
"settings": [],
"presets": [
{
"name": "Carousel Slider",
}
]
}
{% endschema %}
Sure thing! Thanks in advance 🙂 Since every time I posted the code it would disappear I went ahead and added it in a word document which I attached below.
@Panagi1091 no rush its our pleasure to help
If you're comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try
Well i just know the basics but i found my self trying for hours to do some stuff. What i'd like to know is where to add the JS. Tried adding it in global.js but does not work. Tried adding a custom section like Made4Uo but i do not know what to add on presets and settings.
User | RANK |
---|---|
154 | |
136 | |
77 | |
71 | |
70 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023