All things Shopify and commerce
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:
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:
Thank you for the help!
Solved! Go to the solution
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;
}
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 {
width: 210px;
}
li .box-wrapper .detail-box .type a {
margin: 0;
}
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 %}
Should I replace the one I have with the one you gave me? Thank you!
it didn't work. Now it looks like this:
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
https://inkitstore.com psw is inkit
I'd like also to remove the white box if possible...
Thanks for your help!
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;
}
Looks nice, thank you very much!
One last question, how can I reduce the white space between the products?
Thanks
please you can share me screenshot
less white space where there are red arrows.
Thanks
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 {
width: 210px;
}
li .box-wrapper .detail-box .type a {
margin: 0;
}
Thank you!!
Kindly feel free to get back to me if you need any further assistance Thanks!
Hello @ZestardTech
maybe you can help me again with this problem:
I am currently using the Debut-theme on my shop and I am struggling to change the following function:
At the moment you can only change the product image in the product page by clicking on one of the other small pictures below the current picture. My problem is now that people that are using a mobile phone are used to swipe right and left to change picture and I think this would be much more convenient.
Can you please help me to change the code and to implement this function?
Here an exemple:
Thank you in advance for your help!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024