Alignment of title on slideslow

[shells]

Hi all, 

I'm trying to adjust the alignment of text/title overlaid on an image on my landing page. I can't identify the code. I want to move all text and 'New Arrivals' button to the left. 

I've pasted the code below. Grateful if anyone can be so kind as to help me out!

Thank you!

<style>

.slideshow-wrapper {
position: relative;
}

.slideshow {
position: unset;
overflow: hidden;
margin-bottom: 0;
height: 100vh;
-webkit-transition: height .6s cubic-bezier(.44,.13,.48,.87);
-o-transition: height .6s cubic-bezier(.44,.13,.48,.87);
transition: height .6s cubic-bezier(.44,.13,.48,.87);
}

@media only screen and (min-width:750px) {
.slideshow {
position: relative;
}
}

.slideshow .slick-list,.slideshow .slick-track,.slideshow .slideshow__slide {
height: 100%;
}

.slideshow .slick-dots {
bottom: 30px;
z-index: 1;
}
@media only screen and (max-width:749px) {
.slideshow .slick-dots {
bottom: 10px;
}
}

.slideshow--small {
height: 175px;
}

@media only screen and (min-width:750px) {
.slideshow--small {
height: 50vh;
}
}

.slideshow--medium {
height: 270px;
}

@media only screen and (min-width:750px) {
.slideshow--medium {
height:70vh;
}
}

.slideshow--large {
height: 375px;
}

@media only screen and (min-width:750px) {
.slideshow--large {
height: 80vh;
}
}

.slideshow__slide {
position: relative;
overflow: hidden;
}

.slideshow__link {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.slideshow__link:active,.slideshow__link:focus {
opacity: 1;
}

@media only screen and (min-width:750px) {
.slideshow__overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: {{section.settings.bg_overlay}};
opacity: .4;
z-index: 2;
}
.gradient_overlay:before{
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
opacity: 1;
}
}

.slideshow__image {
-webkit-transition: opacity .8s cubic-bezier(.44,.13,.48,.87);
-o-transition: opacity .8s cubic-bezier(.44,.13,.48,.87);
transition: opacity .8s cubic-bezier(.44,.13,.48,.87);
position: absolute;
top: 0;
left: 0;
opacity: 0;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-color: transparent;
z-index: 1;
}

.no-js .slideshow__image,.slick-initialized .slideshow__image {
opacity: 1;
}

.slideshow__text-wrap {
height: 100%;
position: relative;
}

.slideshow__link .slideshow__text-wrap {
cursor: inherit;
}

.slideshow__text-wrap--mobile {
display: none;
}

@media only screen and (min-width:750px) {
.slideshow__text-content {
-webkit-transition: .6s cubic-bezier(.44,.13,.48,.87);
-o-transition: .6s cubic-bezier(.44,.13,.48,.87);
transition: .6s cubic-bezier(.44,.13,.48,.87);
-webkit-transition-delay: .3s;
-o-transition-delay: .3s;
transition-delay: .3s;
}
}

