Moving padding up

Luxurymrkt · ‎08-29-2024

hi,

I want to move padding up on my collection grid so they have less space

my site is https://vazluxe.com/collections

Thank You | mike

Moeed · ‎08-29-2024

Hey @Luxurymrkt

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.list-collections__inner.page__inner {
    padding-bottom: 0 !important;
}
.collection-list-grid.collection-list-grid--mobile-per-view-2.collection-list-grid--per-view-5.section.section--divider-none.section--vertical-padding-top-bottom.animation.animation--collection-list-grid.is-visible {
    padding-top: 15px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

-Need a Shopify Specialist? Chat on WhatsApp
- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ☕❤️

View solution in original post

Moeed · ‎08-29-2024

Hey @Luxurymrkt

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.list-collections__inner.page__inner {
    padding-bottom: 0 !important;
}
.collection-list-grid.collection-list-grid--mobile-per-view-2.collection-list-grid--per-view-5.section.section--divider-none.section--vertical-padding-top-bottom.animation.animation--collection-list-grid.is-visible {
    padding-top: 15px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

-Need a Shopify Specialist? Chat on WhatsApp
- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ☕❤️

manan123 · ‎08-30-2024

Hii i have an issue please help me , i have slideshow section which support both video & image format but perhaps its does not have a option to upload video & images for mobile devices. I want you to optimized it for mobile devices also , so that i'll able to upload video & images for mobile & desktop seperately . I'll be very thankful to you . Below is the code :

My webiste link: https://mansaroverfurnishings.com/

CODE :

{% assign short_id = section.id | slice: -3, 3 %}

@keyframes slpProgressBar {
0% { width: 0; }
100% { width: 100%; }
}

#sp-slideshow-{{ section.id }}.sp-slideshow-wrap p,
#sp-slideshow-{{ section.id }}.sp-slideshow-wrap a {
font-size: {{ section.settings.text_size }}px;
font-family: {{ section.settings.text_font.family }}, {{ section.settings.text_font.fallback_families }};
font-weight: {{ section.settings.text_font.weight }};
line-height: 1.15;
}

#sp-slideshow-{{ section.id }}.sp-slideshow-wrap {
background-image: {{ section.settings.background_color }};
width: 100%;
}

#sp-slideshow-{{ section.id }} .sp-slideshow {
position: relative;
margin: 0 auto;
max-width: {{ section.settings.max_width }}px;
padding: {{ section.settings.padding_top }}px {{ section.settings.padding_right }}px {{ section.settings.padding_bottom }}px {{ section.settings.padding_left }}px;
}

#sp-slideshow-{{ section.id }} .sp-slideshow .sp-slideshow-grid {
position: relative;
margin: 0 auto;
padding: 0;
display: block;
}

#sp-slideshow-{{ section.id }} .sp-slideshow-col {
margin: 0;
padding: 0;
}

#sp-slideshow-{{ section.id }} .sp-slideshow-carousel {
display: grid;
grid-auto-columns: 100%;
grid-auto-flow: column;
width: 100%;
overflow-x: scroll;
scroll-snap-type: x mandatory;
border-radius: {{ section.settings.media_radius }}px;
{% if section.settings.media_shadow %}box-shadow: 0 0 5px 0 rgba(0,0,0,0.20);{% endif %}
margin: 0;
padding: 0;
}

#sp-slideshow-{{ section.id }} .sp-slideshow-carousel::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}

#sp-slideshow-{{ section.id }} .sp-slideshow-carousel .sp-slideshow-slide {
scroll-snap-align: start;
position: relative;
}

#sp-slideshow-{{ section.id }} .sp-slideshow-slide {
position: relative;
width: 100%;
}

#sp-slideshow-{{ section.id }} .sp-slideshow-content video {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: {{ section.settings.media_aspect_ratio }};
display: block;
}

#sp-slideshow-{{ section.id }} .sp-slideshow-content img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: {{ section.settings.media_aspect_ratio }};
display: block;
}

#sp-slideshow-{{ section.id }} .sp-slideshow-slide-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
background: {{ section.settings.caption_background_color }};
}

#sp-slideshow-{{ section.id }} .sp-slideshow-slide-text p {
color: {{ section.settings.text_color }};
font-weight: normal;
margin: 0;
padding: 10px 20px;
text-align: center;
}

