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.