.slideshow__text-wrap--desktop .slideshow__text-content {
position: absolute;
width: 100%;
top: 50%;
opacity: 1;
z-index: 2;
padding: 0 50px;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.slideshow__text-wrap--desktop .slideshow__text-content li,.slideshow__text-wrap--desktop .slideshow__text-content .slideshow__btn-wrapper{
overflow: hidden;
}
.slideshow__text-wrap--desktop .slideshow__text-content li .slideshow__toptitle{
font-weight:500;
letter-spacing: 0.3em;
font-size: 16px;
}
.slideshow__text-wrap--desktop .slideshow__text-content li .slideshow__toptitle,.slideshow__text-wrap--desktop .slideshow__text-content li .slideshow__title,.slideshow__text-wrap--desktop .slideshow__text-content li .slideshow__subtitle
,.slideshow__text-wrap--desktop .slideshow__text-content .slideshow__btn{
transform: translateY(100%);
}

@media only screen and (min-width:750px) {
.slideshow__text-content.slideshow__text-content--vertical-top {
top: 120px;
}

.slideshow__text-content.slideshow__text-content--vertical-bottom {
top: auto;
bottom: 40px;
}
}

.no-js .slideshow__text-content,.slick-initialized .slick-active .slideshow__text-content {}
.no-js .slideshow__text-content,.slick-initialized .slick-active .slideshow__text-content li .slideshow__toptitle,.slick-initialized .slick-active .slideshow__text-content li .slideshow__title,
.slick-initialized .slick-active .slideshow__text-content li .slideshow__subtitle,.slick-initialized .slick-active .slideshow__text-content .slideshow__btn{
transform: translateY(0);
transition: transform 0.7s cubic-bezier(.29,.63,.44,1);
transition-delay: .1s;
}
.slick-initialized .slick-active .slideshow__text-content li .slideshow__title{
transition-delay: .3s;
}
.slick-initialized .slick-active .slideshow__text-content li .slideshow__subtitle{
transition-delay: .4s;
}
.slick-initialized .slick-active .slideshow__text-content .slideshow__btn{
transition-delay: .5s;
}
.no-js .slideshow__text-content.slideshow__text-content--vertical-center,.slick-initialized .slick-active .slideshow__text-content.slideshow__text-content--vertical-center {
/* -ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); */
}

.slideshow__text-content::after {
content: '';
content: '';
display: block;
width: 40px;
height: 40px;
position: absolute;
margin-left: -20px;
margin-top: -20px;
border-radius: 50%;
border: 3px solid #fff;
border-top-color: transparent;
-webkit-animation: spin .65s infinite linear;
animation: spin .65s infinite linear;
opacity: 1;
-webkit-transition: all 1s cubic-bezier(.29,.63,.44,1);
-o-transition: all 1s cubic-bezier(.29,.63,.44,1);
transition: all 1s cubic-bezier(.29,.63,.44,1);
bottom: -55px;
left: 50%;
}

@media only screen and (max-width:749px) {
.slideshow__text-content::after {
content: none;
}
}

.no-js .slideshow__text-content::after,.slick-initialized .slideshow__text-content::after {
opacity: 0;
visibility: hidden;
content: none;
}

@media (min-width:750px) {
.slideshow__text-content--mobile {
display: none!important;
}
}

.slideshow__text-content--mobile .container{
padding: 30px;
}

.slideshow__arrows--mobile~.slideshow__text-content--mobile {
padding-top: 1.7rem;
}

@media only screen and (min-width:750px) {
.slideshow__arrows--mobile~.slideshow__text-content--mobile {
padding-top: 0;
}
}

@media only screen and (min-width:750px) {
.slideshow__text-content--mobile {
padding-top: 0;
}

.slideshow__text-content--mobile::after {
display: none;
}
}

@media (min-width:992px) {
.slideshow__title {
font-size: 70px;
font-weight: 400;
line-height:1;
}
.mega-subtitle{
line-height: 1.6;
}
}
@media (min-width:1600px) {
.slideshow__title {
line-height: 1;
font-weight: 400;
font-size: 96px;
}
}

@media only screen and (max-width:749px) {
.slideshow__subtitle,.slideshow__title,.slideshow__toptitle {
display: none;
}
}

.slideshow__title--mobile {
margin-bottom: 0;
font-size: calc(var(--g-font-size) + 30px);
font-weight: 400;
}

.slideshow__title--mobile~.slideshow__subtitle--mobile {
margin-top: 7px;
font-size: var(--g-font-size);
}

.slideshow__subtitle--mobile,.slideshow__title--mobile {
display: none;
color: #3d4246;
}

@media only screen and (max-width:749px) {
.slideshow__subtitle--mobile,.slideshow__title--mobile,.slideshow__toptitle--mobile {
display: block;
}
}

.slideshow__btn-wrapper {
border: none;
background-color: transparent;
}

@media only screen and (min-width:750px) {
.slideshow__btn-wrapper--push {
margin-top: 50px;
}
}

@media only screen and (max-width:749px) {
.slideshow__btn {
display: none;
}
}

.slideshow__btn--mobile {
display: none;
margin: 1.3rem auto 0;
}

@media only screen and (max-width:749px) {
.slideshow__btn--mobile {
display: inline-block;
}
}

.slideshow .slick-prev {
left: 25px;
}

.slideshow .slick-next {
right: 25px;
}

.slideshow .slick-arrow {
width: 50px;
height: 50px;
border-radius: 100%;
color: #fff;
}

.slideshow .slick-arrow:before {
color: {{section.settings.color_arrow}};
}
.slideshow .slick-dots li button{
border-color:{{section.settings.color_dot_nav}};
}
.slideshow .slick-dots li::hover button{
background:{{section.settings.color_dot_active}};
border-color:{{section.settings.color_dot_active}};
}
.slideshow .slick-dots li.slick-active button{
border-color:{{section.settings.color_dot_active}};
background:{{section.settings.color_dot_active}};
}

@media (max-width:991px) {
.slideshow .slick-arrow {
display: none!important;
}
}

</style>
<!-- slideshow-1.liquid -->
{%- if section.settings.slideshow_height == 'adapt' -%}
{%- assign first_block = section.blocks[0] -%}
{%- if first_block.settings.image.aspect_ratio == blank -%}
{%- assign min_aspect_ratio = 2.0 -%}
{%- else -%}
{%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
{%- endif -%}
{%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
{%- endif -%}
<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">
{%- if section.blocks.size > 0 -%}
<div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" role="region" aria-label="slideshow" aria-describedby="slideshow-info" tabindex="-1">
<div class="slideshow slideshow--{{ section.settings.slideshow_height }} {% if display_controls %} slideshow--display-controls{% endif %}"
id="Slideshow-{{ section.id }}"
data-autorotate="{{ section.settings.autorotate }}"
data-speed="{{ section.settings.autorotate_speed | times: 1000 }}"
data-adapt-height="{%- if section.settings.slideshow_height == 'adapt' -%}true{%- else -%}false{%- endif -%}"
data-slide-nav-a11y="{{ 'sections.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
{%- if section.settings.slideshow_height == 'adapt' -%}data-min-aspect-ratio="{{ min_aspect_ratio }}"
style="height: {{ wrapper_height }}vw"{%- endif -%}>

{%- for block in section.blocks -%}
{%- assign text_alignments = block.settings.text_alignment | split: ' ' -%}
{%- assign text_horizontal_alignment = text_alignments.first -%}
{%- assign text_vertical_alignment = text_alignments.last | strip -%}

<div class="slideshow__slide slideshow__slide--{{ block.id }}" {{ block.shopify_attributes }} style="background-color: {{block.settings.bgwrap}};">
{%- if block.settings.image == blank -%}
<div class="slideshow__image js">
<div class="placeholder-background">
{%- capture current -%}{%- cycle 1, 2 -%}{%- endcapture -%}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- if section.settings.show_overlay -%}<div class="slideshow__overlay {% if section.settings.gradient_overlay %} gradient_overlay {% endif %}"></div>{%- endif -%}
</div>
{%- else -%}
<div class="slideshow__image box ratio-container lazyload js{%- unless forloop.first -%} lazypreload{%- endunless -%}"
data-bgset="{%- include 'bgset', image: block.settings.image -%}"
data-sizes="auto"
data-parent-fit="contain"
style="background-position: {{ block.settings.alignment }};">
{%- if section.settings.show_overlay -%}<div class="slideshow__overlay {% if section.settings.gradient_overlay %} gradient_overlay {% endif %}"></div>{%- endif -%}
</div>
{%- endif -%}

<div class="slideshow__text-wrap slideshow__text-wrap--desktop">
<div class="slideshow__text-content slideshow__text-content--vertical-{{ text_vertical_alignment }} text-{{ text_horizontal_alignment }}">
<div class="container" data-aos="fade" data-aos-anchor-placement="top-bottom" data-aos-once="true">
{%- unless block.settings.slide_title == blank and block.settings.subheading == blank -%}
<div class="d-inline-block text-{% if text_horizontal_alignment == 'right' %}left{% else %}{{text_horizontal_alignment}}{% endif %} ">
<ul class="list-unstyled" >
{%- unless block.settings.slide_toptitle == blank -%}
<li class="mb-2">
<p class="slideshow__toptitle font-family-2" style="color:{{block.settings.slide_toptitle_color}}">
{{ block.settings.slide_toptitle }}
</p>
</li>
{%- endunless -%}
{%- unless block.settings.slide_title == blank -%}
<li>
<h2 class="h1 mega-title slideshow__title font-family-1" style="color:{{block.settings.slide_title_color}}">
{{ block.settings.slide_title }}
</h2>
</li>
{%- endunless -%}
{%- unless block.settings.subheading == blank -%}
<li class="mt-lg-4 mb-lg-5">
<span class="mega-subtitle slideshow__subtitle d-lg-block fz-2" style="color:{{block.settings.subheading_color}}">
{{ block.settings.subheading }}
</span>
</li>
{%- endunless -%}
</ul>
{%- endunless -%}

{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- if show_link_button -%}
<style>
.slideshow__btn{{block.id}}{
background-color:{{block.settings.bg_button}};
color:{{block.settings.color_button}};
}
.slideshow__btn{{block.id}}:before{
background-color:{{block.settings.bg_button_hover}};
}
.slideshow__btn{{block.id}}:hover{
color:{{block.settings.color_button_hover}};
}
.slideshow__btn{{block.id}}:hover:before{
background-color:{{block.settings.bg_button_hover}};
}
</style>
<div class="slideshow__btn-wrapper{% if block.settings.slide_title != blank or block.settings.subheading != blank %} slideshow__btn-wrapper--push{% endif %}" >
<a href="{{ block.settings.button_link }}" class="btn gradient-theme slideshow__btn slideshow__btn{{block.id}} {%if block.settings.stylebtn %} btn-theme {% else %} btn-underline {% endif %}">
<span>{{ block.settings.button_label | escape }}</span>
</a>
</div>
{%- endif -%}
</div>
</div>
</div>
</div>
</div>
{%- endfor -%}
</div>
</div>
<div class="slideshow__text-wrap slideshow__text-wrap--mobile bg-white" >
{%- for block in section.blocks -%}
{%- assign show_text = false -%}
{%- unless block.settings.slide_title == blank and block.settings.subheading == blank -%}
{%- assign show_text = true -%}
{%- endunless -%}
{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- if show_text or show_link_button -%}
<div class="slideshow__text-content slideshow__text-content--mobile slideshow__text-content--mobile-{{ forloop.index0 }}" {% unless forloop.first %}style="display:none"{% endunless %} >
<div class="container" style="background-color: {{block.settings.bgwrap}};">
{%- unless block.settings.slide_toptitle == blank -%}
<p class="slideshow__toptitle mb-2 slideshow__toptitle--mobile subtop" style="color:{{block.settings.slide_toptitle_color}}">
{{ block.settings.slide_toptitle }}
</p>
{%- endunless -%}
{%- unless block.settings.slide_title == blank -%}
<h2 class="h1 mega-title slideshow__title slideshow__title--mobile font-family-2 mb-4" style="color:{{block.settings.slide_title_color}}">
{{ block.settings.slide_title }}
</h2>
{%- endunless -%}
{%- unless block.settings.subheading == blank -%}
<span class="mega-subtitle slideshow__subtitle slideshow__subtitle--mobile mb-3" style="color:{{block.settings.subheading_color}}">
{{ block.settings.subheading }}
</span>
{%- endunless -%}

{%- if show_link_button -%}
<style>
.slideshow__btn{{block.id}}{
background-color:{{block.settings.bg_button}};
color:{{block.settings.color_button}};
}
.slideshow__btn{{block.id}}:before{
background-color:{{block.settings.bg_button_hover}};
}
.slideshow__btn{{block.id}}:hover{
color:{{block.settings.color_button_hover}};
}
.slideshow__btn{{block.id}}:hover:before{
background-color:{{block.settings.bg_button_hover}};
}
</style>
<a href="{{ block.settings.button_link }}" class="btn btn-theme gradient-theme slideshow__btn slideshow__btn--mobile slideshow__btn{{block.id}}">
<span>{{ block.settings.button_label | escape }}</span>
</a>
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}
{%- if section.blocks.size == 0 -%}
<div class="placeholder-noblocks">
{{ 'homepage.onboarding.no_content' | t }}
</div>
{%- endif -%}
</div>
{% schema %}
{
"name": "Slideshow 1",
"class": "index-section index-section--slideshow",
"max_blocks": 8,
"settings": [
{
"type": "select",
"id": "slideshow_height",
"label": "Slide height",
"default": "adapt",
"info": "Learn more about [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/debut#slideshow-sections-specific)",
"options": [
{
"label": "Adapt to first image",
"value": "adapt"
},
{
"label": "Small",
"value": "small"
},
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
}
]
},
{
"type": "checkbox",
"id": "show_overlay",
"label": "Show overlay",
"default": true
},
{
"type": "checkbox",
"id": "gradient_overlay",
"label": "Gradient overlay",
"default": true
},
{
"type": "color",
"id": "bg_overlay",
"label": "Background Overlay",
"default": "#000"
},
{
"type": "checkbox",
"id": "autorotate",
"label": "Auto-rotate slides",
"default": false
},
{
"type": "range",
"id": "autorotate_speed",
"label": "Change slides every",
"max": 9,
"min": 3,
"step": 2,
"unit": " s",
"default": 5
},
{
"type": "color",
"id": "color_arrow",
"label": "Color Arrow",
"default": "#000"
},
{
"type": "color",
"id": "color_dot_nav",
"label": "Color Dot",
"default": "#000"
},
{
"type": "color",
"id": "color_dot_active",
"label": "Color Dot Active",
"default": "#C99A5C"
}
],
"blocks": [
{
"type": "image",
"name": "Image slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "alignment",
"label": "Image position",
"default": "center center",
"options": [
{
"label": "Top left",
"value": "left top"
},
{
"label": "Top center",
"value": "center top"
},
{
"label": "Top right",
"value": "right top"
},
{
"label": "Middle left",
"value": "left center"
},
{
"label": "Middle center",
"value": "center center"
},
{
"label": "Middle right",
"value": "right center"
},
{
"label": "Bottom left",
"value": "left bottom"
},
{
"label": "Bottom center",
"value": "center bottom"
},
{
"label": "Bottom right",
"value": "right bottom"
}
]
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"default": "center center",
"options": [
{
"label": "Top left",
"value": "left top"
},
{
"label": "Top center",
"value": "center top"
},
{
"label": "Top right",
"value": "right top"
},
{
"label": "Middle left",
"value": "left center"
},
{
"label": "Middle center",
"value": "center center"
},
{
"label": "Middle right",
"value": "right center"
},
{
"label": "Bottom left",
"value": "left bottom"
},
{
"label": "Bottom center",
"value": "center bottom"
},
{
"label": "Bottom right",
"value": "right bottom"
}
]
},
{
"type": "color",
"id": "bgwrap",
"label": "Background Slide",
"default": "#F8EDE7"
},
{
"type": "text",
"id": "slide_toptitle",
"label": "Top Title",
"default": "Design by Shopifytemplate"
},
{
"type": "color",
"id": "slide_toptitle_color",
"label": "Top title color",
"default": "#999"
},
{
"type": "text",
"id": "slide_title",
"label": "Heading",
"default": "Image slide"
},
{
"type": "color",
"id": "slide_title_color",
"label": "Heading color",
"default": "#fff"
},
{
"type": "textarea",
"id": "subheading",
"label": "Subheading",
"default": "Tell your brand's story through images"
},
{
"type": "color",
"id": "subheading_color",
"label": "Subheading color",
"default": "#fff"
},
{
"type": "text",
"id": "button_label",
"label": "Button label"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "checkbox",
"id": "stylebtn",
"label": "Enable Style Button"
},
{
"type": "color",
"id": "bg_button",
"label": "Background Button",
"default": "#000"
},
{
"type": "color",
"id": "color_button",
"label": "Color Button",
"default": "#fff"
},
{
"type": "color",
"id": "bg_button_hover",
"label": "Background Button Hover",
"default": "#b6813c"
},
{
"type": "color",
"id": "color_button_hover",
"label": "Color Button Hover",
"default": "#fff"
}
]
}
]
}
{% endschema %}

