Solved

Featured Collection change Slider Navigation Design

marcelk
Shopify Partner
10 0 1

Hello,

we are using the Minimog Theme and wanted to edit the Design (Background Color, Icon, Size and add Text) of the Slider Navigation Buttons as well as the Pagination.

 

Thanks for help in advance 🙂

 

Bildschirmfoto 2024-04-18 um 09.55.17.png

Accepted Solution (1)
TerenceKEANE
Shopify Partner
341 66 58

This is an accepted solution.

Looks like it worked! Feel free to play around with the values to achieve your desired outcome.

 

The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I'll help.

 

Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below codes.

 

shopify.base.css.jpg

TerenceKEANE_0-1713514089828.png

 

/*  main blog color */

 

 

#template--20342885810513__featured_collection_TzcJnA .m-product-card {

    background: antiquewhite;

}

 

/*  meta field center  */

 

#template--20342885810513__featured_collection_TzcJnA .m-product-card .m-product-card__content {

    padding: 10px;

    text-align: center;

}

 

/*  icon center  */

 

#template--20342885810513__featured_collection_TzcJnA .m-product-card .m-product-card__content .m-product-option {

    justify-content: center;

}

 

/* change icon size */

 

#template--20342885810513__featured_collection_TzcJnA .m-product-card .m-product-card__content .m-product-option .m-product-option--swatch .m-product-option--node__label {

    width: 35px;

    height: 35px;

}

 

 

/* slider nav */

 

 

.m-slider-controls__button {

    background: blueviolet;

    color: white;

}

 

 

.swiper-pagination .swiper-pagination-bullet:before {

    width: 15px;

    height: 15px;

}

 

 

.swiper-pagination .swiper-pagination-bullet-active:after {

    width: 26px;

    height: 26px;

}

 

 

Terence.

 

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 11 (11)

Hardik2903
Excursionist
55 6 7

@marcelk  I can help you to update the design.

marcelk
Shopify Partner
10 0 1

If you just could tell me where i can edit it i could do it myself, got some css skills

TerenceKEANE
Shopify Partner
341 66 58

Hi,

 

If you can send me the link to your website, I will try to help!

 

Terence.

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
marcelk
Shopify Partner
10 0 1

Hey, thanks the website is https://3d-firmenlogo.de/

TerenceKEANE
Shopify Partner
341 66 58

On which page is the slider area shown in the image above? I don't see such an area on the homepage.

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
marcelk
Shopify Partner
10 0 1

https://3d-firmenlogo.de/pages/3d-firmenlogos 

At the bottom of the Page th wodden logo collection.

TerenceKEANE
Shopify Partner
341 66 58

This is an accepted solution.

Looks like it worked! Feel free to play around with the values to achieve your desired outcome.

 

The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I'll help.

 

Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below codes.

 

shopify.base.css.jpg

TerenceKEANE_0-1713514089828.png

 

/*  main blog color */

 

 

#template--20342885810513__featured_collection_TzcJnA .m-product-card {

    background: antiquewhite;

}

 

/*  meta field center  */

 

#template--20342885810513__featured_collection_TzcJnA .m-product-card .m-product-card__content {

    padding: 10px;

    text-align: center;

}

 

/*  icon center  */

 

#template--20342885810513__featured_collection_TzcJnA .m-product-card .m-product-card__content .m-product-option {

    justify-content: center;

}

 

/* change icon size */

 

#template--20342885810513__featured_collection_TzcJnA .m-product-card .m-product-card__content .m-product-option .m-product-option--swatch .m-product-option--node__label {

    width: 35px;

    height: 35px;

}

 

 

/* slider nav */

 

 

.m-slider-controls__button {

    background: blueviolet;

    color: white;

}

 

 

.swiper-pagination .swiper-pagination-bullet:before {

    width: 15px;

    height: 15px;

}

 

 

.swiper-pagination .swiper-pagination-bullet-active:after {

    width: 26px;

    height: 26px;

}

 

 

Terence.

 

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
marcelk
Shopify Partner
10 0 1

Thank you mate 🙂

TerenceKEANE
Shopify Partner
341 66 58

you are welcome. let me know if you need further assistance. 😉

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
marcelk
Shopify Partner
10 0 1

Do you know why my css code looks like that? I don´t really know how to edit it in that formatBildschirmfoto 2024-04-19 um 10.25.07.png

TerenceKEANE
Shopify Partner
341 66 58

I see that all the codes are on one line. You can add the codes I sent to the second line. If you can't do it, let me know!

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites