@KetanKumar @made4Uo @LitCommerce
Not sure if you guys can help out here. Would appreciate the help!
You need to hire a developer or need a developer which will help you to add this features,
or you can learn the liquid shopify to make it by yourself.
Thank you.
sorry for that issue can you please share your store url
Heya @KetanKumar sure thing here you go:
https://ripcurlmy.myshopify.com/admin
yes you can add 2 time second one desktop and one mobile also are able to shopify code?
Hi @KetanKumar yes I can code basic function, just trying to figure out where the codes should go to. Appreciate your help on this part
can you please share your code so i will check and update your mobile and desktop upload option code
Hi @KetanKumar ok sure, just confirming that it should Slideshow.liquid?
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
- {% unless section.settings.slideshow == 'background' %}
{% if block.settings.image != blank %}
{% assign image_box_ratio = block.settings.image.height | append: ".0" | times: 1 | divided_by: block.settings.image.width | times: 100 | append: "%" %}
{% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
{% if block.settings.link != blank %}{% endif %}
{% if block.settings.link != blank %}{% endif %}
{% endif %}
{% endunless %}
{% if block.settings.image == blank %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{%- assign placeholder = 'lifestyle-' | append: current -%}
{{ placeholder | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.title != 'blank' %}
##
{{ block.settings.title }}
{% endif %}
{% if block.settings.subheading != 'blank' %}
{{ block.settings.subheading }}
{% endif %}
{% if block.settings.link != blank %}
{{ block.settings.button_text }}
{% endif %}
{% if block.settings.link_2 != blank %}
{{ block.settings.button_text_2 }}
{% endif %}
{% endfor %}
{% endif %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
{% schema %}
{
"name": "Slideshow",
"max_blocks": 5,
"blocks": [
{
"type": "image",
"name": "Image slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "header",
"content": "Caption Settings"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Add a title to your image"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Tell your brand's story through images"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "For button 1 and the entire image if no buttons chosen."
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Add a button",
"info": "Visible only if a link is chosen"
},
{
"type": "url",
"id": "link_2",
"label": "Button 2 link "
},
{
"type": "text",
"id": "button_text_2",
"label": "Button 2 text",
"default": "Add a 2nd button",
"info": "Visible only if a link is chosen"
},
{
"type": "header",
"content": "Caption colors"
},
{
"type": "color",
"id": "slide_text_color",
"label": "Heading and subheading",
"default": "#000000"
},
{
"type": "color",
"id": "cta_color",
"label": "Button text",
"default": "#ffffff"
},
{
"type": "color",
"id": "cta_background",
"label": "Button background",
"default": "#000000"
},
{
"type": "select",
"id": "caption_alignment",
"label": "Caption text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "color",
"id": "caption_background",
"label": "Caption background color",
"default": "transparent"
},
{
"type": "range",
"id": "caption_background_opacity",
"min": 10,
"max": 100,
"step": 10,
"unit": "%",
"label": "Caption background opacity",
"default": 20
},
{
"type": "header",
"content": "Caption layout"
},
{
"type": "range",
"id": "caption_position_top",
"min": 0,
"max": 100,
"step": 5,
"unit": "%",
"label": "Position from top",
"default": 50
},
{
"type": "range",
"id": "caption_position_left",
"min": 0,
"max": 100,
"step": 5,
"unit": "%",
"label": "Position from left",
"default": 50
}
]
}
],
"settings": [
{
"type": "checkbox",
"id": "full-width",
"label": "Enable full width"
},
{
"type": "select",
"id": "slideshow",
"label": "Slideshow style",
"options": [
{
"value": "content",
"label": "Content"
},
{
"value": "background",
"label": "Background"
},
{
"value": "none",
"label": "None"
}
],
"info": "Content Slideshow features linked images and resizes with the browser width. Background slideshows will show at 100% of the browser height, some left-right image cropping is to be expected."
},
{
"type": "header",
"content": "Slideshow text"
},
{
"type": "range",
"id": "slide-title-size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "range",
"id": "caption_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Subheading size",
"default": 14
},
{
"type": "range",
"id": "cta_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Button text size",
"default": 14
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "checkbox",
"id": "use_mobile_height",
"label": "Use fixed slide height on mobile",
"info": "This will improve slide experience, but may crop the width of the images.",
"default": false
}
],
"presets": [
{
"name": "Slideshow",
"category": "Image",
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
Hi @KetanKumar checking if it should be Slideshow.liquid?
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
- {% unless section.settings.slideshow == 'background' %}
{% if block.settings.image != blank %}
{% assign image_box_ratio = block.settings.image.height | append: ".0" | times: 1 | divided_by: block.settings.image.width | times: 100 | append: "%" %}
{% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
{% if block.settings.link != blank %}{% endif %}
{% if block.settings.link != blank %}{% endif %}
{% endif %}
{% endunless %}
{% if block.settings.image == blank %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{%- assign placeholder = 'lifestyle-' | append: current -%}
{{ placeholder | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.title != 'blank' %}
##
{{ block.settings.title }}
{% endif %}
{% if block.settings.subheading != 'blank' %}
{{ block.settings.subheading }}
{% endif %}
{% if block.settings.link != blank %}
{{ block.settings.button_text }}
{% endif %}
{% if block.settings.link_2 != blank %}
{{ block.settings.button_text_2 }}
{% endif %}
{% endfor %}
{% endif %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
{% schema %}
{
"name": "Slideshow",
"max_blocks": 5,
"blocks": [
{
"type": "image",
"name": "Image slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "header",
"content": "Caption Settings"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Add a title to your image"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Tell your brand's story through images"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "For button 1 and the entire image if no buttons chosen."
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Add a button",
"info": "Visible only if a link is chosen"
},
{
"type": "url",
"id": "link_2",
"label": "Button 2 link "
},
{
"type": "text",
"id": "button_text_2",
"label": "Button 2 text",
"default": "Add a 2nd button",
"info": "Visible only if a link is chosen"
},
{
"type": "header",
"content": "Caption colors"
},
{
"type": "color",
"id": "slide_text_color",
"label": "Heading and subheading",
"default": "#000000"
},
{
"type": "color",
"id": "cta_color",
"label": "Button text",
"default": "#ffffff"
},
{
"type": "color",
"id": "cta_background",
"label": "Button background",
"default": "#000000"
},
{
"type": "select",
"id": "caption_alignment",
"label": "Caption text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "color",
"id": "caption_background",
"label": "Caption background color",
"default": "transparent"
},
{
"type": "range",
"id": "caption_background_opacity",
"min": 10,
"max": 100,
"step": 10,
"unit": "%",
"label": "Caption background opacity",
"default": 20
},
{
"type": "header",
"content": "Caption layout"
},
{
"type": "range",
"id": "caption_position_top",
"min": 0,
"max": 100,
"step": 5,
"unit": "%",
"label": "Position from top",
"default": 50
},
{
"type": "range",
"id": "caption_position_left",
"min": 0,
"max": 100,
"step": 5,
"unit": "%",
"label": "Position from left",
"default": 50
}
]
}
],
"settings": [
{
"type": "checkbox",
"id": "full-width",
"label": "Enable full width"
},
{
"type": "select",
"id": "slideshow",
"label": "Slideshow style",
"options": [
{
"value": "content",
"label": "Content"
},
{
"value": "background",
"label": "Background"
},
{
"value": "none",
"label": "None"
}
],
"info": "Content Slideshow features linked images and resizes with the browser width. Background slideshows will show at 100% of the browser height, some left-right image cropping is to be expected."
},
{
"type": "header",
"content": "Slideshow text"
},
{
"type": "range",
"id": "slide-title-size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "range",
"id": "caption_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Subheading size",
"default": 14
},
{
"type": "range",
"id": "cta_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Button text size",
"default": 14
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "checkbox",
"id": "use_mobile_height",
"label": "Use fixed slide height on mobile",
"info": "This will improve slide experience, but may crop the width of the images.",
"default": false
}
],
"presets": [
{
"name": "Slideshow",
"category": "Image",
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
Hi @KetanKumar , can you help to check if the code provided above is the right section to edit?