What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Featured Collection change Slider Navigation Design

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
512 86 79

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.

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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
Pathfinder
95 8 12

@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
512 86 79

Hi,

 

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

 

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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
512 86 79

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

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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
512 86 79

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.

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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
512 86 79

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

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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
512 86 79

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!

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
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