Dear All,
Please help I would create the sliding pages for the landing pages as example url https://www.boat-lifestyle.com/ I want to create Baby, Kitchen, Pets, Lifestyles, and others.
Please advise the step-by-step process advise soon. My url website idashfun.com
Thank you.
Ben
hi, @idashfun
Why not you can create the sliding page with the help of custom code , i wanna help you if you give me your live page URL .
Thank You.
Dear Zworthykey,
the url: idashfun.com
Looking forward to hear from you soon.
Thanks and regards,
Ben
{%- for block in section.blocks -%}
{%- assign sbscp = block.settings.slide_content_position -%}
{%- assign sbssa = block.settings.slide_animation -%}
{%- case block.type -%}
{%- when 'slide' -%}
{%- if block.settings.block_color_enable -%}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{%- include 'section-style' -%}
{%- if section.settings.section_color_enable -%}
{%- endif -%}
{% schema %}
{
"name": "Slideshow",
"settings": [
{
"type": "checkbox",
"id": "slider_large_height_enable",
"label": "Slider Large Height Enable",
"default": false
},
{
"type": "header",
"content": "Color"
},
{
"type": "checkbox",
"id": "section_color_enable",
"label": "Color Enable",
"default": false,
"info": "Enable the field for color customization"
},
{
"type": "color",
"id": "arrow_color",
"label": "Arrow Color",
"default": "#777777"
},
{
"type": "color",
"id": "arrow_hover_color",
"label": "Arrow Hover/Active Color",
"default": "#c29958"
},
{
"type": "header",
"content": "Mobile"
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay Color",
"default": "#fff"
},
{
"type": "range",
"id": "overlay_color_opatity",
"min": 0.0,
"max": 1,
"step": 0.1,
"label": "Overlay Color Opacity",
"default": 0.7
},
{
"type": "header",
"content": "Options"
},
{
"type": "checkbox",
"id": "autoplay_true",
"label": "Autoplay Enable",
"default": false
},
{
"type": "range",
"id": "autoplay_speed",
"min": 1000,
"max": 9000,
"step": 1000,
"label": "Autoplay Speed",
"unit": "ms",
"default": 7000
},
{
"type": "header",
"content": "Snow Fall"
},
{
"type": "checkbox",
"id": "snow_enable",
"label": "Snow Fall Enable",
"default": false,
"info": "It's basically for the Christmas version"
}
],
"blocks":[
{
"type": "slide",
"name": "Slide",
"limit": 5,
"settings": [
{
"type": "image_picker",
"id": "slide_image",
"label": "Image",
"info": "Recommended Size: 1920 x 670px"
},
{
"type": "image_picker",
"id": "slide_image_mobile",
"label": "Image (Mobile)",
"info": "If you want to show a separate slide image on mobile, add an image. Recommended Size: 360 x 350px"
},
{
"type": "header",
"content": "Content"
},
{
"type": "textarea",
"id": "slide_title",
"label": "Title",
"default": "Slide Title",
"info": "Use '' tag for line break"
},
{
"type": "textarea",
"id": "slide_content",
"label": "Content",
"default": "Slide content here"
},
{
"type": "text",
"id": "slide_button_title",
"label": "Button Title",
"default": "Read More"
},
{
"type": "url",
"id": "slide_button_url",
"label": "URL"
},
{
"type": "checkbox",
"id": "image_link_enable",
"label": "Image Link Enable",
"default": false,
"info": "Enable this field if you want to link slide image"
},
{
"type": "radio",
"id": "slide_content_position",
"label": "Content Position",
"options":[
{
"label": "Left",
"value": "content_left"
},
{
"label": "Right",
"value": "content_right"
},
{
"label": "Center",
"value": "content_center"
}
],
"default": "content_left"
},
{
"type": "select",
"id": "slide_animation",
"label": "Animation",
"options":[
{
"label": "Animation 1",
"value": "animation_1"
},
{
"label": "Animation 2",
"value": "animation_2"
},
{
"label": "Animation 3",
"value": "animation_3"
},
{
"label": "Animation 4",
"value": "animation_4"
}
],
"default": "animation_1"
},
{
"type": "header",
"content": "Color"
},
{
"type": "checkbox",
"id": "block_color_enable",
"label": "Color Enable",
"default": false,
"info": "Enable the field for color customization"
},
{
"type": "color",
"id": "title_color",
"label": "Title Color",
"default": "#222"
},
{
"type": "color",
"id": "sub_title_color",
"label": "Sub Title Color",
"default": "#555"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button text Color",
"default": "#fff"
},
{
"type": "color",
"id": "button_bg_color",
"label": "Button BG Color",
"default": "#c29958"
},
{
"type": "color",
"id": "button_text_hover_color",
"label": "Button text Hover Color",
"default": "#fff"
},
{
"type": "color",
"id": "button_bg_hover_color",
"label": "Button BG Hover Color",
"default": "#222222"
}
]
},
{
"type": "section_padding",
"name": "Section Padding",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Large/Desktop Device"
},
{
"type": "range",
"id": "section_padding_top",
"min": 0,
"max": 150,
"step": 5,
"label": "Padding Top",
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "section_padding_bottom",
"min": 0,
"max": 150,
"step": 5,
"label": "Padding Bottom",
"unit": "px",
"default": 80
},
{
"type": "header",
"content": "Tablet Device"
},
{
"type": "range",
"id": "section_padding_top_md",
"min": 0,
"max": 150,
"step": 5,
"label": "Padding Top",
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "section_padding_bottom_md",
"min": 0,
"max": 150,
"step": 5,
"label": "Padding Bottom",
"unit": "px",
"default": 80
},
{
"type": "header",
"content": "Mobile Device"
},
{
"type": "range",
"id": "section_padding_top_xs",
"min": 0,
"max": 150,
"step": 5,
"label": "Padding Top",
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "section_padding_bottom_xs",
"min": 0,
"max": 150,
"step": 5,
"label": "Padding Bottom",
"unit": "px",
"default": 60
}
]
},
{
"type": "section_margin",
"name": "Section Margin",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Large/Desktop Device"
},
{
"type": "range",
"id": "section_margin_top",
"min": 0,
"max": 150,
"step": 5,
"label": "Margin Top",
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "section_margin_bottom",
"min": 0,
"max": 150,
"step": 5,
"label": "Margin Bottom",
"unit": "px",
"default": 0
},
{
"type": "header",
"content": "Tablet Device"
},
{
"type": "range",
"id": "section_margin_top_md",
"min": 0,
"max": 150,
"step": 5,
"label": "Margin Top",
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "section_margin_bottom_md",
"min": 0,
"max": 150,
"step": 5,
"label": "Margin Bottom",
"unit": "px",
"default": 0
},
{
"type": "header",
"content": "Mobile Device"
},
{
"type": "range",
"id": "section_margin_top_xs",
"min": 0,
"max": 150,
"step": 5,
"label": "Margin Top",
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "section_margin_bottom_xs",
"min": 0,
"max": 150,
"step": 5,
"label": "Margin Bottom",
"unit": "px",
"default": 0
}
]
}
],
"presets": [
{
"name": "Slideshow",
"category": "1. slideshow",
"blocks":[
{
"type": "slide"
},
{
"type": "slide"
},
{
"type": "section_padding"
}
]
}
]
}
{% endschema %}
Dear Zworthkey,
Thanks for the info, may I confirm with you is it at Online>Action>Edit Code>Sections>Add a new section>Create a new section called Section-Slider-liquid and copy and
paste the code. correct. please advise.
Thanks and regards,
Ben
Now You Can use include tag allows you to include the content from another file stored in the _includes folder , here you can render your file for output
And see this Link for better understanding.
Dear Zworthkey,
I am sorry I have no coding background can you guide and help me with the step by step process to copy and paste the code accordingly.
Please advise.
Thanks and regards,
Ben
if you have no coding skill then use shopify apps to create slider.