[dmwwebartisan · Accepted solution]

@shells 

Please remove old code and add this new code.

.slideshow__text-wrap--desktop .slideshow__text-content .container{
   margin-left: 20px !important;
}

Let me know if this works.

Thanks!

[dmwwebartisan · Accepted solution]

@shells 

That "/" below the image you have to search in your product template liquid file. It is accidentally put there. So you have found and remove that.

As for the bullets in the description tab. You can add the following code.

.template-product #nav-tab-info ul {
    margin-left: 20px;
}

Hope this works.

Thanks!

[dmwwebartisan · Accepted solution]

@shells 

Yes, please add at the bottom of your assets/theme.scss.liquid file.

The code should work.

[dmwwebartisan · Accepted solution]

@shells 

Please check here. Try to remove it.

[dmwwebartisan · Accepted solution]

@shells 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

#shopify-section-1593875730388 .content-block__meta .blog__date{
color: #fff !important;
}
#shopify-section-1593875730388 .content-block__meta h3.blog__title-link{
font-size: 25px;
}

Hope this works.

Thanks!

[dmwwebartisan · Accepted solution]

@shells 

2. Another issue I am encountering is changing font for the product page title. How can I change it to Josefine Sans or any font I like? Currently it is tied to Heading 1. I tried to alter the code but was worried about messing it up. Can you help me see if I can change one of the heading, say heading 3 so I can use it as an option for other places?

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.template-product h1.product-single__title{
font-family: "Josefine Sans" !important;
}

The same code you can use of other headings like ".template-product h2", ".template-product h3" etc.

Hope this helps.

Thanks!

[dmwwebartisan]

@shells 

Please share your store URL.

[shells]

Hi there!

https://www.feyrebaby.com.au/?_ab=0&_fd=0&_sc=1&key=30a6734db3eb469fc3230c658d16242280371e1607b73bea...

[shells]

I think they've used Shopify's debut slideshow template but I just can't find where to adjust the margins 

[dmwwebartisan]

@shells 

I checked this website. The slider text already on left. Please provide a screenshot of which text you want to align?

[shells]

It is to the left already but I want it move it further to the left. How can I adjust that?

[dmwwebartisan]

@shells 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.slideshow__text-wrap--desktop .slideshow__text-content{
    padding: 0 10px !important;
	}

Hope this works.

Thanks!

[shells]

Hi dmwwebartisan!

Thank you so much but it still doesn't work. I want the three text: top title, mega title and sub text as well as the button to all shift a little bit to the left. 

I've pasted it like so

Am I doing something wrongly?

[shells]

If I email you my login details, will you be able to help me fix it? Would really really appreciate it!

[dmwwebartisan · Accepted solution]

@shells 

Please remove old code and add this new code.

.slideshow__text-wrap--desktop .slideshow__text-content .container{
   margin-left: 20px !important;
}

Let me know if this works.

Thanks!

[shells]

Amazing. Thank you so so much. 

On the same topic. I am editing the mobile version for this same slideshow. With the restrictions, the text goes under the photo. However, I don't know how to change the colour of the background. The text is in white and it would be good if I can change the colour of the background and the button or just change the font colour to a darker colour without altering the white for the desktop page. 

Would you be able to help me with this?

Thank you so much

[dmwwebartisan]

@shells 

Please add the following code for the mobile.

@media only screen and (max-width: 749px){
.slideshow__subtitle--mobile, .slideshow__title--mobile, .slideshow__toptitle--mobile {
    color: #666666 !important;
}
}

Hope this works.

Thanks!

[shells]

You are amazing!! It looks really good now. Thank you!!!!

Another issue I am encountering is the slash that I've circled. Im not sure where they are coming from. This is on the product page.

And for the description, the bullets are sitting outside the box. How can I fix this please?

[dmwwebartisan · Accepted solution]

@shells 

That "/" below the image you have to search in your product template liquid file. It is accidentally put there. So you have found and remove that.

As for the bullets in the description tab. You can add the following code.

.template-product #nav-tab-info ul {
    margin-left: 20px;
}

Hope this works.

Thanks!

[shells]

Thank you @dmwwebartisan!!

Do I add the code at the end? I just tried and it didn't work...

As for the / / I can't find it! Would it just be as '/' stuck somewhere?

[shells]

<!-- product-template-1.liquid -->
<style>
.modal-backdrop.show{
display:none !important;
}
#productrelated {
margin-top: 70px
}
.product-modal__image {
display: block;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
max-height: 95%;
max-width: 95%;
margin: 0 auto;
cursor: auto
}

.no-csstransforms .product-modal__image {
top: 2.5%
}

#nav-tab-info .nav-tabs {
border-bottom: none;
text-align: center;
justify-content: center;
}

#nav-tab-info .nav-tabs .nav-link {
border: none;
border-bottom: 2px solid transparent;
color: #222;
font-size: 16px;
}

#nav-tab-info .nav-tabs .nav-link.active {
border-bottom: 2px solid {{settings.color_primary}};
}

#nav-tab-info .nav-tabs .nav-item {
text-transform: capitalize;
padding:0;
margin:0 5rem -2px 0;
font-weight: normal;
background-color: transparent;
font-size: 16px;
padding:5px 0;
}

.nav-link .spr-badge-starrating {
display: none
}

.social-sharing .col-title {
font-size: 14px;
line-height: 1.8;
min-width: 75px;
}

.safe-checkout-detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.product-form__quantity-submit {
display: flex;
align-items: center;
padding-top: 10px;
}

.product-form__quantity-submit .product-form__item--submit {
margin-left: 10px;
}

.selector-wrapper {
margin: 15px 0;
}
#shopify-section-{{ section.id }} .product-single__info-wrapper{
padding:0rem 0rem 0rem 3rem;
}
.template-product .main-content{
padding-top:80px;
}
.product-form-select .selector-wrapper{
flex: 0 0 50%;
max-width: 50%;
}

@media (max-width:1100px) {
#shopify-section-{{ section.id }} .product-single__info-wrapper{
padding:0rem 0rem 0rem 0rem;
}
.product-form__quantity-submit{
display: block;
}
.product-form__item--quantity{
width: 130px;
margin-bottom: 10px;
}
.product-form__quantity-submit .product-form__item--submit{
margin:0 0 10px 0 !important;
}
.product-form__buynow{
margin:0;
}
}
@media (max-width:767px) {
.main-content {
padding-top: 20px;
}
}

</style>
<div class="container js-recently-view" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" data-ajax="true" data-stock="{{ section.settings.stock_enable }}" data-handle="{{product.handle}}">
{% assign product_image_size = '480x480' %}
{% assign current_variant = product.selected_or_first_available_variant %}
<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: '600x600' }}">
<meta itemprop="brand" content="{{ product.vendor }}">

<div class="row product-single">
<div class="col-md-6">
<div class="photos">

