How can I make this button setting to open new tab?

Store Design
1

Hello, I’m using Canopy theme and struggle about making this slidshow 's button to open at new tab.

I want to keep original top page at the window and want to open the link page at new tab. My site top page url is aaworms.com

I investigated slidesshow.liquid at the file…looks like the button setting shows block and when I changes it to “blank”…it is not working. Just shows no text button and no link…Can somebody make sure it?

{%- style -%}
{%- for block in section.blocks -%}
{%- unless block.settings.tint_color contains ‘,0’ -%}
.section-id-{{ section.id }} .slide–{{ forloop.index }}::after {
background-color: {{ block.settings.tint_color }};
opacity: {{ block.settings.tint_opacity | divided_by: 100.00 }};
}
{%- endunless -%}
{%- endfor -%}
{%- endstyle -%}

{% for block in section.blocks %}

{% if block.settings.link_url != blank %}{% endif %}

{% if block.settings.image == blank %}

{% capture current %}{% cycle 1, 2 %}{% endcapture %} {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{% elsif block.settings.mobile_image == blank %} {% render 'responsive-image', image: block.settings.image, manual: true, no_max_width: true %} {% else %}
{% render 'responsive-image', image: block.settings.image, manual: true, no_max_width: true %}
{% render 'responsive-image', image: block.settings.mobile_image, manual: true, no_max_width: true %}
{% endif %}

{% if block.settings.link_url != blank %}{% endif %}

{% if block.settings.heading != blank or block.settings.text != blank or block.settings.button_text != blank %}

{% if block.settings.heading != blank %}
{{ block.settings.heading | escape }}
{% endif %} {% if block.settings.text != blank %}
{{ block.settings.text | escape }}
{% endif %} {% if block.settings.button_text != blank %} {% endif %}
{% endif %}
{% endfor %}

{% schema %}
{
“name”: “Slideshow”,
“class”: “homepage-section”,
“max_blocks”: 8,
“settings”: [
],
“blocks”: [
{
“type”: “image”,
“name”: “Slide”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Primary image”,
“info”: “1400 x 600px recommended”
},
{
“type”: “image_picker”,
“id”: “mobile_image”,
“label”: “Mobile image”
},
{
“type”: “color”,
“id”: “tint_color”,
“label”: “Tint”,
“default”: “#3d4246”
},
{
“type”: “range”,
“id”: “tint_opacity”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“label”: “Tint strength”,
“default”: 25
},
{
“type”: “header”,
“content”: “Overlay”
},
{
“type”: “paragraph”,
“content”: “Without a mobile image, overlay text will show underneath the image on mobile screens.”
},
{
“type”: “select”,
“id”: “position”,
“label”: “Position”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “centre”,
“label”: “Center”
},
{
“value”: “right”,
“label”: “Right”
}
],
“default”: “centre”
},
{
“type”: “text”,
“id”: “heading”,
“label”: “Heading”,
“default”: “Slideshow”
},
{
“type”: “text”,
“id”: “text”,
“label”: “Subheading”,
“default”: “Tell your story with images”
},
{
“type”: “color”,
“id”: “text_colour”,
“label”: “Text color”,
“default”: “#ffffff”
},
{
“type”: “text”,
“id”: “button_text”,
“label”: “Button text”,
“default”: “See more”
},
{
“type”: “url”,
“id”: “link_url”,
“label”: “Slide link”
}
]
}
],
“presets”: [
{
“name”: “Slideshow”,
“category”: “Image”,
“settings”: {
},
“blocks”: [
{
“type”: “image”
},
{
“type”: “image”
}
]
}
]
}
{% endschema %}

question1.jpg
question1.jpg1200×545 60.9 KB

1 Like
2

@kana-rin-lynn

can you try this code

{%- style -%}
{%- for block in section.blocks -%}
{%- unless block.settings.tint_color contains ',0' -%}
.section-id-{{ section.id }} .slide--{{ forloop.index }}::after {
background-color: {{ block.settings.tint_color }};
opacity: {{ block.settings.tint_opacity | divided_by: 100.00 }};
}
{%- endunless -%}
{%- endfor -%}
{%- endstyle -%}

{% schema %}
{
"name": "Slideshow",
"class": "homepage-section",
"max_blocks": 8,
"settings": [
],
"blocks": [
{
"type": "image",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Primary image",
"info": "1400 x 600px recommended"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile image"
},
{
"type": "color",
"id": "tint_color",
"label": "Tint",
"default": "#3d4246"
},
{
"type": "range",
"id": "tint_opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Tint strength",
"default": 25
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "paragraph",
"content": "Without a mobile image, overlay text will show underneath the image on mobile screens."
},
{
"type": "select",
"id": "position",
"label": "Position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "centre",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "centre"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Slideshow"
},
{
"type": "text",
"id": "text",
"label": "Subheading",
"default": "Tell your story with images"
},
{
"type": "color",
"id": "text_colour",
"label": "Text color",
"default": "#ffffff"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "See more"
},
{
"type": "url",
"id": "link_url",
"label": "Slide link"
}
]
}
],
"presets": [
{
"name": "Slideshow",
"category": "Image",
"settings": {
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
1 Like
3

Thank you,thank you so much!!! It was worked!!!perfect!!!