Hello,
All I want is to put two photos next to each other with two solid looking buttons. the red and blue squares would have different images and buttons. should have the same style as this photo. Thank you!!!
2 Likes
Hi @ike23 ,
Please send me the code slideshow.liquid file, I will help you add options for it.
1 Like
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
1 Like
#shopify-section-{{ section.id }} {
--progress-bar-color: {{ section.blocks.first.settings.text_color.red }}, {{ section.blocks.first.settings.text_color.green }}, {{ section.blocks.first.settings.text_color.blue }};
--section-autoplay-duration: {% if section.settings.autoplay %}{{ section.settings.cycle_speed }}s{% else %}0s{% endif %};
--section-animation-play-state: paused;
background-color: {{ section.settings.background }}; /* Allows to set a placeholder color while loading */
}
{%- for block in section.blocks -%}
{%- assign text_position = block.settings.text_position | split: '_' | first -%}
{%- case text_position -%}
{%- when 'top' -%}
{%- assign section_items_alignment = 'flex-start' -%}
{%- when 'middle' -%}
{%- assign section_items_alignment = 'center' -%}
{%- when 'bottom' -%}
{%- assign section_items_alignment = 'flex-end' -%}
{%- endcase -%}
#block-{{ section.id }}-{{ block.id }} {
--heading-color: {{ block.settings.text_color.red }}, {{ block.settings.text_color.green }}, {{ block.settings.text_color.blue }};
--text-color: {{ block.settings.text_color.red }}, {{ block.settings.text_color.green }}, {{ block.settings.text_color.blue }};
--primary-button-background: {{ block.settings.button_background.red }}, {{ block.settings.button_background.green }}, {{ block.settings.button_background.blue }};
--primary-button-text-color: {{ block.settings.button_text_color.red }}, {{ block.settings.button_text_color.green }}, {{ block.settings.button_text_color.blue }};
--section-blocks-alignment: {{ section_items_alignment }};
--section-blocks-overlay-color: {{ block.settings.overlay_color.red }}, {{ block.settings.overlay_color.green }}, {{ block.settings.overlay_color.blue }};
--section-blocks-overlay-opacity: {{ block.settings.overlay_opacity | divided_by: 100.0 }};
}
{%- endfor -%}
{%- for block in section.blocks -%}
{%- comment -%}
------------------------------------------------------------------------------------------------------------------
IMAGE PART
------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- elsif buttons != blank -%}
{%- assign image = block.settings.image -%}
{%- assign split_image = block.settings.split_image -%}
{%- assign mobile_image = block.settings.mobile_image -%}
{%- assign image_aspect_ratio = image.aspect_ratio | default: 2.63 -%}
{%- comment -%}
If the image is split and that we want to preserve the ratio, we have to multiply the ratio by 2 (as each image
only account for half the screen size)
{%- endcomment -%}
{%- if image != blank and split_image != blank and section.settings.section_height == ‘auto’ -%}
{%- assign image_aspect_ratio = image_aspect_ratio | times: 2.0 -%}
{%- endif -%}
{%- if forloop.index > 2 -%}
{%- assign loading_attribute_value = ‘lazy’ -%}
{%- assign preload_image = false -%}
{%- else -%}
{%- assign loading_attribute_value = ‘eager’ -%}
{%- assign preload_image = true -%}
{%- endif -%}
{%- capture slide_content -%}
{%- if image != blank -%}
{%- capture sizes_attributes -%}{% if split_image != blank %}(min-width: 1000px) 50vw{% else %}100vw{% endif %}{%- endcapture -%}
{{- image | image_url: width: 3000 | image_tag: loading: loading_attribute_value, draggable: false, class: 'slideshow__image', sizes: sizes_attributes, widths: '600,700,800,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000', preload: preload_image -}}
{%- else -%}
{% capture image_name %}lifestyle-{% cycle '1', '2' %}{%- endcapture -%}
{{- image_name | placeholder_svg_tag: 'slideshow__image slideshow__image--placeholder' -}}
{%- endif -%}
{%- comment -%}If a second image (split image) is uploaded, we use it. Note that we use the same ratio as the first image (to have equal column height){% endcomment %}
{%- if image != blank and split_image != blank -%}
{{- split_image | image_url: width: 3000 | image_tag: loading: loading_attribute_value, draggable: false, class: 'slideshow__image', sizes: '50vw', widths: '600,700,800,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000', preload: preload_image -}}
{%- endif -%}
{%- if mobile_image != blank -%}
{{- mobile_image | image_url: width: 3000 | image_tag: loading: loading_attribute_value, draggable: false, class: 'slideshow__image', sizes: '100vw', widths: '600,700,800,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000', preload: preload_image -}}
{%- endif -%}
{%- comment -%}
CONTENT PART
{%- endcomment -%}
{%- capture section_content -%}
{%- if block.settings.title != blank -%}
{{ block.settings.title | escape }}
{%- endif -%}{%- if block.settings.subheading != blank -%}
{{ block.settings.subheading | escape }}
{%- endif -%}{%- capture buttons -%}
{%- if block.settings.button_1_text != blank -%}
{{ block.settings.button_1_text | escape }}
{%- endif -%}
{%- if block.settings.button_2_text != blank -%}
{{ block.settings.button_2_text | escape }}
{%- endif -%}
{%- endcapture -%}
{%- if block.settings.button_1_text != blank and block.settings.button_2_text != blank -%}
{{- buttons -}}
{{- buttons -}}
{%- endif -%}
{%- endcapture -%}
{%- if section_content != blank -%}
{%- assign text_alignment = block.settings.text_position | split: '_' | first -%}
{%- assign text_position = block.settings.text_position | split: '_' | last -%}
{%- endif -%}
{%- endcapture -%}
{{- section_content -}}
{%- comment -%}If only the button 1 link is filled, then we make the whole slide clickable{%- endcomment -%}
{%- capture slide_attributes -%}
{{ block.shopify_attributes }}
id=“block-{{ section.id }}-{{ block.id }}”
class=“slideshow__slide {% if split_image != blank %}slideshow__slide–split{% endif %} {% if section.settings.transition_type == ‘sweep’ %}slideshow__slide–sweep{% endif %}”
{% unless forloop.first %}hidden{% endunless %}
{% if section.settings.section_height == ‘auto’ %}
style=“–image-aspect-ratio: {{ image_aspect_ratio }}; --mobile-image-aspect-ratio: {{ mobile_image.aspect_ratio | default: image_aspect_ratio | default: 1 }};”
{% endif %}
{%- endcapture -%}
<slide-show-item {% if section.settings.transition_type != ‘reveal’ %}reveal-visibility{% endif %} {{ slide_attributes }}>
{%- if block.settings.button_1_link != blank and block.settings.button_1_text == blank and block.settings.button_2_text == blank -%}
{{- slide_content -}}
{%- else -%}
{{- slide_content -}}
{%- endif -%}
{%- endfor -%}
{%- if section.blocks.size > 1 -%}
<page-dots {% if section.settings.autoplay %}animation-timer{% endif %} class=“slideshow__nav container”>
{%- for block in section.blocks -%}
<button class=“slideshow__progress-bar” aria-controls=“block-{{ section.id }}-{{ block.id }}” {% if forloop.first %}aria-current=“true”{% endif%}>
{{ ‘general.accessibility.go_to_slide’ | t: num: forloop.index }}
{%- endfor -%}
{%- endif -%}
{% schema %}
{
“name”: “Slideshow”,
“class”: “shopify-section–slideshow”,
“max_blocks”: 5,
“settings”: [
{
“type”: “select”,
“id”: “section_height”,
“label”: “Section height”,
“options”: [
{
“value”: “auto”,
“label”: “Original image ratio”
},
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
},
{
“value”: “fit”,
“label”: “Fit screen height”
}
],
“info”: “Choose "Original image ratio" to not cut images. Learn more”,
“default”: “auto”
},
{
“type”: “select”,
“id”: “transition_type”,
“label”: “Transition type”,
“options”: [
{
“value”: “sweep”,
“label”: “Sweep”
},
{
“value”: “reveal”,
“label”: “Reveal”
},
{
“value”: “fade”,
“label”: “Fade”
}
],
“default”: “sweep”
},
{
“type”: “checkbox”,
“id”: “autoplay”,
“label”: “Auto rotate between slides”,
“default”: true
},
{
“type”: “range”,
“id”: “cycle_speed”,
“min”: 4,
“max”: 20,
“step”: 1,
“unit”: “sec”,
“label”: “Change slides every”,
“default”: 5
},
{
“type”: “color”,
“id”: “background”,
“label”: “Background”,
“info”: “Used while slideshow image is loading”,
“default”: “rgba(0,0,0,0)”
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Image”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“info”: “2160 x 1080px .jpg recommended, 1080 x 1080px .jpg recommended if split”,
“label”: “Image”
},
{
“type”: “image_picker”,
“id”: “split_image”,
“info”: “1080 x 1080px .jpg recommended. Won’t show up on mobile.”,
“label”: “Split image”
},
{
“type”: “image_picker”,
“id”: “mobile_image”,
“label”: “Mobile image”,
“info”: “1000 x 1400px .jpg recommended. If none is set, desktop image will be used.”
},
{
“type”: “header”,
“content”: “Content”
},
{
“type”: “select”,
“id”: “text_position”,
“label”: “Text position”,
“options”: [
{
“value”: “top_left”,
“label”: “Top left”
},
{
“value”: “top_center”,
“label”: “Top center”
},
{
“value”: “top_right”,
“label”: “Top right”
},
{
“value”: “middle_left”,
“label”: “Middle left”
},
{
“value”: “middle_center”,
“label”: “Middle center”
},
{
“value”: “middle_right”,
“label”: “Middle right”
},
{
“value”: “bottom_left”,
“label”: “Bottom left”
},
{
“value”: “bottom_center”,
“label”: “Bottom center”
},
{
“value”: “bottom_right”,
“label”: “Bottom right”
}
],
“default”: “middle_center”
},
{
“type”: “text”,
“id”: “subheading”,
“label”: “Subheading”,
“default”: “Tell your story”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Slide title”
},
{
“type”: “text”,
“id”: “button_1_text”,
“label”: “Button 1 text”
},
{
“type”: “url”,
“id”: “button_1_link”,
“label”: “Button 1 link”,
“info”: “Leave the "Button 1 text" and "Button 2" settings empty to make the slide fully clickable.”
},
{
“type”: “text”,
“id”: “button_2_text”,
“label”: “Button 2 text”
},
{
“type”: “url”,
“id”: “button_2_link”,
“label”: “Button 2 link”
},
{
“type”: “header”,
“content”: “Colors”
},
{
“type”: “color”,
“id”: “text_color”,
“label”: “Text”,
“default”: “#ffffff”
},
{
“type”: “color”,
“id”: “button_background”,
“label”: “Button background”,
“default”: “#ffffff”
},
{
“type”: “color”,
“id”: “button_text_color”,
“label”: “Button text”,
“default”: “#000000”
},
{
“type”: “color”,
“id”: “overlay_color”,
“label”: “Overlay”,
“default”: “#000000”
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“label”: “Overlay opacity”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“default”: 30
}
]
}
],
“presets”: [
{
“name”: “Slideshow”,
“blocks”: [
{
“type”: “image”,
“settings”: {
“title”: “Slide 1”
}
},
{
“type”: “image”,
“settings”: {
“title”: “Slide 2”
}
}
]
}
]
}
{% endschema %}
1 Like
I think I just sent it/ Let me know if that is the correct code?
Hi @ike23 ,
I still haven’t received it, can you check it again?
I just sent the google doc link to teh liquid code
This is teh google doc-
https://docs.google.com/document/d/100QMU3Q4srZh4uGhkQL0nCWrwxAt052-xk-VRhwGEA8/edit
1 Like
oh sorry for that issue but can you please check other section its allow side by side image your theme just ck it
Could you clarify? I am a little confused
Hi @ike23 ,
I checked and you have ‘Split image’ option, just you need to upload an image for it, and it will include 2 images in the slideshow
When i put an image in to the split section it doesn’t change though.
is this do-able for someone like me-with no understanding of code? I have no idea what all that means? do you just copy and paste it in? or I am guessing it needs a lot more understanding than that? I am gonna trot off and see if there are any YouTube video’s on how to do it. But if you can lend any further instruction, I would appreciate it massively. thank you