<div class="photos__item photos__item--main " >
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
{%- for image in product.images -%}
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="product-single__photo product__photo-container product__photo-container-{{ section.id }}{% unless image == featured_image %} hide{% endunless %}"
id="ProductPhoto{{ section.id }}"
style="max-width: {% include 'image-width' with image: image, width: 480 %}px;"
data-image-id="{{ image.id }}">
<a href="{{ image | img_url: '1400x' }}" itemprop="contentUrl" data-size="1400x1400"
class="product__photo-wrapper product__photo-wrapper-{{ section.id }} zoom_image zoom zoom_enabled"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img itemprop="thumbnail" class="lazyload {% unless image == featured_image %} lazypreload{% endunless %}"
src="{{ image | img_url: '1200x' }}"
data-src="{{ img_url }}"
data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</figure>
{%- endfor -%}
</div>
<noscript>
<a href="{{ featured_image | img_url: '1200x' }}">
<img src="{{ featured_image | img_url: product_image_size }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg-{{ section.id }}">
</a>
</noscript>
{% include 'productVideo' %}
</div>
{%- if product.images.size > 1 -%}
<div class="photos__item photos__item--thumbs">
<div class="product-single__thumbnails product-single__thumbnails-{{ section.id }} product-single__thumbnails--static">
{%- for image in product.images -%}
<div class="product-single__thumbnail-item product-single__thumbnail-item-{{ section.id }}{% if image == featured_image %} is-active{% endif %}" data-image-id="{{ image.id }}">
<a href="{{ image.src | img_url: product_image_size }}" data-zoom="{{ image.src | img_url: '1200x' }}" class="product-single__thumbnail product-single__thumbnail-{{ section.id }}">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload {% unless image == featured_image %} lazypreload{% endunless %}"
src="{{ image | img_url: '1200x' }}"
data-src="{{ img_url }}"
data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</div>
{%- endfor -%}
</div>
</div>
<script>
{%- capture arrow_left -%}{%- include 'icon-arrow-left' -%}{%- endcapture -%}
{%- capture arrow_right -%}{%- include 'icon-arrow-right' -%}{%- endcapture -%}
{%- capture arrow_up -%}{%- include 'icon-arrow-up' -%}{%- endcapture -%}
{%- capture arrow_down -%}{%- include 'icon-arrow-down' -%}{%- endcapture -%}
var sliderArrows = {
left: {{ arrow_left | json }},
right: {{ arrow_right | json }},
up: {{ arrow_up | json }},
down: {{ arrow_down | json }}
}
</script>
{%- endif -%}
{% if section.settings.positiontab == "left" %}
<div class=" {% unless settings.productpage == "product-1" %}pl-5 {% endunless %}" >
<div class="{% unless settings.productpage == "product-1" %}pl-5 {% endunless %}">
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
<div class="col-12 col-md-6 order-1" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product-single__info-wrapper">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<div class="product-single__meta small--text-center">
<h1 itemprop="name" class="product-single__title">{{ product.title }}^{<span id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
<span class="product-tag gradient-theme">
{{ 'products.product.on_sale' | t }}
</span>
</span>}
</h1>
{% if product.metafields.info.shortdesc != blank %}
<div class=" pb-2 rte product-single__description" itemprop="description">
{{product.metafields.info.shortdesc}}
</div>
{% endif %}
<div class="review">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
<ul class="pb-3 product-single__meta-list list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
<li>
{%- unless product.compare_at_price_max > product.price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{%- endunless -%}
<span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
</li>
{% if product.compare_at_price_max > product.price %}
<li>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
{{ current_variant.compare_at_price | money }}
</s>
</li>
{% endif %}

{%- if section.settings.stock_enable -%}
<li>{%- include 'productStock' -%}</li>
{%- endif -%}
</ul>



</div>

{% if product.metafields.info.affiliate_link != blank %}{% comment %}AFFILIATE PRODUCT{% endcomment %}
<a href="{{product.metafields.info.affiliate_link}}" class="my-3 btn btn-theme btn--full product-form__cart-submit {% if section.settings.enable_payment_button %}product-form__cart-submit--outline{% endif %}">
{{product.metafields.info.affiliate_button}}
</a>
{% else %} {% comment %}NORMAL PRODUCT{% endcomment %}
{% capture "form_class" %}product-form {% if section.settings.product_selector == 'select'%} product-form-select{% endif %} {% if section.settings.enable_payment_button %} product-form--payment-button{% endif %}{%- endcapture %}
{% capture "form_id" %}AddToCartForm-{{ section.id }}{%- endcapture %}
{% form 'product', product, class:form_class, id:form_id %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
{% include 'productOption' %}
</div>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
{% if variant.available %}
{{ variant.title }} - {{ variant.price | money_with_currency }}
{% else %}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{% endif %}
</option>
{% endfor %}
</select>


</span>

<div class="product-form__quantity-submit pt-4">
<div class="product-form__item product-form__item--quantity">
<label class="hide" for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input product-form__quantity">
</div>
<div class="product-form__item product-form__item--submit {% unless section.settings.enable_payment_button %} btn-disablebuynow {% endunless %}">
<button type="submit"
name="add"
id="AddToCart-{{ section.id }}"
class="btn btn--full btn-theme product-form__cart-submit {% if section.settings.enable_payment_button %}product-form__cart-submit--outline{% endif %}{% unless current_variant.available %} btn--sold-out{% endunless %}"
{% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
</div>
{% if section.settings.enable_payment_button %}
<div class="product-form__buynow">
{{ form | payment_button }}
{% if current_variant.available == false %}<style>.shopify-payment-button{display:none}</style>{% endif %}
</div>
{% endif %}
</div>

<div class="js-contact-soldout {% if current_variant.available %}hide{% endif %}">
<span class="btn btn-waitlist btn-theme" data-toggle="modal" data-target="#jsSoldout" title="{{ 'products.product.soldout_messenger' | t }}">{{'products.product.waitlist' | t}}</span>
</div>
<div class="gr-btnjs py-4 mt-4 border-top">
<div class="d-flex align-items-center">
<div>
{% if settings.enable_compare %}
<span class="btn js-btn-compare mr-4" data-tooltip="true" title="{{ 'products.product.compare_text' | t }}" data-handle="{{product.handle}}">
{%- include 'icon-exchange' -%}
{%- include 'icon-close' -%}
<span>{{ 'products.product.compare_text' | t }}</span>
</span>
{% endif %}
{% if settings.enable_wishlsit %}
<span data-tooltip="true" class="js-btn-wishlist mr-4" title="{{ 'products.product.wishlist_text' | t }}" data-handle="{{product.handle}}">
{%- include 'icon-heart' -%}
< class="wishlist-text">{{ 'products.product.wishlist_text' | t }}</<span>
</span>
{% endif %}
</div>
<div>
{%- include 'productSizeGuide' -%}
</div>
</div>

{% if section.settings.social_sharing_products %}
<div class="pt-4">
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
</div>
{% endif %}

</div>
{% endform %}
{% include 'notifySoldoutProduct' %}
{% endif %}

<div class="row text-left pt-2">
<div class="product-single__information col text-uppercase">
{% if section.settings.product_vendor_enable %}
<p class="product-single__vendor"><small class="text-body">{{'products.product.vendor' | t }}: </small><small>{{ product.vendor }}</small></p>
{% endif %}
{% if section.settings.product_type_enable %}
<p class="product-single__type"><small class="text-body">{{'products.product.type' | t }}: </small><small>{{ product.type }}</small></p>
{% endif %}
{% if section.settings.variant_sku_enable %}
<p class="product-single__sku "><small class="text-body">{{'products.product.sku' | t }}: </small><small class="js-variant-sku">{{ current_variant.sku | default:'null' }}</small></p>
{% endif %}
{% if section.settings.variant_available_enable %}
<p class="product-single__availability "><small class="text-body">{{'products.product.available' | t }}: </small><small>{% if current_variant.available %}{{ 'products.product.available' | t }}{% else %}{{'products.product.sold_out' | t }}{% endif %}</small></p>
{% endif %}
</div>
{% if settings.safe_checkout_detail != blank %}
<div class="safe-checkout-detail col">
<img class="lazyload img-fluid w-100" data-src="{{ settings.safe_checkout_detail | img_url: '600x' }}"/>
</div>
{% endif %}
</div>
{% include 'fake-viewer' %}
{% include 'free-shipping' %}
{% include 'shipping-time' %}
{% if settings.enable_countdown_page %}
{% include 'product-countdown' %}
{% endif %}

{% if section.settings.positiontab == "right" %}
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
{% endif%}
</div>
</div>
</div>
{% if section.settings.positiontab == "bottom" %}
/<div class="container px-0">/
<div class="row justify-content-md-center">
<div class="col-lg-9 col-12">
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
</div>
</div>
</div>
{% endif %}
<div class="row">
{% for block in section.blocks %}
{% if block.type == 'html' %}
{%- include 'html-product' -%}
{% elsif block.type == 'video' %}
{%- include 'video-product'-%}
{% elsif block.type == 'related-product' %}
{%- include 'related-products' -%}
{% elsif block.type == 'service' %}
{%- include 'service-pro' -%}
{% endif %}
{% endfor %}
</div>
{%- include 'cross-sell' -%}
{%- include 'upsell' -%}
{%- include 'next-prev-product' -%}
{%- include 'photoswipe' -%}
{%- include 'sticky-cart' -%}
</script>
</div>

{% schema %}
{
"name": "Product template 1",
"settings": [
{
"type": "checkbox",
"id": "stock_enable",
"label": "Show stock when less than 10 products available",
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "social_sharing_products",
"label": "Enable product sharing",
"default": true
},
{
"type": "checkbox",
"id": "next_prev_enable",
"label": "Enable next/previous products",
"default": true
},
{
"type": "checkbox",
"id": "product_vendor_enable",
"label": "Show product vendor",
"default": true
},
{
"type": "checkbox",
"id": "product_type_enable",
"label": "Show product type",
"default": true
},
{
"type": "checkbox",
"id": "variant_sku_enable",
"label": "Show variant sku",
"default": true
},
{
"type": "checkbox",
"id": "variant_available_enable",
"label": "Show variant availability",
"default": true
},
{
"type": "select",
"id": "product_selector",
"label": "Option type",
"options": [
{
"value": "radio",
"label": "Button"
},
{
"value": "select",
"label": "Dropdown"
}
]
},
{
"type": "header",
"content": "Size guide"
},
{
"type": "checkbox",
"id": "sizeguide_enable",
"label": "Enable",
"default": true
},
{
"type": "text",
"id": "sizeguide_title",
"label": "Title",
"default": "Size guide"
},
{
"type": "page",
"id": "sizeguide_page",
"label": "Select page",
"info": "[Create new page](\/admin\/pages\/new) and enter your HTML size guide"
},
{
"type": "header",
"content": "Short description"
},
{
"type": "paragraph",
"content": "💡 [Enter content for each product here.](\/admin\/bulk?resource_name=Product&edit=metafields.info.shortdesc)"
},
{
"type": "paragraph",
"content": "💡 Can use plain text or HTML code"
},
{
"type": "header",
"content": "Fake viewer"
},
{
"type": "checkbox",
"id": "fake_view_enable",
"label": "Enable",
"default": true
},
{
"type": "range",
"id": "fake_view_min",
"min": 10,
"max": 110,
"step": 1,
"label": "Min value",
"default": 12
},
{
"type": "range",
"id": "fake_view_max",
"min": 25,
"max": 125,
"step": 1,
"label": "Max value",
"default": 30
},
{
"type": "range",
"id": "fake_view_duration",
"min": 1,
"max": 20,
"step": 1,
"unit": "s",
"label": "Duration time",
"default": 3
},
{
"type": "text",
"id": "fake_view_text_prefix",
"label": "Pretext",
"default": "Currently there are "
},
{
"type": "text",
"id": "fake_view_text_suffix",
"label": "Subtext",
"default": " peoples are currently looking at this product"
},
{
"type": "header",
"content": "General tabs"
},
{
"type": "text",
"id": "gtab_des",
"label": "Title (Description tab)",
"default": "Description"
},
{
"type": "checkbox",
"id": "gtab_review_enable",
"label": "Review tab",
"default": true,
"info":"[Install review application here](https:\/\/apps.shopify.com\/product-reviews)"
},
{
"type": "text",
"id": "gtab_review",
"label": "Title (Review tab)",
"default": "Review"
},
{
"type": "header",
"content": "Special tabs"
},
{
"type": "paragraph",
"content": "💡 [Enter content of each tab here](\/admin\/bulk?resource_name=Product&edit=metafields.info.tab1,metafields.info.tab2,metafields.info.tab3,metafields.info.tab4)"
},
{
"type": "paragraph",
"content": "💡 Can use plain text or HTML code"
},
{
"type": "paragraph",
"content": "💡 Set blank to disable."
},
{
"type": "select",
"id": "positiontab",
"label": "Position Tab",
"default":"right",
"options": [
{
"value": "left",
"label": "Tab Left"
},
{
"value": "right",
"label": "Tab Right"
},
{
"value": "bottom",
"label": "Tab Bottom"
}
]
},
{
"type": "checkbox",
"id": "enable_tabvertical",
"label": "Enable Tab Vertical"
},
{
"type": "text",
"id": "stab_title1",
"label": "Title 1",
"default": "Specific tab 1"
},
{
"type": "text",
"id": "stab_title2",
"label": "Title 2",
"default": "Specific tab 2"
},
{
"type": "text",
"id": "stab_title3",
"label": "Title 3",
"default": "Specific tab 3"
},
{
"type": "text",
"id": "stab_title4",
"label": "Title 4",
"default": "Specific tab 4"
},
{
"type": "header",
"content": "Sticky Cart"
},
{
"type": "checkbox",
"id": "enable",
"label": "Enable",
"default": true
},
{
"type": "color",
"id": "mix_1",
"label": "Mix color 1",
"default": "#262626"
},
{
"type": "color",
"id": "mix_2",
"label": "Mix color 2",
"default": "#c0c0c0"
},
{
"type": "color",
"id": "text_cl",
"label": "Text",
"default": "#fff"
},
{
"type": "color",
"id": "cart_bg",
"label": "CTA Button Background",
"default": "#b7001d"
},
{
"type": "color",
"id": "cart_cl",
"label": "CTA Button Text",
"default": "#fff"
}
],
"blocks": [
{
"type": "related-product",
"name": "Related Product",
"limit": 1,
"settings": [
{
"type": "select",
"id": "setwidthcontent",
"label": "Width Content",
"default":"container",
"options": [
{
"value": "container",
"label": "Container"
},
{
"value": "container-fluid",
"label": "Container Fluid"
},
{
"value": "",
"label": "Full No Padding"
}
]
},
{
"type": "text",
"id": "relate_products_title",
"label": "Title",
"default": "Related product"
},
{
"type": "range",
"id": "show",
"min": 1,
"max": 5,
"step": 1,
"label": "Show",
"default": 4
},
{
"type": "checkbox",
"id": "arrows",
"label": "Arrows",
"default": false
},
{
"type": "checkbox",
"id": "draggable",
"label": "Draggable",
"default": true
},
{
"type": "checkbox",
"id": "dots",
"label": "Dots",
"default": true
}
]
},
{
"type": "html",
"name": "Html",
"settings": [
{
"type": "select",
"id": "setwidthcontent",
"label": "Width Content",
"default":"container",
"options": [
{
"value": "container",
"label": "Container"
},
{
"value": "container-fluid",
"label": "Container Fluid"
},
{
"value": "",
"label": "Full No Padding"
}
]
},
{
"id": "content_html",
"type": "html",
"label": "HTML"
}
]
},
{
"type": "video",
"name": "Video",
"limit": 1,
"settings": [
{
"type": "select",
"id": "setwidthcontent",
"label": "Width Content",
"default":"container",
"options": [
{
"value": "container",
"label": "Container"
},
{
"value": "container-fluid",
"label": "Container Fluid"
},
{
"value": "",
"label": "Full No Padding"
}
]
},
{
"type": "select",
"id": "align",
"label": "Text align",
"default": "right",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "range",
"id": "padding_desktop",
"min": 100,
"max": 500,
"step": 10,
"unit": "px",
"label": "Padding desktop",
"default": 300
},
{
"type": "range",
"id": "padding_mobile",
"min": 0,
"max": 300,
"step": 10,
"unit": "px",
"label": "Padding mobile",
"default": 80
},
{
"type": "color",
"id": "bg_box",
"label": "Background Boxed",
"default": "#fff"
},
{
"type": "range",
"id": "opacity_bgbox",
"min": 0,
"max": 1,
"step": 0.1,
"label": "Opacity Background Boxed",
"default": 1
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Elements"
},
{
"type": "color",
"id": "title_color",
"label": "Title",
"default": "#fff"
},
{
"type": "textarea",
"id": "subtext",
"label": "Subtitle",
"default": "Protection from the"
},
{
"type": "color",
"id": "subtitle_color",
"label": "Title",
"default": "#fff"
},
{
"type": "text",
"id": "button",
"label": "Button text",
"default": "discover now"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Optional"
},
{
"type": "textarea",
"id": "link_video",
"label": "Link Video",
"info": "Upload video in your host"
}
]
},
{
"type": "service",
"name": "Service",
"limit": 1,
"settings": [
{
"type": "select",
"id": "setwidthcontent",
"label": "Width Content",
"default":"container",
"options": [
{
"value": "container",
"label": "Container"
},
{
"value": "container-fluid",
"label": "Container Fluid"
},
{
"value": "",
"label": "Full No Padding"
}
]
},
{
"type": "select",
"id": "style_service",
"label": "Style Service",
"default": "pro__ser_1",
"options": [
{
"value": "pro__ser_1",
"label": "Style 1"
},
{
"value": "pro__ser_2",
"label": "Style 2"
}
]
},
{
"type": "image_picker",
"id": "icon_1",
"label": "Icon Image 1"
},
{
"type": "html",
"id": "ser_1",
"label": "Text Service 1"
},
{
"type": "image_picker",
"id": "icon_2",
"label": "Icon Image 2"
},
{
"type": "html",
"id": "ser_2",
"label": "Text Service 2"
},
{
"type": "image_picker",
"id": "icon_3",
"label": "Icon Image 3"
},
{
"type": "html",
"id": "ser_3",
"label": "Text Service 3"
},
{
"type": "image_picker",
"id": "icon_4",
"label": "Icon Image 4"
},
{
"type": "html",
"id": "ser_4",
"label": "Text Service 4"
},
{
"type": "image_picker",
"id": "icon_5",
"label": "Icon Image 5"
},
{
"type": "html",
"id": "ser_5",
"label": "Text Service 5"
}
]
}
]
}
{% endschema %}

<div id="ProductModal" class="modal">
<div class="modal__inner">
<img src="" id="ProductZoomImg" class="product-modal__image">
</div>
<button type="button" class="modal__close js-modal-close text-link">
{% include 'icon-close' %}
</button>
</div>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% if section.settings.stock_enable %}
<script type="application/json" id="VariantJson-{{ section.id }}">
[
{% for variant in product.variants %}
{
"incoming": {{ variant.incoming | default: false | json }},
"next_incoming_date": {{ variant.next_incoming_date | date: format: 'month_day_year' | json }},
"inventory_policy": {{ variant.inventory_policy | json }},
"inventory_quantity": {{ variant.inventory_quantity | json }}
}{% unless forloop.last %},{% endunless %}
{% endfor %}
]
</script>
{% endif %}
{% endunless %}

{% if collection %}
<div class="full-width full-width--return-link">
<a href="{{ collection.url }}" class="h1 return-link">
{% include 'icon-arrow-thin-left' %}
{{ 'products.product.collection_return' | t: collection: collection.title }}
</a>
</div>
{% endif %}

<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
window.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
</script>

@dmwwebartisan Are you able to see the / / here?

[dmwwebartisan · Accepted solution]

@shells 

Please check here. Try to remove it.

[shells]

You are amazing. Thank you so much

[shells]

Also wondering if you can help with this. How can I change the colour of the date to white and also reduce the size of the blog title? This is on my home page under Latest News.

I'm so close to completing my website and really am grateful for your help. 

[dmwwebartisan · Accepted solution]

@shells 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

#shopify-section-1593875730388 .content-block__meta .blog__date{
color: #fff !important;
}
#shopify-section-1593875730388 .content-block__meta h3.blog__title-link{
font-size: 25px;
}

