Slide Show

Solved
CamillaP
Explorer
47 1 11

Hello. I'm using debut theme, I added a slide show to my featured collection in my home page using a tutorial. I tried to modify the code in order to get the look I want for my store, but as I'm new to coding I'd need some help to modify a couple of things.

the code I'm modifing is this one:

<style>
.slick-dots li button:before,
.slick-dots li a:before {
color: #3a3a3a !important;
}
.section-header__title {
text-align: center !important;
}
.box-wrapper{
width: {{ section.settings.card-width}}px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
margin: 5px;
}
.slide-img {
height: 200px;
position: relative;
}
.slide-img img {
width: 100%;
height: 100%;
object-fit: cover;
box-sizing: border-box;
}
.detail-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: left;
padding: 10px 20px;
box-sizing: border-box;
background-color: {{ section.settings.detail-box }};
}
.type {
display: flex;
flex-direction: column;
}
.type a {
color: ##134D47;
margin: 0px 28px;
font-weight: 600;
letter-spacing: 0.5px;
padding-right: 0px;
}
.type span {
color: #FFFFFF;
}
.price {
color: #333333;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: {{ section.settings.color_bg--overlay | color_modify: 'alpha', 0.6}};
display: flex;
justify-content: center;
align-items: center;
}
.buy-btn {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
border-radius: {{section.settings.buybtn-radius}}px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.buy-btn:hover {
color: #FFFFFF !important;
background-color: {{ section.settings.color_bg--buyBtn }};
transition: all ease 0.3s;
}
.overlay {
visibility: hidden;
}
.slide-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
:focus {
outline: none !important;
}
.slick-dots li button::before {
font-size: 22px !important;
}
span .icon.icon-chevron-left,
span .icon.icon-chevron-right {
display: none !important;
}
ul.slick-dots {
display: none !important;
}
@media screen and (max-width: 479px) {
/* start of phone styles */
.box-wrapper {
width: 265px;
}
.type a {
font-size: 16px;
}
.type span {
font-size: 16px;
}
.detail-box {
padding: 10px !important;
}
}
</style>

{%- if section.settings.arrows -%}
<style>
span i.slick-arrow-left {
height: 35px;
width: 35px;
background: #fff;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 1%;
top: 45%;
border-radius: 30%;
opacity: .7;
z-index: 1;
cursor: pointer;
}
span i.slick-arrow-right {
height: 35px;
width: 35px;
background: #fff;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 1%;
top: 45%;
border-radius: 30%;
opacity: .7;
cursor: pointer;
}
span .icon.icon-chevron-left,
span .icon.icon-chevron-right {
display: inline !important;
z-index: 1;
fill: inherit;
}

@media screen and (max-width: 479px) {
/* start of phone styles */
span i.slick-arrow-left,
span i.slick-arrow-right {
display: none !important;
}
}
</style>
{%- endif -%}

{%- if section.settings.dots -%}
<style>
ul.slick-dots {
display: block !important;
}
</style>
{%- endif -%}

{%- if section.settings.enable -%}
<div class="index-section">
{%- if section.settings.show_title -%}
<h2 class="section-header__title">
{%- for block in section.blocks -%}
{{ collections[block.settings.collection].title }}
{%- endfor -%}
</h2>
{%- endif -%}

<section>
<ul class="slick">
{%- for block in section.blocks -%}
{%- for product in collections[block.settings.collection].products -%}
<li class="item-a">
<!--box-slider--------------->
<div class="box-wrapper">
<!--img-box---------->
<div class="slide-img">
<img style="object-fit: contain;" src="{{ product.featured_image.src | img_url: "large" }}"
alt="{{ product.featured_image.alt | escape }}">
<!--overlayer---------->
<div class="overlay">
<!--buy-btn------>
<a href="{{ product.url | within: collection }}"
class="buy-btn">{{ section.settings.btn-title }}</a>
</div>
</div>
<!--detail-box--------->
<div class="detail-box">
<!--type-------->
<div class="type">
<a href="{{ product.url | within: collection }}">{{ product.title }}</a>
<span>{{ product.vendor }}</span>
</div>
<!--price-------->
<a href="{{ product.url | within: collection }}" class="price">{{ product.price | money }}</a>
</div>
</div>
</li>
{% else %}
The collection is empty!
{%- endfor -%}
{%- endfor -%}
</ul>
</section>
</div>
{%- endif -%}

{% schema %}
{
"name": "Product Carousel",
"settings": [
{
"type": "checkbox",
"id": "enable",
"label": "Enable",
"default": true
},
{
"type": "checkbox",
"id": "show_title",
"label": "Show title",
"default": true
},
{
"type": "checkbox",
"id": "arrows",
"label": "Show arrows",
"default": true
},
{
"type": "checkbox",
"id": "dots",
"label": "Show Slider Dots",
"default": true
},
{
"type": "color",
"id": "color_bg--overlay",
"label": "Overlay Color",
"default": "#000"
},
{
"type": "color",
"id": "detail-box",
"label": "Detail Box",
"default": "#f3f3f3"
},
{
"type": "text",
"id": "btn-title",
"default": "View More",
"label": "Button Title"
},
{
"type": "color",
"id": "color_bg--buyBtn",
"label": "Button Color on Hover",
"default": "#CBD5CC"
},
{
"type": "range",
"id": "buybtn-radius",
"min": 1,
"max": 20,
"step": 1,
"unit": "px",
"label": "Button Radius",
"default": 20
},
{
"type": "range",
"id": "card-width",
"min": 300,
"max": 440,
"step": 10,
"unit": "px",
"label": "Card Width",
"default": 350
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"limit": 1,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
}

]
}
],
"presets": [
{
"name": "Products carousel",
"category": "Carousel Sections"
}
]
}
{% endschema %}