#sp-slideshow-{{ section.id }} .sp-slideshow-slide-text p a,
#sp-slideshow-{{ section.id }} .sp-slideshow-slide-text p a:visited {
font-weight: bold;
text-decoration: underline;
color: {{ section.settings.text_color }};
}

#sp-slideshow-{{ section.id }} .sp-slideshow-snap-links {
display: block;
width: 100%;
padding: 10px;
margin: 0;
text-align: center;
}

#sp-slideshow-{{ section.id }} .sp-slideshow-snap-links a {
display: inline-block;
background-color: {{ section.settings.indicator_color }};
width: 12px;
height: 12px;
border-radius: 50%;
text-indent: -9999px;
padding: 0;
margin: 0 2.5px;
cursor: pointer;
opacity: 0.25;
}

#sp-slideshow-{{ section.id }} .sp-slideshow-snap-links a:hover {
{{ section.settings.indicator_color }};
opacity:1;
}

#sp-slideshow-{{ section.id }} .sp-slideshow-snap-links a[active] {
{{ section.settings.indicator_color }};
opacity:1;
}

#sp-slideshow-{{ section.id }}[autoplaying] #sp-slideshow-snap-links-{{ section.id }} a[active] {
background: {{ section.settings.progress_background_color }};
opacity: 1;
width: 25px;
transition: all .5s;
border-radius: 10px;
overflow: hidden;
}

#sp-slideshow-{{ section.id }}[autoplaying] #sp-slideshow-snap-links-{{ section.id }} a[active]>span {
display: block;
background: {{ section.settings.progress_foreground_color }};
height: 100%;
animation: slpProgressBar {{ section.settings.autoplay_time }}ms ease-in-out;
animation-fill-mode: both;
}

</style>

<div id="sp-slideshow-{{ section.id }}" class="sp-slideshow-wrap">
<div class="sp-slideshow ">
<div class="sp-slideshow-grid">
<div class="sp-slideshow-col">
<div id="sp-slideshow-carousel-{{ section.id }}" class="sp-slideshow-carousel">
{% for block in section.blocks %}
<div class="sp-slideshow-slide" data-index="{{ forloop.index | minus: 1 }}">
<div class="sp-slideshow-content">
{% if block.type == 'video' %}
{{
block.settings.video
| video_tag:
image_size: '1100x',
playsinline: block.settings.video_inline,
autoplay: block.settings.video_autoplay,
loop: block.settings.video_loop,
controls: block.settings.video_controls,
muted: block.settings.video_muted
}}
{% endif %}
{% if block.type == 'image' %}
{% if block.settings.image %}
<img loading="lazy"
src="{{ block.settings.image | image_url: width: 600 }}"
srcset="{{ block.settings.image| image_url: width: 600 }} 600w,
{{ block.settings.image | image_url: width: 800 }} 800w,
{{ block.settings.image | image_url: width: 1000 }} 1000w,
{{ block.settings.image | image_url: width: 1100 }} 1100w">
{% endif %}
{% endif %}
</div>

<div class="sp-slideshow-slide-text">
<p>
{{ block.settings.slide_text }}
<a href="{{block.settings.cta_link}}">{{ block.settings.cta_text }}</a>
</p>
</div>
</div>
{% endfor %}
</div>

<div id="sp-slideshow-snap-links-{{ section.id }}" class="sp-slideshow-snap-links">
{% for block in section.blocks %}
<a data-index="{{ forloop.index | minus: 1 }}"><span></span></a>
{% endfor %}
</div>
</div>

</div>

</div>

</div>

