Change design of "View Full Details"

Solved

Change design of "View Full Details"

Aiham
Excursionist
19 0 6

Hi, 

 

I would like to change the design of View full details in a featured product section, in this case called "Visa alla uppgifter" both on desktion and mobile. 

 

What I would like to achieve is: 

A button look with a background color of #334FB4 and the text and icon being in the middle of the button and the text color is set to #000000 and a border radius for the button of 10px. 

 

This is how it looks today: https://fjallochfena.se/pages/vara-lador

 

Pic:

Skärmbild 2024-06-26 130436.jpg

 

I appreciate any and all answers. 

Accepted Solution (1)

Rahul_dhiman
Shopify Expert
205 40 37

This is an accepted solution.

Hello @Aiham 
Go to online store ---------> themes --------------> actions ------> edit code-------> assets----->section-main-product.CSS ----> line number 1161
and add this code 

a.link.product__view-details.animate-arrow {
background: #334fb4;
color: #ffffff;
border-radius: 10px;
padding: 10px;
width: 185px;
}

and the result will be
9.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

View solution in original post

Replies 9 (9)

Moeed
Shopify Partner
4309 1106 1354

Hey @Aiham 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product__view-details {
    background: #334FB4 !important;
    width: 60% !important;
    padding: 10px !important;
    text-align: -webkit-center !important;
    border-radius: 20px !important;
}
</style>

RESULT:

Moeed_0-1719400994378.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Aiham
Excursionist
19 0 6

Thank you Moeed, this worked partially because text color is still default which is black. But thank you it is solved now. Wish you a great day.

Moeed
Shopify Partner
4309 1106 1354

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Aiham
Excursionist
19 0 6

Thank you Jamez, this did not work for. But thank you it is solved now. Wish you a great day.

Rahul_dhiman
Shopify Expert
205 40 37

This is an accepted solution.

Hello @Aiham 
Go to online store ---------> themes --------------> actions ------> edit code-------> assets----->section-main-product.CSS ----> line number 1161
and add this code 

a.link.product__view-details.animate-arrow {
background: #334fb4;
color: #ffffff;
border-radius: 10px;
padding: 10px;
width: 185px;
}

and the result will be
9.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Aiham
Excursionist
19 0 6

Thank you Rahul, this worked perfectly! Wish you a great day.

Rahul_dhiman
Shopify Expert
205 40 37

Thanks a lot....!!!

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

Anshul_arora
Navigator
449 127 93

Hello


I understand you are looking to highlight the "Visa alla uppgifter" text by providing the background color, text color.


You can implement this change by using below mentioned CSS code.


Add the code at the bottom of the theme.liquid file before </body> tag and save.

<style>

a.link.product__view-details.animate-arrow {
background-color: #334FB4;
color: #000000;
border-radius: 10px;
text-align: center;
padding: 7px;
}

</style>


[Please feel free to change the color and pixel size as per your needs.]


Output -:

Anshul_arora_0-1719401859489.png


I hope the code helps you.


Please share if you have any queries.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Aiham
Excursionist
19 0 6

Thank you Anshul, Wish you a great day.