This is how it looks:

CamillaP_0-1613991809418.png

as you see, the thext somethimes takes two lines when the line is longer. Can you help me to modify the code I'm using in order to move the text in one line and move the price under it?

something like that:

CamillaP_1-1613992101759.png

Thank you for the help!

 

0 Likes
Pallavi
Shopify Expert
1293 175 212

Add this one code

<style>
.slick-dots li button:before,
.slick-dots li a:before {
color: #3a3a3a !important;
}
.section-header__title {
text-align: center !important;
}
.box-wrapper{
width: {{ section.settings.card-width}}px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
margin: 5px;
}
.slide-img {
height: 200px;
position: relative;
}
.slide-img img {
width: 100%;
height: 100%;
object-fit: cover;
box-sizing: border-box;
}
.detail-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: left;
padding: 10px 20px;
box-sizing: border-box;
background-color: {{ section.settings.detail-box }};
}
.type {
display: flex;
flex-direction: column;
}
.type a {
color: ##134D47;
margin: 0px 28px;
font-weight: 600;
letter-spacing: 0.5px;
padding-right: 0px;
}
.type span {
color: #FFFFFF;
}
.price {
color: #333333;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: {{ section.settings.color_bg--overlay | color_modify: 'alpha', 0.6}};
display: flex;
justify-content: center;
align-items: center;
}
.buy-btn {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
border-radius: {{section.settings.buybtn-radius}}px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.buy-btn:hover {
color: #FFFFFF !important;
background-color: {{ section.settings.color_bg--buyBtn }};
transition: all ease 0.3s;
}
.overlay {
visibility: hidden;
}
.slide-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
:focus {
outline: none !important;
}
.slick-dots li button::before {
font-size: 22px !important;
}
span .icon.icon-chevron-left,
span .icon.icon-chevron-right {
display: none !important;
}
ul.slick-dots {
display: none !important;
}
@media screen and (max-width: 479px) {
/* start of phone styles */
.box-wrapper {
width: 265px;
}
.type a {
font-size: 16px;
}
.type span {
font-size: 16px;
}
.detail-box {
padding: 10px !important;
}
}
</style>

{%- if section.settings.arrows -%}
<style>
span i.slick-arrow-left {
height: 35px;
width: 35px;
background: #fff;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 1%;
top: 45%;
border-radius: 30%;
opacity: .7;
z-index: 1;
cursor: pointer;
}
span i.slick-arrow-right {
height: 35px;
width: 35px;
background: #fff;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 1%;
top: 45%;
border-radius: 30%;
opacity: .7;
cursor: pointer;
}
span .icon.icon-chevron-left,
span .icon.icon-chevron-right {
display: inline !important;
z-index: 1;
fill: inherit;
}

@media screen and (max-width: 479px) {
/* start of phone styles */
span i.slick-arrow-left,
span i.slick-arrow-right {
display: none !important;
}
}
</style>
{%- endif -%}

{%- if section.settings.dots -%}
<style>
ul.slick-dots {
display: block !important;
}
</style>
{%- endif -%}

{%- if section.settings.enable -%}
<div class="index-section">
{%- if section.settings.show_title -%}
<h2 class="section-header__title">
{%- for block in section.blocks -%}
{{ collections[block.settings.collection].title }}
{%- endfor -%}
</h2>
{%- endif -%}

<section>
<ul class="slick">
{%- for block in section.blocks -%}
{%- for product in collections[block.settings.collection].products -%}
<li class="item-a">
<!--box-slider--------------->
<div class="box-wrapper">
<!--img-box---------->
<div class="slide-img">
<img style="object-fit: contain;" src="{{ product.featured_image.src | img_url: "large" }}"
alt="{{ product.featured_image.alt | escape }}">
<!--overlayer---------->
<div class="overlay">
<!--buy-btn------>
<a href="{{ product.url | within: collection }}"
class="buy-btn">{{ section.settings.btn-title }}</a>
</div>
</div>
<!--detail-box--------->
<div class="detail-box">
<!--price-------->
<a href="{{ product.url | within: collection }}" class="price">{{ product.price | money }}</a>
<!--type-------->
<div class="type">
<a href="{{ product.url | within: collection }}">{{ product.title }}</a>
<span>{{ product.vendor }}</span>
</div>
</div>
</div>
</li>
{% else %}
The collection is empty!
{%- endfor -%}
{%- endfor -%}
</ul>
</section>
</div>
{%- endif -%}

{% schema %}
{
"name": "Product Carousel",
"settings": [
{
"type": "checkbox",
"id": "enable",
"label": "Enable",
"default": true
},
{
"type": "checkbox",
"id": "show_title",
"label": "Show title",
"default": true
},
{
"type": "checkbox",
"id": "arrows",
"label": "Show arrows",
"default": true
},
{
"type": "checkbox",
"id": "dots",
"label": "Show Slider Dots",
"default": true
},
{
"type": "color",
"id": "color_bg--overlay",
"label": "Overlay Color",
"default": "#000"
},
{
"type": "color",
"id": "detail-box",
"label": "Detail Box",
"default": "#f3f3f3"
},
{
"type": "text",
"id": "btn-title",
"default": "View More",
"label": "Button Title"
},
{
"type": "color",
"id": "color_bg--buyBtn",
"label": "Button Color on Hover",
"default": "#CBD5CC"
},
{
"type": "range",
"id": "buybtn-radius",
"min": 1,
"max": 20,
"step": 1,
"unit": "px",
"label": "Button Radius",
"default": 20
},
{
"type": "range",
"id": "card-width",
"min": 300,
"max": 440,
"step": 10,
"unit": "px",
"label": "Card Width",
"default": 350
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"limit": 1,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
}

]
}
],
"presets": [
{
"name": "Products carousel",
"category": "Carousel Sections"
}
]
}
{% endschema %}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
CamillaP
Explorer
47 1 11

