Palo Alto - Can I make my video banner's CTA button open as a new tab?

Solved
Highlighted
Tourist
29 0 4

Hi,

Here's a screenshot of the video banner on my home page:

Screenshot 2020-09-17 at 1.51.13 PM.png

Currently, when you click on the 'Watch Now' button, it redirects straight to the link.

I would like the 'Watch Now' button to open to a new tab instead.

 

Here's my URL: https://coldpressrecords.com/

PW: flerel

 

Thanks!

0 Likes
Highlighted
Shopify Expert
3666 550 885

Hi

For that you have to change in slider section. may be you can find it in section->slideshow file

Add target="_blank" to <a> tag to  open in new tab 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
29 0 4

@Jasoliya 

Could you advise where I need to place this additional code? Thank you.

Here's my slideshow.liquid code:

<!-- /sections/slideshow.liquid -->

{%- assign transition = section.settings.transition -%}
{%- assign autoplay = section.settings.autoplay -%}
{%- assign duration = section.settings.duration | times: 1000 -%}
{%- assign content_alignment = section.settings.content_alignment -%}
{%- assign slide_height = section.settings.slide_height -%}
{%- assign slides_count = section.blocks.size -%}

<div data-section-id="{{ section.id }}"
	data-section-type="slider"
	data-slides-count="{{ section.blocks.size }}"
	data-autoplay="{{ autoplay }}"
	data-duration="{{ duration }}"
	data-image-height="{{ slide_height }}"
	data-page-dots="{{ section.settings.show_nav_dots }}"
	data-nav-arrows="{{ section.settings.show_nav_arrows }}"
	data-transition="{{ transition }}"
	data-slides="{{ slides_count }}">

	<div class="slider slider--{{ transition }} {% if section.settings.show_arrow_down %}slider--has-arrow{% endif %} slider--{{ content_alignment }}">
		{%- if section.blocks.size > 0 -%}
			{%- if section.settings.show_nav_arrows and section.blocks.size > 1 -%}
				<button class="slider__arrow slider__arrow--previous"><span class="custom-icon-arrow-right" aria-hidden="true"></span></button>
				<button class="slider__arrow slider__arrow--next"><span class="custom-icon-arrow-right" aria-hidden="true"></span></button>
			{%- endif -%}

			<div class="slide-block">
				<div class="flickity">
					{%- for block in section.blocks -%}

						{%- assign overlayOpacity = block.settings.overlay_opacity | times: 0.01 -%}

						{%- if block.settings.slide_btn_link != blank -%}
							{%- assign btn_link =  block.settings.slide_btn_link  -%}
						{%- else -%}
							{%- assign btn_link = "#" -%}
						{%- endif -%}

						{%- if block.settings.slide_btn_link_2 != blank -%}
							{%- assign btn_link_2 =  block.settings.slide_btn_link_2  -%}
						{%- else -%}
							{%- assign btn_link_2 = "#" -%}
						{%- endif -%}

						<div class="item item--{{ block.id }} item--{{ block.settings.text_color }} {{ slide_height }} initial-slide js-section-container" {{ block.shopify_attributes }} data-slide-position="{{ forloop.index }}" data-style="{{ block.settings.text_color }}">
							{%- if block.settings.slide_btn_text != blank or block.settings.slide_btn_text_2 != blank -%}
							{%- endif -%}

						 	<div class="overlay" style="opacity:{{ overlayOpacity }};"></div>

							{%- if slide_height == 'original-height' -%}

								{% comment %} Mobile image {% endcomment %}
								{%- unless block.settings.image_mobile == blank -%}
									{%- assign image = block.settings.image_mobile -%}
									{%- assign image_url_pattern = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
									{%- assign image_widths = "[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]" -%}

									<div class="slide-image__container slide-image__container--mobile" style="padding-top: {{ 100 | divided_by: image.aspect_ratio | append: '%' }}">
										<img
											 class="{% if forloop.index == 1 %} lazyload{% else %} will-lazyload{% endif %}"
											 data-src="{{ image_url_pattern }}"
											 data-widths= "{{ image_widths }}"
											 data-aspectratio="{{image.aspect_ratio }}"
											 data-sizes="auto"
											 alt="{{ image.alt | escape }}">
										<noscript>
											<img src="{{ image | img_url: '2048x' }}" alt="{{ image.alt | escape }}">
										</noscript>
									</div>
								{%- endunless -%}

								{% comment %} Desktop image {% endcomment %}
								{%- unless block.settings.image == blank -%}
									{%- assign image = block.settings.image -%}
									{%- assign image_url_pattern = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
									{%- assign image_widths = "[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]" -%}

									<div class="slide-image__container slide-image__container--desktop" style="padding-top: {{ 100 | divided_by: image.aspect_ratio | append: '%' }}">
										<img
											 class="{% if forloop.index == 1 %} lazyload{% else %} will-lazyload{% endif %}"
											 data-src="{{ image_url_pattern }}"
											 data-widths= "{{ image_widths }}"
											 data-aspectratio="{{image.aspect_ratio }}"
											 data-sizes="auto"
											 alt="{{ image.alt | escape }}">
										<noscript>
											<img src="{{ image | img_url: '2048x' }}" alt="{{ image.alt | escape }}">
										</noscript>
									</div>
								{%- else -%}
									<div class="slide-image__container slide-image__container--desktop slide-image__container--placeholder">
										{{- 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg-filled' -}}
									</div>
								{%- endunless -%}
							{%- else -%}
								{% comment %} Mobile image {% endcomment %}
								{%- unless block.settings.image_mobile == blank -%}
									<div class="slide--{{ block.id }} {{ block.settings.bg_position }} slide-background image-mobile{% if forloop.index == 1 %} lazyload{% else %} will-lazyload{% endif %}"
										data-bgset="{% render 'bgset', image: block.settings.image_mobile %}"
										data-sizes="auto"
										data-parent-fit="cover">
									</div>
									<noscript>
										<div class="slide--{{ block.id }} slide-background image-mobile" style="background-image: url({{ block.settings.image | img_url: '2048x' }});"></div>
									</noscript>
								{%- endunless -%}

								{% comment %} Desktop image {% endcomment %}
								{%- unless block.settings.image == blank -%}
									<div class="slide--{{ block.id }} {{ block.settings.bg_position }} slide-background image-desktop{% if forloop.index == 1 %} lazyload{% else %} will-lazyload{% endif %}"
										data-bgset="{% render 'bgset', image: block.settings.image %}"
										data-sizes="auto"
										data-parent-fit="cover">
									</div>
									<noscript>
										<div class="slide--{{ block.id }} slide-background image-desktop" style="background-image: url({{ block.settings.image | img_url: '2048x' }});"></div>
									</noscript>
								{%- else -%}
									<div class="slide-background slide-background--desktop slide-background--placeholder">
										{{- 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg-filled' -}}
									</div>
								{%- endunless -%}
							{%- endif -%}

							<div class="slider-text-block js-section-content">
								<div class="slider-text-block__wrapper">
									<div class="wrapper wrapper--small">
										{%- if block.settings.slide_heading != blank -%}
											<h1 class="slide__heading main-heading size--{{ block.settings.heading_font_size }}">{{ block.settings.slide_heading | escape }}</h1>
										{%- endif -%}
										{%- if block.settings.slide_subheading != blank -%}
											<h2 class="slide__caption main-subheading size--{{ block.settings.text_font_size }}">{{ block.settings.slide_subheading | escape | newline_to_br }}</h2>
										{%- endif -%}

										<div class="slider-cta">
											{%- if block.settings.slide_btn_text != blank -%}
												<a class="btn call-to-action slider-btn btn--{{ block.settings.slide_btn_style }}" href="{{ btn_link }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %}>{{ block.settings.slide_btn_text | escape }}</a>
											{%- endif -%}
											{%- if block.settings.slide_btn_text_2 != blank -%}
												<a class="btn call-to-action slider-btn btn--{{ block.settings.slide_btn_style_2 }}" href="{{ btn_link_2 }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %}>{{ block.settings.slide_btn_text_2 | escape }}</a>
											{%- endif -%}
											{%- if block.settings.video_btn_text != blank -%}
												<a class="video-text-link secondary-call-to-action" href="{{ block.settings.video_btn_link }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %} data-play-button>
													<i class="custom-icon-play-button call-to-action-circle"></i>
													<span>{{ block.settings.video_btn_text }}</span>
												</a>
											{%- endif -%}
										</div>
									</div>
								</div>
							</div>
						</div>
					{%- endfor -%}
				</div>
			</div>
		{%- endif -%}

		{%- if section.settings.show_arrow_down -%}
			<a href="#" class="slider__scroll-down js-scroll-down" title="{{ 'homepage.onboarding.slideshow.scroll_down' | t }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %}>
				{%- render 'icon-arrow-down' -%}
			</a>
		{%- endif -%}
	</div>
</div>

{% schema %}
{
	"name": "Slideshow",
	"max_blocks": 10,
	"class": "slideshow full-header",
	"settings": [
		{
			"type": "header",
			"content": "layout"
		},
		{
			"type": "select",
			"id": "slide_height",
			"label": "Height",
			"default": "one-hundred-height-hero",
			"options": [
				{
					"value": "one-hundred-height-hero",
					"label": "Full screen"
				},
				{
					"value": "original-height",
					"label": "Original"
				},
				{
					"value": "seven-fifty-height-hero",
					"label": "750px"
				},
				{
					"value": "sixty-fifty-height-hero",
					"label": "650px"
				},
				{
					"value": "five-fifty-height-hero ",
					"label": "550px"
				},
				{
					"value": "four-fifty-height-hero",
					"label": "450px"
				}
			]
		},
		{
			"type": "select",
			"id": "content_alignment",
			"label": "Content alignment",
			"default": "center",
			"options": [
				{ "value": "left", "label": "Left" },
				{ "value": "center", "label": "Center" },
				{ "value": "right", "label": "Right" },
				{ "value": "bottom-left", "label": "Bottom left" },
				{ "value": "bottom-right", "label": "Bottom right" }
			]
		},
		{
			"type": "checkbox",
			"id": "show_nav_dots",
			"label": "Show slide navigation dots",
			"default": true
		},
		{
			"type": "checkbox",
			"id": "show_nav_arrows",
			"label": "Show slide navigation arrows",
			"default": true
		},
		{
			"type": "checkbox",
			"id": "show_arrow_down",
			"label": "Show down arrow",
			"default": false
		},
		{
			"type": "header",
			"content": "Autoplay"
		},
		{
			"type": "checkbox",
			"id": "autoplay",
			"label": "Autoplay slideshow",
			"default": false
		},
		{
			"type": "range",
			"id": "duration",
			"min": 2,
			"max": 5,
			"step": 1,
			"unit": "sec",
			"label": "Change slides every",
			"default": 4
		},
		{
			"type": "select",
			"id": "transition",
			"label": "Transition style",
			"default": "slide",
			"options": [
				{ "label": "Slide", "value": "slide" },
				{ "label": "Fade", "value": "fade" },
				{ "label": "Zoom out", "value": "zoom-out" }
			]
		}
	],
	"blocks": [
		{
			"type": "image",
			"name": "Slide",
			"settings": [
			{
				"type": "header",
				"content": "Image"
			},
				{
					"type": "image_picker",
					"id": "image",
					"label": "Image",
					"info": "2048px width recommended"
				},
				{
					"type": "image_picker",
					"id": "image_mobile",
					"label": "Mobile image",
					"info": "Optional"
				},
				{
					"type": "select",
					"id": "bg_position",
					"label": "Position",
					"default": "bg-pos-center-center",
					"options": [
						{ "label": "Top", "value": "bg-pos-top-center" },
						{ "label": "Right", "value": "bg-pos-right-center" },
						{ "label": "Center", "value": "bg-pos-center-center" },
						{ "label": "Left", "value": "bg-pos-left-center" },
						{ "label": "Bottom", "value": "bg-pos-bottom-center" }
					]
				},
				{
					"type": "range",
					"id": "overlay_opacity",
					"label": "Overlay opacity",
					"min": 0,
					"max": 95,
					"step": 5,
					"unit": "%",
					"default": 20
				},
				{
					"type": "header",
					"content": "Text"
				},
				{
					"type": "select",
					"id": "text_color",
					"label": "Color",
					"default": "text-light",
					"options": [
						{
							"value": "text-light",
							"label": "Light"
						},
						{
							"value": "text-dark",
							"label": "Dark"
						}
					]
				},
				{
					"type": "text",
					"id": "slide_heading",
					"label": "Heading",
					"default": "Welcome to Palo Alto"
				},
				{
					"type": "range",
					"id": "heading_font_size",
					"label": "Heading size",
					"unit": "px",
					"step": 4,
					"min": 40,
					"max": 64,
					"default": 48
				},
				{
					"type": "textarea",
					"id": "slide_subheading",
					"label": "Subheading",
					"default": "This subheading helps you provide some more detail to the title above."
				},
				{
					"type": "range",
					"id": "text_font_size",
					"label": "Text size",
					"unit": "px",
					"step": 2,
					"min": 16,
					"max": 28,
					"default": 20
				},
				{
					"type": "header",
					"content": "Buttons"
				},
				{
					"type": "text",
					"id": "slide_btn_text",
					"label": "Button text",
					"default": "Welcome"
				},
				{
					"type": "url",
					"id": "slide_btn_link",
					"label": "Button URL"
				},
				{
					"type": "select",
					"id": "slide_btn_style",
					"label": "Button style",
					"default": "primary",
					"options": [
						{ "label": "Primary", "value": "primary" },
						{ "label": "Secondary", "value": "secondary" }
					]
				},
				{
					"type": "text",
					"id": "slide_btn_text_2",
					"label": "Second button text"
				},
				{
					"type": "url",
					"id": "slide_btn_link_2",
					"label": "Second button URL"
				},
				{
					"type": "select",
					"id": "slide_btn_style_2",
					"label": "Second button style",
					"default": "secondary",
					"options": [
						{ "label": "Primary", "value": "primary" },
						{ "label": "Secondary", "value": "secondary" }
					]
				},
				{
					"type": "text",
					"id": "video_btn_text",
					"label": "Video button text",
					"default": "Watch the Video"
				},
				{
					"type": "video_url",
					"id": "video_btn_link",
					"label": "Video URL",
					"accept": [
						"youtube",
						"vimeo"
					],
					"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc"
				}
			]
		}
	],
	"presets": [
		{
			"name": "Slideshow",
			"category": "Image",
			"blocks": [
				{
					"type": "image"
				},
				{
					"type": "image"
				}
			]
		}
	]
}
{% endschema %}

 

0 Likes
Highlighted
Shopify Expert
3666 550 885

This is an accepted solution.

That not good thing to check and solve problem like that

Try this:

Find "call-to-action" within <a> tag and add this attribute
target="_blank"

so it look like:

<a target="_blank" class="btn call-to-action slider-btn btn--{{ block.settings.slide_btn_style_2 }}" href="{{ btn_link_2 }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %}>{{ block.settings.slide_btn_text_2 | escape }}</a>

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
29 0 4

Thanks for the help @Jasoliya 

Turns out it was the 'video.liquid' section code where I had to add in the extra code.

Works like a gem now!

0 Likes