Hope this works.

Thanks!

[shells]

Thanks again! It works! So happy!

I was wondering if you can help me with a couple other things.

1. Currently all my products have a size guide but for the gift card product page, I don't need the size guide and the description below for this specific page. How can I remove it without affecting other product pages?

2. Another issue I am encountering is changing font for the product page title. How can I change it to Josefine Sans or any font I like? Currently it is tied to Heading 1. I tried to alter the code but was worried about messing it up. Can you help me see if I can change one of the heading, say heading 3 so I can use it as an option for other places?

3. How can I change the text font for the megatitle text on the landing page specifically, the "pima cotton collection" part? In the image below I circled the two because they are linked but I only want to change the megatitle font on the image. 

Lastly!

4. Related products on product page

The title is currently Our Best Sellers. This font size is much bigger than the other titles. How can I make them so that it's the same size as the product title?

Thank you soooo much!

[shells]

Hi @dmwwebartisan 

Are you able to help me with these today please! 

Please let me know if you would like me to separate each question in to a new discussion. 

[dmwwebartisan]

@shells 

1. Currently all my products have a size guide but for the gift card product page, I don't need the size guide and the description below for this specific page. How can I remove it without affecting other product pages?

This needs to check the liquid and HTML code of the product page
 and check if the product is a gift card product then don't show 
the size guide with the product page.

