How do you add a carousel in featured collection

[AryavK]

So Dawn theme says that you can enable carousel on mobile, when you clicks that this comes on both desktop and mobile:

And when you click " Add carousel on Desktop "

… Surprise! NOTHING HAPPENS!

I want a slider to be exactly like this:

If someone can help, pls do.

Theme: Dawn

Store: www.faithandyou.in

[Huptech-Web]

Good day, @AryavK . Could you kindly provide me with the link to your store?

[AryavK]

www.faithandyou.in

[AryavK]

Thanks for replying so early! I figured how to add the slide in desktop and mobile but it is showing that 1/4 - 1/3 thingy. How do you remove the 1/4 stuff and add slider buttons?

[Huptech-Web]

@AryavK ,You can achieve this by simply inserting a small piece of code into your custom.css or base.css, where you include your CSS. See the attached screenshot.

.collection .slider-counter {
    display: none !important;
}

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[dws_pvt_ltd]

Hello @AryavK , Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open “base.css”
6. Add the following code at the end of the file.

body .slider-buttons .slider-button {
    /* display: none !important; */
    display: block !important;
}

.slider-mobile-gutter .slider-buttons {
    position: absolute;
    left: 50%;
    bottom: 0px;
    z-index: 1;
    border: unset;
    transform: translate(-50%, 0px);
}

.slider-counter {
    display: none;
}

ul.grid.product-grid.contains-card.contains-card--product {
    position: relative;
}

.slider-mobile-gutter .slider-buttons {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 35%;
    bottom: unset;
    z-index: 1;
    border: unset;
    transform: translate(-50%, 0px);
}

button.slider-button.slider-button--prev {
    position: absolute;
    left: 30px;
    background: #fff;
    border-radius: 50%;
}

button.slider-button.slider-button--next {
    position: absolute;
    right: 30px;
    background: #fff;
    border-radius: 50%;
}

@media only screen and (max-width:768px){
    .slider-mobile-gutter .slider-buttons{
      display: none;
    }
}

See the screenshots below,

In mobile from 767px width of screen arrows will display:none and can slide the grid of the products.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[AryavK]

The slider buttons aren’t showing on mobile then

[dws_pvt_ltd]

@AryavK if you want slider buttons visible in mobile then don’t put that CSS of the media query which is,

Omit the below CSS and see how looks in mobile!!

@media only screen and (max-width:768px){
    .slider-mobile-gutter .slider-buttons{
      display: none;
    }
}

[AryavK]

This is happening to my slideshow then:

And the featured collection also has this 1/4 thing stuck in the center:

[dws_pvt_ltd]

Hello @AryavK , Go to this Featured Collections section file and add this all the CSS which i mentioned above,

append #shopify-section-{{ section.id }} at all the CSS of mine which are in my first reply and then see.

Like below,

#shopify-section-{{ section.id }}  .slider-buttons .slider-button {
    /* display: none !important; */
    display: block !important;
}

#shopify-section-{{ section.id }} .slider-mobile-gutter .slider-buttons {
    position: absolute;
    left: 50%;
    bottom: 0px;
    z-index: 1;
    border: unset;
    transform: translate(-50%, 0px);
}

#shopify-section-{{ section.id }} .slider-counter {
    display: none;
}

#shopify-section-{{ section.id }} ul.grid.product-grid.contains-card.contains-card--product {
    position: relative;
}

#shopify-section-{{ section.id }} .slider-mobile-gutter .slider-buttons {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 35%;
    bottom: unset;
    z-index: 1;
    border: unset;
    transform: translate(-50%, 0px);
}

#shopify-section-{{ section.id }} button.slider-button.slider-button--prev {
    position: absolute;
    left: 30px;
    background: #fff;
    border-radius: 50%;
}

#shopify-section-{{ section.id }} button.slider-button.slider-button--next {
    position: absolute;
    right: 30px;
    background: #fff;
    border-radius: 50%;
}

@media only screen and (max-width:768px){
    #shopify-section-{{ section.id }} .slider-mobile-gutter .slider-buttons{
      display: none;
    }
}

Add it to your section file at below after schema and remove where you put it before without section id.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[AryavK]

Never mind, I fixed it myself: But then this is showing:

plus no dots

[AryavK]

Pls repkly quick, I

[dws_pvt_ltd]

Hello @AryavK , Please add this all CSS in your Feature collections section file with the section id CSS, then it should not effects any other sliders.

[AryavK]

Can you do it for me:

I will make you a staff

Pls give me a request

[dws_pvt_ltd]

Hello @AryavK ,

Hello! Please follow these steps to add this CSS code:

1. Go to your Online Store

2. Click on “Themes”

3. Select “Edit code”

4. Open your featured-collection.liquid section file.

5. Add CSS file below your schema and saved it.

[AryavK]

STill does not work, can you do it for me? what is your email id?

[dws_pvt_ltd]

Hello @AryavK , Remove your only that CSS which i gave it to you in first reply, please add it to your section file as per my last reply with edit code window, add that CSS which is in second reply the code with Section id.

[dws_pvt_ltd]

Hello @AryavK , Please check your private message inbox i sent a mail id, please add to a staff of your store.

[AryavK]

I sent you the ID

[AryavK]

Wait! I am so sorry for troubling you! You had the answer all the time! To put it into featured-collection.liquid! Thanks & Sorry!