Featured collection design help

[jeffreym]

Hi guys, I have asked this before though could not get the solution that I needed so I will try again.

I am wanting my home page featured collection section to look very clean with the Product image, name & add to card button. 
I want blue removed and turn't to white with a gold button and white text inside the button.

I would also like the button to be reduced to a small size that is more aesthetic instead of something chunky on this page.

Please help as I am having troubles in the scheme settings to achieve this.

[dws_pvt_ltd]

Hello @jeffreym, Please share your store URL and password.
So that I will check and let you know the exact solution here.

[jeffreym]

hygiadental.com

melek

[Sweans]

HI @jeffreym ,

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

If you need further assistance, feel free to reach out!

Regards,
Sweans

[Huptech-Web]

Hi @jeffreym , in order to achieve the desired design, you can simply follow these steps. First, navigate to your CSS file to make the necessary edits, and then add the provided code. Additionally, you can remove the :after from the button, as it is not necessary for this task.

.product-card-wrapper .card {
    background-color: transparent;
}
.product-card-wrapper .card .quick-add .button {
    background-color: gold;
    color: #fff;
    min-height: 4.5rem !important;
    font-size: 1.8rem;
    border-radius: 1rem;
    text-transform: capitalize;
    line-height: normal;
    padding: 0;
}

For reference, a screenshot of the design has been included for your convenience. Kindly review it.

To achieve a golden color button border, use the following code. However, you will also need to modify the font color.

.product-card-wrapper .card .quick-add .button {
    background-color: transparent;
    color: gold;
    border: 2px solid gold;
    min-height: 4.5rem !important;
    font-size: 1.8rem;
    border-radius: 1rem;
    text-transform: capitalize;
    line-height: normal;
    padding: 0;
}

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[jeffreym]

Hi thank you for helping me with this!

So I have placed the first code into css file at the buttom and it has changed the buttons slightly though it isnt perfect, I know have weird outer edges as displayed below.

[Huptech-Web · Accepted solution]

Hello @jeffreym, In order to achieve a design identical to the one shown above, you may eliminate the box-shadow property from the .button:after selector, as demonstrated in the code below.

.product-card-wrapper .card .quick-add .button::after {
    box-shadow: none !important;
}

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[jeffreym]

Thankyou kindly! works like a charm

[Huptech-Web]

@jeffreym , I am happy to assist you. Please do not hesitate to contact me if you have any further inquiries.