Moving padding up

Store Design
, , , , , , , ,
1

hi,

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

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

E081DF0D-4D37-4810-B3B3-B1DBDC987249.jpeg
E081DF0D-4D37-4810-B3B3-B1DBDC987249.jpeg1170Ă—2532 157 KB

2

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 tag

RESULT:

Moeed_0-1724968679733.png
Moeed_0-1724968679733.png346Ă—754 40.2 KB

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

Best Regards,
Moeed

1 Like
3

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 :

{{ section.settings.text_font | font_face }} {% 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; }
{% for block in section.blocks %}
{% 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 %} {% endif %} {% endif %}

{{ block.settings.slide_text }} {{ block.settings.cta_text }}

{% endfor %}
{% for block in section.blocks %} {% endfor %}

{% schema %}
{
“name”: "

manan123_0-1725005292739.png

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”: "

manan123_1-1725005292741.png

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 %}

{{ section.settings.text_font | font_face }} {% 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; }
{% for block in section.blocks %}
{% 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 %} {% endif %} {% endif %}

{{ block.settings.slide_text }} {{ block.settings.cta_text }}

{% endfor %}
{% for block in section.blocks %} {% endfor %}

{% schema %}
{
“name”: "

manan123_2-1725005292741.png

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”: "

manan123_3-1725005292742.png

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

4

Hey @manan123

If your section doesn’t supports to upload Images & Videos for mobile devices then I’m guessing you will have to custom code a section separately that supports that. If you’re not familiar with coding then I would highly suggest you to hire a Shopify developer who can help you with that. Feel free to let me know if you want me to help you out with that!

Best Regards,

Moeed

5

Yes Please help me to customize this code

6

Hii can you please help me, i want to move search icon to opposite side as shown in image , please help me with code

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

manan123_0-1725891363691.png