Change design of "View Full Details"

Store Design
, , ,
1

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
Skärmbild 2024-06-26 130436.jpg1908×812 123 KB

I appreciate any and all answers.

2

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 tag

RESULT:

Moeed_0-1719400994378.png
Moeed_0-1719400994378.png1310×771 258 KB

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

Best Regards,
Moeed

3

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
9.png1340×827 221 KB

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

4

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 tag and save.

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

Output -:

Anshul_arora_0-1719401859489.png
Anshul_arora_0-1719401859489.png1574×733 201 KB

I hope the code helps you.

Please share if you have any queries.

Thank you.

5

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

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.

7

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

8

Thank you Anshul, Wish you a great day.

9

Thanks a lot…!!!

10

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.

11

Hi would it be possible for you to reupload the code as I it is not showing up for me anymore.

12

Hey @clementgordon

Happy to help you out, feel free to share the details with me.

Best,
Moeed