// create new Sections Pro slideshow
class SpSlideShow_{{ short_id }} {

constructor(section, carousel, enable_autoplay, autoplay_time, slides, links) {

console.log(`[spslideshow] setup`);

this.section = section;
this.carousel = carousel;
this.slides = slides;
this.links = links;
this.index = 0;
this.interval = null;
this.observer = null;
this.direction = 'up';
this.autoplay_time = autoplay_time;
this.autoplay_is_setup = false;

// enable autoplay
if(enable_autoplay) {
console.log(`[spslideshow] enable auotplay`);
this.setupAutoplayObserver();
this.setupClearEvents();
}

// setup links and observer
this.setupLinks();
this.setupObserver();
}

// don't start autoplay until the slideshow is visible
setupAutoplayObserver() {
var context = this;

// use intersection observer to render dots
this.observer = new IntersectionObserver(function(entries, observer) {

// Loop over the entries
entries.forEach(entry => {
// If the element is visible
if (entry.isIntersecting) {
if(context.autoplay_is_setup == false) {
context.setupAutoplay();
context.autoplay_is_setup = true;
}
}
});

}, {
threshold: 0.5
});

for (var i = 0; i < this.slides.length; i++) {
this.observer.observe(this.carousel);
}
}

// setup autoplay
setupAutoplay() {

var autoplay_time = this.autoplay_time;

console.log(`[spslideshow] setup autoplay time = ${autoplay_time}`);

var context = this;
context.section.setAttribute('autoplaying', '');

this.interval = setInterval(function() {

// handle next
if(context.direction == 'up') context.index++;
else context.index--;

// rewind
if(context.index == context.slides.length) {
context.direction = 'down';
context.index--;
}
else if(context.index < 0) {
context.direction = 'up';
context.index++;
}

// get slide
var slide = context.slides[context.index];

if(slide) {
context.carousel.scroll({
behavior: 'smooth',
left: slide.offsetLeft
});
}
else {
clearInterval(context.interval);
}

}, autoplay_time);
}

// setup events
setupClearEvents() {
var context = this;

this.carousel.addEventListener('mousedown', (e) => {
context.clearInterval();
});

this.carousel.addEventListener('touchstart', (e) => {
context.clearInterval();
});
}

// cancel the interval timer
clearInterval() {
if(this.interval) clearInterval(this.interval);
this.section.removeAttribute('autoplaying');
}

// setup navigation links
setupLinks() {

var context = this;

for(var x=0; x<this.links.length; x++) {

// handle click of links
this.links[x].addEventListener('click', (e) => {

// clear interval
context.clearInterval();

var index = parseInt(e.target.getAttribute(`data-index`));
var slide = null;

for(x=0; x<context.slides.length; x++) {
var i = parseInt(context.slides[x].getAttribute('data-index')) || 0;
if(i==index) slide = context.slides[x];
}

if(slide) {
context.carousel.scroll({
behavior: 'smooth',
left: slide.offsetLeft
});
}

e.preventDefault();
});
}

}

// set active link
setActiveLink(index) {
for(var y=0; y<this.links.length; y++) this.links[y].removeAttribute('active');

// set all active
for(var y=0; y<this.links.length; y++) {
if(this.links[y].hasAttribute('data-index')) {
var i = parseInt(this.links[y].getAttribute('data-index'));
if(i == index) this.links[y].setAttribute('active', '');
}
}

}

// setup observer
setupObserver() {

var context = this;

// use intersection observer to render dots
this.observer = new IntersectionObserver(function(entries, observer) {

// Loop over the entries
entries.forEach(entry => {
// If the element is visible
if (entry.isIntersecting) {
var index = parseInt(entry.target.getAttribute('data-index')) || 0;
context.setActiveLink(index);
}
});

}, {
root: context.carousel, threshold: 0.5
});

for (var i = 0; i < this.slides.length; i++) {
this.observer.observe(this.slides[i]);
}

}

}
// end SpSlideShow class

var section_{{ short_id }} = document.querySelector('#sp-slideshow-{{ section.id }}');
var carousel_{{ short_id }} = document.querySelector(`#sp-slideshow-carousel-{{ section.id }}`);
var slides_{{ short_id }} = section_{{ short_id }}.querySelectorAll('.sp-slideshow-slide');
var links_{{ short_id }} = section_{{ short_id }}.querySelectorAll('.sp-slideshow-snap-links a');

new SpSlideShow_{{ short_id }}(section_{{ short_id }}, carousel_{{ short_id }}, {{ section.settings.enable_autoplay }}, {{ section.settings.autoplay_time }}, slides_{{ short_id }}, links_{{ short_id }});

</script>

