SLIDE SHOW

CamillaP
Explorer
47 1 11

hello.

I'm using Debut theme, I added a slide show for a featured collection on home page. It works great but I'd like to show also the initial price and not only the discounted one. Now it looks like this:

CamillaP_0-1617961756792.png

I'd like to show both the initial price and the discounted one. Something like that:

CamillaP_1-1617961837516.png

Can somebody help me with this change? Thank you!

Here the code I used for the slide show:

<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 10px;
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: 97%;
height: 100%;
background-color: {{ section.settings.color_bg--overlay | color_modify: 'alpha', 0.6}};
display: flex;
justify-content: center;
align-items: center;
}

.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---------->
<a href="{{ product.url | within: collection }}">
<div class="overlay">
<!--buy-btn------>
<span class="buy-btn">{{ section.settings.btn-title }}</span>
</div>
</a>
</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 %}

 

Thank you for your help!

KetanKumar
Shopify Partner
17332 1871 6473

@CamillaP 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

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

Thank you!! my store is https://inkitstore.com/

0 Likes
KetanKumar
Shopify Partner
17332 1871 6473


@CamillaP 

can you please use product grid item or product cart item etc theme default code current your you have user demo code on price 

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

sorry? I didn't understand

0 Likes
KetanKumar
Shopify Partner
17332 1871 6473

@CamillaP 

i mean do you have add wrong code in slider

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

please message me i need to hire you

KetanKumar
Shopify Partner
17332 1871 6473

@jeff56330 

yes, please

if you have any queries and issues please feel free to contact me here.
Email: bamaniyaketan.sky@gmail.com
Skype: bamaniya.sky

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

OK, can you tell me how to fix it? I'm new at coding...

0 Likes
KetanKumar
Shopify Partner
17332 1871 6473

@CamillaP 

can you please check the product page price code and product grid item code to compare 

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