hi,
I want to move padding up on my collection grid so they have less space
my site is https://vazluxe.com/collections
Topic summary
Collection Grid Padding Issue:
A user seeks to reduce spacing in their collection grid on vazluxe.com. A solution is provided involving custom CSS code to be added to the theme.liquid file above the </body> tag.
Slideshow Section Mobile Optimization:
Another user requests help making their slideshow section support separate video and image uploads for mobile and desktop devices. The current section only allows one set of media for all devices.
Response & Recommendation:
The responder suggests this requires custom coding of a new section, as the existing one doesn’t natively support device-specific media. They recommend hiring a Shopify developer if the user isn’t familiar with coding, though offer to help if needed.
Additional Request:
The same user also asks for help relocating the search icon to the opposite side of their site header (mansaroverfurnishings.com), with a reference image provided.
Status: Multiple issues remain open, awaiting either custom code solutions or developer assistance.
Hey @Luxurymrkt
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
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 %}
{% endfor %}
{% 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 }}
{% 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 %}
{% for block in section.blocks %}
{% endfor %}
{% 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 }}
{% 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 %}
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
Yes Please help me to customize this code
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/