Should I replace the one I have with the one you gave me? Thank you!

0 Likes
CamillaP
Explorer
47 1 11

it didn't work. Now it looks like this:

CamillaP_0-1614002822049.png

 

0 Likes
CamillaP
Explorer
47 1 11

@Pallavihey please can you aswer me?!

0 Likes
Pallavi
Shopify Expert
1293 175 212

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
CamillaP
Explorer
47 1 11

https://inkitstore.com psw is inkit

I'd like also to remove the white box if possible...

Thanks for your help!

0 Likes
Pallavi
Shopify Expert
1293 175 212

This is an accepted solution.

Hello There,

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

li .box-wrapper {
box-shadow: none;
width: 249px;
}

li .box-wrapper .detail-box .type {
width: 100%;
}

li .box-wrapper .detail-box a.price {
width: 100%;
order: 2;
flex-direction: row;
justify-content: center;
}

li .box-wrapper .detail-box {
flex-wrap: wrap;
text-align: center;
padding: 8px 7px;
}

li .box-wrapper .detail-box .type span {
display: none;
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
CamillaP
Explorer
47 1 11

Looks nice, thank you very much!

One last question, how can I reduce the white space between the products?

Thanks

0 Likes
Pallavi
Shopify Expert
1293 175 212

please you can share me screenshot

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing