Hii, im using dawn theme suddenly my slider arrows of all featured collections stop working , please help me to solve this issue.
Website link : https://mansaroverfurnishings.com/
Topic summary
A Shopify store owner using the Dawn theme encountered non-functional slider arrows in featured collections.
Root Cause Identified:
- The “Summer Collections” section had only 3 products, leaving no additional items to scroll through
- A Swiper slider was implemented without the required JavaScript and CSS files, causing console errors
- Swiper initialization issues existed with improper class structure and configuration
Resolution Steps:
- Add Swiper script and style files to the theme
- Ensure proper Swiper slider structure with correct classes and latest stable version
- Add more products to collections with insufficient items
Additional Requests:
The user later requested help with:
- Adjusting custom liquid video sizing (mobile full-width vs desktop normal width) - resolved
- Adding separate mobile/desktop image and video upload options to slideshow section code
- Relocating the search icon to the opposite side of the header
The slider arrow issue appears resolved, but the user continues seeking customization assistance for mobile-responsive media handling and header layout modifications.
Hi @manan123 , I have checked your store. And all the arrows are working in your featured collections. The only collection arrow not working is Summer Collections because there are only 3 products in that collection. There is no next slide to scroll when click on the arrow.
Hello @manan123 , In your New Arrivals section there is a default slider component of the Dawn theme shopify, and in your Summer collections section you are using the swiper slider. You don’t have the swiper slider script file and CSS file, which is mandatory to works the swiper slider correctly. Please see the screenshot below and see the errors in the console.
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.
@manan123 , Now you put the swiper script and style in the theme, and no errors will showing. There is a only 3 items show in that swiper slider so that you have to add more items of the collection in that.
i have added more images its still not working
please check
Hello @manan123 , it having swiper initialisation issue with the swiper class. Make proper structure according to the swiper slider’s structure, add proper scripts and CSS styles of the swiper slider with latest stable version. Add proper configuration of the swiper slider with class of that slider. and then check everything.
Hello, i have an another issue , i have added custom liquid but i want bigger size on mobile device & same on desktop please help me with code
webiste link : https://mansaroverfurnishings.com/
Means to say that you want to this coming soon video’s width set to full width in mobile and desktop both ?
no , i want width full only for mobile device , & want to keep as it is for desktop device
The video of the coming soon is already as you told that in mobile as it is in the normal width and in mobile it contains full width.
Please see the screenshots below,
Yess, thanks
can you help me with one issue below is the code of slideshow section , in which both images & video are supported but i also want to optimized it for mobile device as there’s no option to add video & image for mobile devices please give me the updated code for this.
here’s the 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 %}
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 :
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 %}
i want to move search icon to opposite side as shown in image , please help me with code
My website link : https://mansaroverfurnishings.com/