[shells]

But it's not an option? Can I add a code to the product page? This is the code for my product page. Would it be possible to add a code to the end of this like previous comments?

Thank you!

<!-- product-template-1.liquid -->
<style>
.modal-backdrop.show{
display:none !important;
}
#productrelated {
margin-top: 70px;
font-size: 30px;
}
.product-modal__image {
display: block;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
max-height: 95%;
max-width: 95%;
margin: 0 auto;
cursor: auto
}

.no-csstransforms .product-modal__image {
top: 2.5%
}

#nav-tab-info .nav-tabs {
border-bottom: none;
text-align: center;
justify-content: center;
}

#nav-tab-info .nav-tabs .nav-link {
border: none;
border-bottom: 2px solid transparent;
color: #222;
font-size: 16px;
}

#nav-tab-info .nav-tabs .nav-link.active {
border-bottom: 2px solid {{settings.color_primary}};
}

#nav-tab-info .nav-tabs .nav-item {
text-transform: capitalize;
padding:0;
margin:0 5rem -2px 0;
font-weight: normal;
background-color: transparent;
font-size: 16px;
padding:5px 0;
}

.nav-link .spr-badge-starrating {
display: none
}

.social-sharing .col-title {
font-size: 14px;
line-height: 1.8;
min-width: 75px;
}

.safe-checkout-detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.product-form__quantity-submit {
display: flex;
align-items: center;
padding-top: 10px;
}

.product-form__quantity-submit .product-form__item--submit {
margin-left: 10px;
}

.selector-wrapper {
margin: 15px 0;
}
#shopify-section-{{ section.id }} .product-single__info-wrapper{
padding:0rem 0rem 0rem 3rem;
}
.template-product .main-content{
padding-top:80px;
}
.product-form-select .selector-wrapper{
flex: 0 0 50%;
max-width: 50%;
}

@media (max-width:1100px) {
#shopify-section-{{ section.id }} .product-single__info-wrapper{
padding:0rem 0rem 0rem 0rem;
}
.product-form__quantity-submit{
display: block;
}
.product-form__item--quantity{
width: 130px;
margin-bottom: 10px;
}
.product-form__quantity-submit .product-form__item--submit{
margin:0 0 10px 0 !important;
}
.product-form__buynow{
margin:0;
}
}
@media (max-width:767px) {
.main-content {
padding-top: 20px;
}
}

</style>
<div class="container js-recently-view" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" data-ajax="true" data-stock="{{ section.settings.stock_enable }}" data-handle="{{product.handle}}">
{% assign product_image_size = '480x480' %}
{% assign current_variant = product.selected_or_first_available_variant %}
<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: '600x600' }}">
<meta itemprop="brand" content="{{ product.vendor }}">

<div class="row product-single">
<div class="col-md-6">
<div class="photos">

