Featured collection design help

Solved

Featured collection design help

jeffreym
Pathfinder
98 2 19

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.pngPlease help as I am having troubles in the scheme settings to achieve this.

Accepted Solution (1)
Huptech-Web
Shopify Partner
930 187 196

This is an accepted solution.

Hello @jeffreymIn 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

 

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at [email protected] or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Replies 8 (8)

dws_pvt_ltd
Shopify Partner
329 65 91

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

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: [email protected].
For more information visit our website Dolphin Web Solution Pvt Ltd.
jeffreym
Pathfinder
98 2 19

hygiadental.com

melek

Sweans
Shopify Partner
406 79 123

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at [email protected] regarding any help.
- To know more about me check out www.sweans.com

Huptech-Web
Shopify Partner
930 187 196

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.


button.png

 

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

 

button-border.png

.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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at [email protected] or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
jeffreym
Pathfinder
98 2 19

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

Huptech-Web
Shopify Partner
930 187 196

This is an accepted solution.

Hello @jeffreymIn 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

 

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at [email protected] or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
jeffreym
Pathfinder
98 2 19

Thankyou kindly! works like a charm

Huptech-Web
Shopify Partner
930 187 196

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at [email protected] or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required