How to make adjustments to Carousel

Hi guys,

I've got some questions about a carousel I have on my home page that I use to display products:

1. How can I make the font bold on the title of each individual slide (please see screenshot attached circling where I mean).

2. How do I put a strike through the 'before sale' price? (I have tried typing this in the description box but it didn't work: <strike>£370.00</strike> £330.00

3. Is there a way to add a unique link to each photo? I would rather remove the 'shop now' button and customers could just click the image instead to take them to the product page instead.

Any advice appreciated, thanks! 🙂 

URL: https://threadsonline.co.uk/

Password: asdfghjkl

17 hours ago, threadsonline said:

Hi guys,

I've got some questions about a carousel I have on my home page that I use to display products:

1. How can I make the font bold on the title of each individual slide (please see screenshot attached circling where I mean).

2. How do I put a strike through the 'before sale' price? (I have tried typing this in the description box but it didn't work: <strike>£370.00</strike> £330.00

3. Is there a way to add a unique link to each photo? I would rather remove the 'shop now' button and customers could just click the image instead to take them to the product page instead.

Any advice appreciated, thanks! 🙂 

URL: https://threadsonline.co.uk/

Password: asdfghjkl

Hi guys, just an update -  tuanphan has now helped me solve 1. & 2. on another post, so it's just number 3 I'm curious about now. Is there any way to add a link to the photos on carousel? Thanks!

For anyone curious about 1. & 2. here is the codes:

1. Strike through 'pre-sale' price in description (put the 'pre-sale price (or whatever text you want the strike through) in bold first)): 

.list-item-content__description p strong {
    font-weight: normal;
    text-decoration: line-through;
}

2. Make the title for each individual item bold:

.list-item-content__description p strong {
    font-weight: normal;
    text-decoration: line-through;
}

5 hours ago, tuanphan said:

Keep Shop Now button then add this code to Custom CSS box, the code will hide button + turn button link to image link

section[data-section-id="65e08a2615ebd7100f986d8a"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}
.list-item-content--hidden {
    display: block !important;
}}

 

Worked perfectly as always!! thank you so much 🙂 

5 hours ago, tuanphan said:

Keep Shop Now button then add this code to Custom CSS box, the code will hide button + turn button link to image link

section[data-section-id="65e08a2615ebd7100f986d8a"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}
.list-item-content--hidden {
    display: block !important;
}}

 

Hey, thank you that worked great! But now I've got some extra space on mobile display (please see attached). Desktop display looks perfect. Any way to decrease the gap?

Use this new code

section[data-section-id="65e08a2615ebd7100f986d8a"] {
.mobile-arrows {
	display: none !important;
}
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}
.list-item-content--hidden {
    display: block !important;
}}