{% schema %}
{
"name": "

SP - Slideshow",
"settings": [
{
"type": "header",
"content": "Text",
"info": "Set the text size for your widget"
},
{
"type": "font_picker",
"id": "text_font",
"label": "Text Font",
"default": "helvetica_n4"
},
{
"type": "range",
"id": "text_size",
"min": 10,
"max": 50,
"step": 1,
"unit": "px",
"label": "Text Size",
"default": 15
},
{
"type": "header",
"content": "Colors",
"info": "Set colors for the section."
},
{
"type": "color",
"id": "text_color",
"default": "#111",
"label": "Text Color"
},
{
"type": "color_background",
"id": "background_color",
"default": "transparent",
"label": "Background Color"
},
{
"type": "color_background",
"id": "caption_background_color",
"default": "linear-gradient(177deg, rgba(255, 255, 255, .5) 3%, rgba(255, 255, 255, .85) 100%)",
"label": "Caption Background Color"
},
{
"type": "color_background",
"id": "progress_background_color",
"default": "linear-gradient(177deg, rgba(17, 17, 17, .25) 3%, rgba(17, 17, 17, 0.25) 100%)",
"label": "Progress Background Color"
},
{
"type": "color_background",
"id": "progress_foreground_color",
"default": "linear-gradient(177deg, rgba(17, 17, 17, 1) 3%, rgba(17, 17, 17, 1) 100%)",
"label": "Progress Foreground Color"
},
{
"type": "color",
"id": "indicator_color",
"default": "#111",
"label": "Indicator Color"
},
{
"type": "header",
"content": "Dimensions",
"info": "Set the section dimensions in pixels."
},
{
"type": "number",
"id": "max_width",
"default": 1000,
"label": "Max Width of Section"
},
{
"type": "number",
"id": "padding_top",
"default": 25,
"label": "Padding Top"
},
{
"type": "number",
"id": "padding_bottom",
"default": 25,
"label": "Padding Bottom"
},
{
"type": "number",
"id": "padding_left",
"default": 10,
"label": "Padding Left"
},
{
"type": "number",
"id": "padding_right",
"default": 10,
"label": "Padding Right"
},
{
"type": "header",
"content": "Slideshow",
"info": "Set settings for your slideshow"
},
{
"type": "range",
"id": "media_radius",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Round Borders on Media",
"default": 5
},
{
"type": "checkbox",
"id": "media_shadow",
"default": true,
"label": "Subtle Shadow on Media"
},
{
"type": "select",
"id": "media_aspect_ratio",
"default": "4 / 3",
"label": "Media Aspect Ratio",
"options": [
{
"value": "21 / 9",
"label": "21:9"
},
{
"value": "16 / 9",
"label": "16:9"
},
{
"value": "4 / 3",
"label": "4:3"
},
{
"value": "1 / 1",
"label": "1:1"
}
],
"default": "4 / 3"
},
{
"type": "checkbox",
"id": "enable_autoplay",
"default": true,
"label": "Enable Autoplay?"
},
{
"type": "select",
"id": "autoplay_time",
"label": "Autoplay Time",
"options": [
{
"value": "10000",
"label": "Slowest (10s)"
},
{
"value": "7500",
"label": "Slower (7.5s)"
},
{
"value": "5000",
"label": "Normal (5s)"
},
{
"value": "3000",
"label": "Faster (3s)"
},
{
"value": "2000",
"label": "Fastest (2s)"
}
],
"default": "5000"
}
],
"blocks": [
{
"name": "Image",
"type": "image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},

{
"type": "inline_richtext",
"id": "slide_text",
"label": "Caption",
"default": "Use this field to caption your slide"
},
{
"type": "text",
"id": "cta_text",
"label": "Call to Action Text",
"default": "Lets go"
},
{
"type": "url",
"id": "cta_link",
"label": "Call to Action Link"
}
]
},
{
"name": "Video",
"type": "video",
"settings": [
{
"type": "video",
"id": "video",
"label": "Video"
},
{
"type": "inline_richtext",
"id": "slide_text",
"label": "Caption",
"default": "Use this field to caption your slide"
},
{
"type": "text",
"id": "cta_text",
"label": "Call to Action Text",
"default": "Lets go →"
},
{
"type": "url",
"id": "cta_link",
"label": "Call to Action Link"
},
{
"type": "checkbox",
"id": "video_inline",
"label": "Play Inline",
"default": true
},
{
"type": "checkbox",
"id": "video_autoplay",
"label": "Autoplay",
"default": true
},
{
"type": "checkbox",
"id": "video_loop",
"label": "Loop Video",
"default": true
},
{
"type": "checkbox",
"id": "video_controls",
"label": "Show Video Controls",
"default": false
},
{
"type": "checkbox",
"id": "video_muted",
"label": "Mute Video",
"default": true
}
]
}
],
"presets": [
{
"name": "

SP - Slideshow",
"blocks": [
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}

{% comment %}
© Sections Pro. You are free to use this section in your store. You may not redistribute this section in another Shopify app.
{% endcomment %}
<style>
{{ section.settings.text_font | font_face }}