How to Add slider to featured collection ( Dawn Theme)

[dreamtechzone_5]

Hello Everyone!
I am using the Shopify Dawn theme. I want to add the slider to featured collection in both desktop and mobile mode. I've added two photos below of exactly what I want it to look like, Is it possible? Thank you.

Store: https://puppies-paws-shop.myshopify.com
Password: Admin

Desktop Mode

Mobile Mode

Also I would like to remove it

[BSSCommerce-HDL · Accepted solution]

Hi @dreamtechzone_5, Pls try again with this code: 

.collection  .slider-buttons {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    top: 50%;
    width: 85%;
    left: 11%;
    transform: translateY(-50%) !important;
}


.collection button.slider-button svg path {
    fill: #ffff !important;
}

.collection .slider-button {
    background-color: #27496d !important;
    border-radius: 25px;
}

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


@media (max-width: 600px) {
   .collection  .slider-buttons { 
      width: 88% !important;
      left: 2% !important;
   }
}

Hope this work !!!
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

[BSSCommerce-HDL · Accepted solution]

Hi @dreamtechzone_5, 

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css,  theme.css or styles.css 

Step 3: Insert the below code at the bottom of the file -> Save

cart-remove-button a:hover svg path,
button.slider-button:hover svg path 
{
   fill: #ffff !important;
}

Here is result: 

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

[devcoders]

Hi @dreamtechzone_5 

Yes, it is indeed possible to add a slider to the featured collection on both desktop and mobile modes using the Shopify Dawn theme. If you need assistance with the implementation or further guidance, feel free to ask.

[dreamtechzone_5]

Really, How can I add it? send me the code. Thank you very much.

[BSSCommerce-HDL]

Hi @dreamtechzone_5, 

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css,  theme.css or styles.css 

Step 3: Insert the below code at the bottom of the file -> Save

.slider-buttons {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    top: 50%;
    width: 85%;
    left: 11%;
    transform: translateY(-50%) !important;
}


button.slider-button svg path {
    fill: #ffff !important;
}

.slider-button {
    background-color: #27496d !important;
    border-radius: 25px;
}

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


@media (max-width: 600px) {
   .slider-buttons { 
      width: 88% !important;
      left: 2% !important;
   }
}

Here is result: 
For desktop: 

For mobile: 

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[dreamtechzone_5]

Sliders are showing up everywhere

[BSSCommerce-HDL · Accepted solution]

Hi @dreamtechzone_5, Pls try again with this code: 

.collection  .slider-buttons {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    top: 50%;
    width: 85%;
    left: 11%;
    transform: translateY(-50%) !important;
}


.collection button.slider-button svg path {
    fill: #ffff !important;
}

.collection .slider-button {
    background-color: #27496d !important;
    border-radius: 25px;
}

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


@media (max-width: 600px) {
   .collection  .slider-buttons { 
      width: 88% !important;
      left: 2% !important;
   }
}

Hope this work !!!
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

[dreamtechzone_5]

Wow, Really you are great. It Worked. Thank you very much. I appreciate.
I have added hover effect on the button. But when hovering here, the arrow is not showing.

[BSSCommerce-HDL · Accepted solution]

Hi @dreamtechzone_5, 

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css,  theme.css or styles.css 

Step 3: Insert the below code at the bottom of the file -> Save

cart-remove-button a:hover svg path,
button.slider-button:hover svg path 
{
   fill: #ffff !important;
}

Here is result: 

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

[dreamtechzone_5]

I have pasted the code. But hovering here doesn't show the icon to increase the quantity. This icon is not showing anywhere.

[BSSCommerce-HDL · Accepted solution]

Hi @dreamtechzone_5, Pls insert this code to your file css: 

button.quantity__button:hover {
    color: black !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

[dreamtechzone_5]

It Worked. Thank you very much.

[MRamzan]

Add Collection slider in any page of your shopify store: