Featured collection design help

Store Design
,
1

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.

Screenshot 2024-07-22 at 4.15.24 PM.png
Screenshot 2024-07-22 at 4.15.24 PM.png3360×1634 502 KB

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

2

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

3

HI @Anonymous ,

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

4

hygiadental.com

melek

5

Hi @Anonymous , 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.

button.png
button.png1318×550 250 KB

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

button-border.png
button-border.png1314×554 245 KB

.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

6

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.

Screenshot 2024-07-23 at 3.32.00 PM.png
Screenshot 2024-07-23 at 3.32.00 PM.png3360×1208 385 KB

7

Hello @Anonymous , 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;
}

button_updated_design.png
button_updated_design.png1260×577 214 KB

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

1 Like
8

Thankyou kindly! works like a charm

1 Like
9

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