<div class="photos__item photos__item--main " >
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
{%- for image in product.images -%}
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="product-single__photo product__photo-container product__photo-container-{{ section.id }}{% unless image == featured_image %} hide{% endunless %}"
id="ProductPhoto{{ section.id }}"
style="max-width: {% include 'image-width' with image: image, width: 480 %}px;"
data-image-id="{{ image.id }}">
<a href="{{ image | img_url: '1400x' }}" itemprop="contentUrl" data-size="1400x1400"
class="product__photo-wrapper product__photo-wrapper-{{ section.id }} zoom_image zoom zoom_enabled"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img itemprop="thumbnail" class="lazyload {% unless image == featured_image %} lazypreload{% endunless %}"
src="{{ image | img_url: '1200x' }}"
data-src="{{ img_url }}"
data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</figure>
{%- endfor -%}
</div>
<noscript>
<a href="{{ featured_image | img_url: '1200x' }}">
<img src="{{ featured_image | img_url: product_image_size }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg-{{ section.id }}">
</a>
</noscript>
{% include 'productVideo' %}
</div>
{%- if product.images.size > 1 -%}
<div class="photos__item photos__item--thumbs">
<div class="product-single__thumbnails product-single__thumbnails-{{ section.id }} product-single__thumbnails--static">
{%- for image in product.images -%}
<div class="product-single__thumbnail-item product-single__thumbnail-item-{{ section.id }}{% if image == featured_image %} is-active{% endif %}" data-image-id="{{ image.id }}">
<a href="{{ image.src | img_url: product_image_size }}" data-zoom="{{ image.src | img_url: '1200x' }}" class="product-single__thumbnail product-single__thumbnail-{{ section.id }}">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload {% unless image == featured_image %} lazypreload{% endunless %}"
src="{{ image | img_url: '1200x' }}"
data-src="{{ img_url }}"
data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</div>
{%- endfor -%}
</div>
</div>
<script>
{%- capture arrow_left -%}{%- include 'icon-arrow-left' -%}{%- endcapture -%}
{%- capture arrow_right -%}{%- include 'icon-arrow-right' -%}{%- endcapture -%}
{%- capture arrow_up -%}{%- include 'icon-arrow-up' -%}{%- endcapture -%}
{%- capture arrow_down -%}{%- include 'icon-arrow-down' -%}{%- endcapture -%}
var sliderArrows = {
left: {{ arrow_left | json }},
right: {{ arrow_right | json }},
up: {{ arrow_up | json }},
down: {{ arrow_down | json }}
}
</script>
{%- endif -%}
{% if section.settings.positiontab == "left" %}
<div class=" {% unless settings.productpage == "product-1" %}pl-5 {% endunless %}" >
<div class="{% unless settings.productpage == "product-1" %}pl-5 {% endunless %}">
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
<div class="col-12 col-md-6 order-1" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product-single__info-wrapper">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<div class="product-single__meta small--text-center">
<h1 itemprop="name" class="product-single__title">{{ product.title }}^{<span id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
<span class="product-tag gradient-theme">
{{ 'products.product.on_sale' | t }}
</span>
</span>}
</h1>
{% if product.metafields.info.shortdesc != blank %}
<div class=" pb-2 rte product-single__description" itemprop="description">
{{product.metafields.info.shortdesc}}
</div>
{% endif %}
<div class="review">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
<ul class="pb-3 product-single__meta-list list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
<li>
{%- unless product.compare_at_price_max > product.price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{%- endunless -%}
<span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
</li>
{% if product.compare_at_price_max > product.price %}
<li>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
{{ current_variant.compare_at_price | money }}
</s>
</li>
{% endif %}

{%- if section.settings.stock_enable -%}
<li>{%- include 'productStock' -%}</li>
{%- endif -%}
</ul>



</div>

{% if product.metafields.info.affiliate_link != blank %}{% comment %}AFFILIATE PRODUCT{% endcomment %}
<a href="{{product.metafields.info.affiliate_link}}" class="my-3 btn btn-theme btn--full product-form__cart-submit {% if section.settings.enable_payment_button %}product-form__cart-submit--outline{% endif %}">
{{product.metafields.info.affiliate_button}}
</a>
{% else %} {% comment %}NORMAL PRODUCT{% endcomment %}
{% capture "form_class" %}product-form {% if section.settings.product_selector == 'select'%} product-form-select{% endif %} {% if section.settings.enable_payment_button %} product-form--payment-button{% endif %}{%- endcapture %}
{% capture "form_id" %}AddToCartForm-{{ section.id }}{%- endcapture %}
{% form 'product', product, class:form_class, id:form_id %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
{% include 'productOption' %}
</div>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
{% if variant.available %}
{{ variant.title }} - {{ variant.price | money_with_currency }}
{% else %}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{% endif %}
</option>
{% endfor %}
</select>


</span>

<div class="product-form__quantity-submit pt-4">
<div class="product-form__item product-form__item--quantity">
<label class="hide" for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input product-form__quantity">
</div>
<div class="product-form__item product-form__item--submit {% unless section.settings.enable_payment_button %} btn-disablebuynow {% endunless %}">
<button type="submit"
name="add"
id="AddToCart-{{ section.id }}"
class="btn btn--full btn-theme product-form__cart-submit {% if section.settings.enable_payment_button %}product-form__cart-submit--outline{% endif %}{% unless current_variant.available %} btn--sold-out{% endunless %}"
{% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
</div>
{% if section.settings.enable_payment_button %}
<div class="product-form__buynow">
{{ form | payment_button }}
{% if current_variant.available == false %}<style>.shopify-payment-button{display:none}</style>{% endif %}
</div>
{% endif %}
</div>

<div class="js-contact-soldout {% if current_variant.available %}hide{% endif %}">
<span class="btn btn-waitlist btn-theme" data-toggle="modal" data-target="#jsSoldout" title="{{ 'products.product.soldout_messenger' | t }}">{{'products.product.waitlist' | t}}</span>
</div>
<div class="gr-btnjs py-4 mt-4 border-top">
<div class="d-flex align-items-center">
<div>
{% if settings.enable_compare %}
<span class="btn js-btn-compare mr-4" data-tooltip="true" title="{{ 'products.product.compare_text' | t }}" data-handle="{{product.handle}}">
{%- include 'icon-exchange' -%}
{%- include 'icon-close' -%}
<span>{{ 'products.product.compare_text' | t }}</span>
</span>
{% endif %}
{% if settings.enable_wishlsit %}
<span data-tooltip="true" class="js-btn-wishlist mr-4" title="{{ 'products.product.wishlist_text' | t }}" data-handle="{{product.handle}}">
{%- include 'icon-heart' -%}
< class="wishlist-text">{{ 'products.product.wishlist_text' | t }}</<span>
</span>
{% endif %}
</div>
<div>
{%- include 'productSizeGuide' -%}
</div>
</div>

{% if section.settings.social_sharing_products %}
<div class="pt-4">
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
</div>
{% endif %}

</div>
{% endform %}
{% include 'notifySoldoutProduct' %}
{% endif %}

<div class="row text-left pt-2">
<div class="product-single__information col text-uppercase">
{% if section.settings.product_vendor_enable %}
<p class="product-single__vendor"><small class="text-body">{{'products.product.vendor' | t }}: </small><small>{{ product.vendor }}</small></p>
{% endif %}
{% if section.settings.product_type_enable %}
<p class="product-single__type"><small class="text-body">{{'products.product.type' | t }}: </small><small>{{ product.type }}</small></p>
{% endif %}
{% if section.settings.variant_sku_enable %}
<p class="product-single__sku "><small class="text-body">{{'products.product.sku' | t }}: </small><small class="js-variant-sku">{{ current_variant.sku | default:'null' }}</small></p>
{% endif %}
{% if section.settings.variant_available_enable %}
<p class="product-single__availability "><small class="text-body">{{'products.product.available' | t }}: </small><small>{% if current_variant.available %}{{ 'products.product.available' | t }}{% else %}{{'products.product.sold_out' | t }}{% endif %}</small></p>
{% endif %}
</div>
{% if settings.safe_checkout_detail != blank %}
<div class="safe-checkout-detail col">
<img class="lazyload img-fluid w-100" data-src="{{ settings.safe_checkout_detail | img_url: '600x' }}"/>
</div>
{% endif %}
</div>
{% include 'fake-viewer' %}
{% include 'free-shipping' %}
{% include 'shipping-time' %}
{% if settings.enable_countdown_page %}
{% include 'product-countdown' %}
{% endif %}

{% if section.settings.positiontab == "right" %}
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
{% endif%}
</div>
</div>
</div>
{% if section.settings.positiontab == "bottom" %}
<div class="container px-0">
<div class="row justify-content-md-center">
<div class="col-lg-9 col-12">
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
</div>
</div>
</div>
{% endif %}
<div class="row">
{% for block in section.blocks %}
{% if block.type == 'html' %}
{%- include 'html-product' -%}
{% elsif block.type == 'video' %}
{%- include 'video-product'-%}
{% elsif block.type == 'related-product' %}
{%- include 'related-products' -%}
{% elsif block.type == 'service' %}
{%- include 'service-pro' -%}
{% endif %}
{% endfor %}
</div>
{%- include 'cross-sell' -%}
{%- include 'upsell' -%}
{%- include 'next-prev-product' -%}
{%- include 'photoswipe' -%}
{%- include 'sticky-cart' -%}
</script>
</div>

{% schema %}
{
"name": "Product template 1",
"settings": [
{
"type": "checkbox",
"id": "stock_enable",
"label": "Show stock when less than 10 products available",
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "social_sharing_products",
"label": "Enable product sharing",
"default": true
},
{
"type": "checkbox",
"id": "next_prev_enable",
"label": "Enable next/previous products",
"default": true
},
{
"type": "checkbox",
"id": "product_vendor_enable",
"label": "Show product vendor",
"default": true
},
{
"type": "checkbox",
"id": "product_type_enable",
"label": "Show product type",
"default": true
},
{
"type": "checkbox",
"id": "variant_sku_enable",
"label": "Show variant sku",
"default": true
},
{
"type": "checkbox",
"id": "variant_available_enable",
"label": "Show variant availability",
"default": true
},
{
"type": "select",
"id": "product_selector",
"label": "Option type",
"options": [
{
"value": "radio",
"label": "Button"
},
{
"value": "select",
"label": "Dropdown"
}
]
},
{
"type": "header",
"content": "Size guide"
},
{
"type": "checkbox",
"id": "sizeguide_enable",
"label": "Enable",
"default": true
},
{
"type": "text",
"id": "sizeguide_title",
"label": "Title",
"default": "Size guide"
},
{
"type": "page",
"id": "sizeguide_page",
"label": "Select page",
"info": "[Create new page](\/admin\/pages\/new) and enter your HTML size guide"
},
{
"type": "header",
"content": "Short description"
},
{
"type": "paragraph",
"content": "💡 [Enter content for each product here.](\/admin\/bulk?resource_name=Product&edit=metafields.info.shortdesc)"
},
{
"type": "paragraph",
"content": "💡 Can use plain text or HTML code"
},
{
"type": "header",
"content": "Fake viewer"
},
{
"type": "checkbox",
"id": "fake_view_enable",
"label": "Enable",
"default": true
},
{
"type": "range",
"id": "fake_view_min",
"min": 10,
"max": 110,
"step": 1,
"label": "Min value",
"default": 12
},
{
"type": "range",
"id": "fake_view_max",
"min": 25,
"max": 125,
"step": 1,
"label": "Max value",
"default": 30
},
{
"type": "range",
"id": "fake_view_duration",
"min": 1,
"max": 20,
"step": 1,
"unit": "s",
"label": "Duration time",
"default": 3
},
{
"type": "text",
"id": "fake_view_text_prefix",
"label": "Pretext",
"default": "Currently there are "
},
{
"type": "text",
"id": "fake_view_text_suffix",
"label": "Subtext",
"default": " peoples are currently looking at this product"
},
{
"type": "header",
"content": "General tabs"
},
{
"type": "text",
"id": "gtab_des",
"label": "Title (Description tab)",
"default": "Description"
},
{
"type": "checkbox",
"id": "gtab_review_enable",
"label": "Review tab",
"default": true,
"info":"[Install review application here](https:\/\/apps.shopify.com\/product-reviews)"
},
{
"type": "text",
"id": "gtab_review",
"label": "Title (Review tab)",
"default": "Review"
},
{
"type": "header",
"content": "Special tabs"
},
{
"type": "paragraph",
"content": "💡 [Enter content of each tab here](\/admin\/bulk?resource_name=Product&edit=metafields.info.tab1,metafields.info.tab2,metafields.info.tab3,metafields.info.tab4)"
},
{
"type": "paragraph",
"content": "💡 Can use plain text or HTML code"
},
{
"type": "paragraph",
"content": "💡 Set blank to disable."
},
{
"type": "select",
"id": "positiontab",
"label": "Position Tab",
"default":"right",
"options": [
{
"value": "left",
"label": "Tab Left"
},
{
"value": "right",
"label": "Tab Right"
},
{
"value": "bottom",
"label": "Tab Bottom"
}
]
},
{
"type": "checkbox",
"id": "enable_tabvertical",
"label": "Enable Tab Vertical"
},
{
"type": "text",
"id": "stab_title1",
"label": "Title 1",
"default": "Specific tab 1"
},
{
"type": "text",
"id": "stab_title2",
"label": "Title 2",
"default": "Specific tab 2"
},
{
"type": "text",
"id": "stab_title3",
"label": "Title 3",
"default": "Specific tab 3"
},
{
"type": "text",
"id": "stab_title4",
"label": "Title 4",
"default": "Specific tab 4"
},
{
"type": "header",
"content": "Sticky Cart"
},
{
"type": "checkbox",
"id": "enable",
"label": "Enable",
"default": true
},
{
"type": "color",
"id": "mix_1",
"label": "Mix color 1",
"default": "#262626"
},
{
"type": "color",
"id": "mix_2",
"label": "Mix color 2",
"default": "#c0c0c0"
},
{
"type": "color",
"id": "text_cl",
"label": "Text",
"default": "#fff"
},
{
"type": "color",
"id": "cart_bg",
"label": "CTA Button Background",
"default": "#b7001d"
},
{
"type": "color",
"id": "cart_cl",
"label": "CTA Button Text",
"default": "#fff"
}
],
"blocks": [
{
"type": "related-product",
"name": "Related Product",
"limit": 1,
"settings": [
{
"type": "select",
"id": "setwidthcontent",
"label": "Width Content",
"default":"container",
"options": [
{
"value": "container",
"label": "Container"
},
{
"value": "container-fluid",
"label": "Container Fluid"
},
{
"value": "",
"label": "Full No Padding"
}
]
},
{
"type": "text",
"id": "relate_products_title",
"label": "Title",
"default": "Related product"
},
{
"type": "range",
"id": "show",
"min": 1,
"max": 5,
"step": 1,
"label": "Show",
"default": 4
},
{
"type": "checkbox",
"id": "arrows",
"label": "Arrows",
"default": false
},
{
"type": "checkbox",
"id": "draggable",
"label": "Draggable",
"default": true
},
{
"type": "checkbox",
"id": "dots",
"label": "Dots",
"default": true
}
]
},
{
"type": "html",
"name": "Html",
"settings": [
{
"type": "select",
"id": "setwidthcontent",
"label": "Width Content",
"default":"container",
"options": [
{
"value": "container",
"label": "Container"
},
{
"value": "container-fluid",
"label": "Container Fluid"
},
{
"value": "",
"label": "Full No Padding"
}
]
},
{
"id": "content_html",
"type": "html",
"label": "HTML"
}
]
},
{
"type": "video",
"name": "Video",
"limit": 1,
"settings": [
{
"type": "select",
"id": "setwidthcontent",
"label": "Width Content",
"default":"container",
"options": [
{
"value": "container",
"label": "Container"
},
{
"value": "container-fluid",
"label": "Container Fluid"
},
{
"value": "",
"label": "Full No Padding"
}
]
},
{
"type": "select",
"id": "align",
"label": "Text align",
"default": "right",
"options": [
{
"label": "Left",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "range",
"id": "padding_desktop",
"min": 100,
"max": 500,
"step": 10,
"unit": "px",
"label": "Padding desktop",
"default": 300
},
{
"type": "range",
"id": "padding_mobile",
"min": 0,
"max": 300,
"step": 10,
"unit": "px",
"label": "Padding mobile",
"default": 80
},
{
"type": "color",
"id": "bg_box",
"label": "Background Boxed",
"default": "#fff"
},
{
"type": "range",
"id": "opacity_bgbox",
"min": 0,
"max": 1,
"step": 0.1,
"label": "Opacity Background Boxed",
"default": 1
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Elements"
},
{
"type": "color",
"id": "title_color",
"label": "Title",
"default": "#fff"
},
{
"type": "textarea",
"id": "subtext",
"label": "Subtitle",
"default": "Protection from the"
},
{
"type": "color",
"id": "subtitle_color",
"label": "Title",
"default": "#fff"
},
{
"type": "text",
"id": "button",
"label": "Button text",
"default": "discover now"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Optional"
},
{
"type": "textarea",
"id": "link_video",
"label": "Link Video",
"info": "Upload video in your host"
}
]
},
{
"type": "service",
"name": "Service",
"limit": 1,
"settings": [
{
"type": "select",
"id": "setwidthcontent",
"label": "Width Content",
"default":"container",
"options": [
{
"value": "container",
"label": "Container"
},
{
"value": "container-fluid",
"label": "Container Fluid"
},
{
"value": "",
"label": "Full No Padding"
}
]
},
{
"type": "select",
"id": "style_service",
"label": "Style Service",
"default": "pro__ser_1",
"options": [
{
"value": "pro__ser_1",
"label": "Style 1"
},
{
"value": "pro__ser_2",
"label": "Style 2"
}
]
},
{
"type": "image_picker",
"id": "icon_1",
"label": "Icon Image 1"
},
{
"type": "html",
"id": "ser_1",
"label": "Text Service 1"
},
{
"type": "image_picker",
"id": "icon_2",
"label": "Icon Image 2"
},
{
"type": "html",
"id": "ser_2",
"label": "Text Service 2"
},
{
"type": "image_picker",
"id": "icon_3",
"label": "Icon Image 3"
},
{
"type": "html",
"id": "ser_3",
"label": "Text Service 3"
},
{
"type": "image_picker",
"id": "icon_4",
"label": "Icon Image 4"
},
{
"type": "html",
"id": "ser_4",
"label": "Text Service 4"
},
{
"type": "image_picker",
"id": "icon_5",
"label": "Icon Image 5"
},
{
"type": "html",
"id": "ser_5",
"label": "Text Service 5"
}
]
}
]
}
{% endschema %}

<div id="ProductModal" class="modal">
<div class="modal__inner">
<img src="" id="ProductZoomImg" class="product-modal__image">
</div>
<button type="button" class="modal__close js-modal-close text-link">
{% include 'icon-close' %}
</button>
</div>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% if section.settings.stock_enable %}
<script type="application/json" id="VariantJson-{{ section.id }}">
[
{% for variant in product.variants %}
{
"incoming": {{ variant.incoming | default: false | json }},
"next_incoming_date": {{ variant.next_incoming_date | date: format: 'month_day_year' | json }},
"inventory_policy": {{ variant.inventory_policy | json }},
"inventory_quantity": {{ variant.inventory_quantity | json }}
}{% unless forloop.last %},{% endunless %}
{% endfor %}
]
</script>
{% endif %}
{% endunless %}

{% if collection %}
<div class="full-width full-width--return-link">
<a href="{{ collection.url }}" class="h1 return-link">
{% include 'icon-arrow-thin-left' %}
{{ 'products.product.collection_return' | t: collection: collection.title }}
</a>
</div>
{% endif %}

<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
window.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
</script>

[dmwwebartisan]

@shells 

Giving an option will be the customization work. You can try to add code on the product page if it works if not then you can add it to the bottom of assets/theme.scss.liquid file.

[shells]

Would you be able to advise on the code?

The other thing I am trying is to create another product template.

I have now done that but it is not showing in the drop down menu? Do you know what I might be doing wrongly?

Thank you!

[dmwwebartisan]

@shells 

Could you elaborate more?

What exactly you would like to do?

[shells]

In short, I want to remove the size guide, the description and add a gift message option (see below) to these two pages as they are not physical products. I also want to create a gift message text box like this with my own gift card template (I have this in high res jpeg or pdf).

I thought about adding a template. In this theme, there are 8 product templates. I tried to add a 9th by adding a template and creating a section but after following some tutorials, the templates are still not showing up as options in the customisation/admin pages.

Is there a simpler way of doing this? 

https://www.feyrebaby.com.au/collections/gifts/products/feyre-baby-gift-card

https://www.feyrebaby.com.au/collections/gifts/products/gift-box-small 

Separately, I want to add this gift message option to all items here: https://www.feyrebaby.com.au/collections/gifts. Hence the idea of creating a product template. 

Thank you so much in advance. 

[shells]

@dmwwebartisan oh and I forgot to mention that I want to remove the zoom function for the gift card and gift wrap pages! Thank you !

[shells]

hi @dmwwebartisan 

Still haven't been able to figure it out today. Is this something you can help me with please?

Thank you in advance!

[dmwwebartisan]

@shells 

Are you using a different template for gift cards?

I checked your normal product and gift card both have the same product template using.

Let me know. 

As for the gift card message, do you want it dynamic?

OR using a different section and that gift card message you need in checkout and orders?

Let me know.

[shells]

Morning @dmwwebartisan!

Yes, they are the same template so I wanted to create another product template page but it's not showing up even though I created a template and a section (product-template-9.liquid).  Otherwise, is it possible to just remove the size guide, description, and the zoom function for the gift card and the gift box page specifically?

As for the gift message, I am thinking of just adding it to the checkout page to make it easier. Add a function in the checkout page like below to say add gift message and it opens up to a dynamic card (https://www.matchesfashion.com/au/checkout/review-and-pay -  something like this) I've taken some screenshots to better explain...

Is this something you can help with?

[dmwwebartisan]

@shells 

Is it possible to just remove the size guide, description, and the zoom function for the gift card and the gift box page specifically?
The product template is the same so we can't remove that. As for the gift card message screenshot, you have shown me. It looks like customization work.

My other question is: do you have Shopify plus plan?
In your screenshot, the 2nd screenshot is of the payment page where you need to card gift card things. To modify checkout pages you must have Shopify plus plan.

This will be customization work.

[shells]

Hi @dmwwebartisan ,

Ok, understood. 

But regarding the product page.. can I not change one of the existing templates? or what is wrong with my new template as it is not showing up after I've added it in template and section?

Thank you!

[shells]

I’m on my phone now and I see the mobile version of my website but the fonts are not coming through (second image). Also the menu on the top left is not appearing on mobile to show ‘newborn’ and ‘gifts’, as in it’s hidden because I hid the menu for the desktop but the mobile is also hidden now. I need to hide it for desktop but for it to show with a hamburger menu on mobile. Are you able to help me fix that? Thank you!

Also for the cookies, how can I change the colour to a light colour (say grey and darker buttons) instead of black background? I also want to change the font to Josefin Sans. Not sure why it's not coming through?

@dmwwebartisan Thank you so much 

[shells]

@dmwwebartisan 

another problem is currently the photo/product image for the gift card is now aligned to the bottom.  https://feyre-baby.myshopify.com/admin/themes/120453923004/editor?previewPath=%2Fcollections%2Fgifts... Do you know how I can make it center align in the middle with the text on the right?

Thank you!

[shells]

I think it is about changing the size of the image for this page specifically. Are you able to advise on a code to be added onto the theme.liquid perhaps?

Thank you!

[dmwwebartisan]

@shells 

Please try to upload a big image with high resolution but without background ( not grey background behind it)

[dmwwebartisan]

@shells 

another problem is currently the photo/product image for the gift card is now aligned to the bottom.  https://feyre-baby.myshopify.com/admin/themes/120453923004/editor?previewPath=%2Fcollections%2Fgifts... Do you know how I can make it center align in the middle with the text on the right?

Please share screenshot what do you want!

Thanks!

[shells]

hi @dmwwebartisan 

dont worry about the image. I've found a way to solve it. Would you be able to help me check on my mobile pages though?

The fonts on my mobile pages are not coming through (second image). Also the menu on the top left is not appearing on mobile to show ‘newborn’ and ‘gifts’, as in it’s hidden because I hid the menu for the desktop but the mobile is also hidden now. I need to hide it for desktop but for it to show with a hamburger menu on mobile. Are you able to help me fix that? Thank you!

Also for the cookies, how can I change the colour to a light colour (say grey and darker buttons) instead of black background? I also want to change the font to Josefin Sans. Not sure why it's not coming through?

[dmwwebartisan · Accepted solution]

@shells 

2. Another issue I am encountering is changing font for the product page title. How can I change it to Josefine Sans or any font I like? Currently it is tied to Heading 1. I tried to alter the code but was worried about messing it up. Can you help me see if I can change one of the heading, say heading 3 so I can use it as an option for other places?

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.template-product h1.product-single__title{
font-family: "Josefine Sans" !important;
}

The same code you can use of other headings like ".template-product h2", ".template-product h3" etc.

Hope this helps.

Thanks!

[shells]

Thank you so muich. 

I have pasted it but it doesn't work. See below. Anything I am doing wrongly?

[shells]

sorry it works! realised its a typo issue. Thank you very much

[dmwwebartisan]

@shells 

3. How can I change the text font for the megatitle text on the landing page specifically, the "pima cotton collection" part? In the image below I circled the two because they are linked but I only want to change the megatitle font on the image.

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.slick-initialized .slick-active .slideshow__text-content li .slideshow__title{
font-family: "Josefine Sans" !important;
}

Hope this works.

Thanks!

[dmwwebartisan · Accepted solution]

@shells 

4. Related products on product page

The title is currently Our Best Sellers. This font size is much bigger than the other titles. How can I make them so that it's the same size as the product title?

Please add the following code at the bottom of your assets/theme.scss.liquid file.

#productrelated h4.section-title-1 {
    font-size: 36px !important;
    font-weight: 300;
}

Hope this works.

Thanks!

[dmwwebartisan · Accepted solution]

@shells 

Yes, please add at the bottom of your assets/theme.scss.liquid file.

The code should work.