Featured Collection change Slider Navigation Design

[marcelk]

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 🙂

[Hardik2903]

@marcelk  I can help you to update the design.

[marcelk]

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

[TerenceKEANE]

Hi,

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

Terence.

[marcelk]

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

[TerenceKEANE]

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

[marcelk]

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

At the bottom of the Page th wodden logo collection.

[TerenceKEANE · 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.

/*  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.

[marcelk]

Thank you mate 🙂

[TerenceKEANE]

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

[marcelk]

Do you know why my css code looks like that? I don´t really know how to edit it in that format

[TerenceKEANE]

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!