Palo Alto - Adjusting text spacing on the homepage's slide show

Solved
cliffyfly
Excursionist
29 0 4

Hi,

Here's a screenshot of my Shopify home page:

Screenshot 2020-09-16 at 11.44.31 AM.png

I would like to shift the subhead 'Featured Vinyl' text on top of the heading 'Moirai by Sphaeras'.

I would also like the spacing between the subhead and heading to be the same as the spacing between the heading and 'Shop Now' button.

 

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

PW: flerel

 

Thanks!

KetanKumar
Shopify Partner
17277 1870 6457

@cliffyfly 

Welcome to the Shopify community!
and Thanks for your Good question.

please slider show section code so i will update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cliffyfly
Excursionist
29 0 4

Hi @KetanKumar 

Here you go. Thank you.

<!-- /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
KetanKumar
Shopify Partner
17277 1870 6457

This is an accepted solution.

@cliffyfly 

Thanks for code

i have to find another solution 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.slider-text-block__wrapper .wrapper.wrapper--small {
    display: flex;
    flex-direction: column;

h1.slide__heading.main-heading.size--64 {
    order: 2;
}
.slider-cta {
    order: 3;
}

}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cliffyfly
Excursionist
29 0 4

Hey @KetanKumar 

Thanks so much for the help! It works great.

This is how it looks right now:

Screenshot 2020-09-16 at 4.25.39 PM.png

Is it possible to increase the gap between the heading & CTA button?

0 Likes
KetanKumar
Shopify Partner
17277 1870 6457

@cliffyfly 

it looks much better

KetanKumar_0-1600268781392.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cliffyfly
Excursionist
29 0 4

Thank you for the help @KetanKumar 

Appreciate it alot!

KetanKumar
Shopify Partner
17277 1870 6457

@cliffyfly 

Thanks for update and your support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
greatestlaw
Tourist
13 0 3

Please I need your help with my store's mobile view settings. There's a weird blank space beside all the way down on my mobile view and I don't even know when that happened.

Can you please help with this my website URL is gigiijacot.com

also my slideshows, product tabs, images and all are only displayed properly on the desktop view, the mobile is not properly set up.

I'd appreciate if you can help with this, Thank you Mr Palo.

 

genete.PNG

 

0 Likes
KetanKumar
Shopify Partner
17277 1870 6457

@greatestlaw 

sorry for this issue can you please try this 

1. Go to Online Store->Theme->Edit code
2. Asset->/engo-customize.scss.liquid->paste below code at the bottom of the file.

@media (max-width: 575.98px) {
.section-collection-v1 .box-info.left {
width: 100%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes