Re: How to Add slider to featured collection ( Dawn Theme)

Solved

How to Add slider to featured collection ( Dawn Theme)

dreamtechzone_5
Shopify Partner
288 1 34

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

Screenshot 2024-05-18 200003.png

Mobile Mode

Screenshot 2024-05-18 200514.png

Also I would like to remove it

Screenshot 2024-05-18 203550.png

Accepted Solutions (3)
BSSCommerce-HDL
Shopify Partner
1042 350 418

This is an 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 😍😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Partner
1042 350 418

This is an 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: 

BSSTechVenture_0-1716076056697.pngBSSTechVenture_1-1716076117982.png

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 😍😍

 

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Partner
1042 350 418

This is an 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 😍😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 10 (10)

devcoders
Shopify Partner
191 31 48

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.

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
dreamtechzone_5
Shopify Partner
288 1 34

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

BSSCommerce-HDL
Shopify Partner
1042 350 418

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: 

BSSTechVenture_0-1716049490450.png

For mobile: 

BSSTechVenture_1-1716049515601.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
dreamtechzone_5
Shopify Partner
288 1 34

Sliders are showing up everywhere

Screenshot 2024-05-18 223553.png

Screenshot 2024-05-18 223537.png

 

BSSCommerce-HDL
Shopify Partner
1042 350 418

This is an 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 😍😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
dreamtechzone_5
Shopify Partner
288 1 34

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.

Screenshot (61).png

Screenshot 2024-05-18 232500.png

Screenshot (60).png

BSSCommerce-HDL
Shopify Partner
1042 350 418

This is an 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: 

BSSTechVenture_0-1716076056697.pngBSSTechVenture_1-1716076117982.png

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 😍😍

 

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
dreamtechzone_5
Shopify Partner
288 1 34

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

Screenshot (62).pngScreenshot (63).png

BSSCommerce-HDL
Shopify Partner
1042 350 418

This is an 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 😍😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
dreamtechzone_5
Shopify Partner
288 1 34

It Worked. Thank you very much.