Solved

Adding text (benefits) on product page

timotheusb1
Excursionist
23 2 5

Hey there.

 

I am trying to add a little Text on my product field.

 

Below the price and above the color selection I want to list 5 benefits.

foto attached 1.JPG

 

I want it to look like here:

foto attached 2.JPG

 

I have been browsing the internet and youtube for hours and can not find the solution.

I have no problem adding a little code snippet, I just need to know where to place it and what the right configurations are.

 

I use the old Debut Theme, and would not like to switch.

 

I would be sooo happy to find some help here

 

Wish you a great day
Tim

Accepted Solution (1)
timotheusb1
Excursionist
23 2 5

This is an accepted solution.

Hi Moeed,

 

yes it worked. thank you so much, I am very grateful for your help.

Have a nice day!

Kind regards

Tim

View solution in original post

Replies 8 (8)

Moeed
Shopify Partner
3697 932 1166

Hey @timotheusb1 

To add some text below the price and above the color selection in your product field on the Debut theme, you can follow these steps:

 

  • From your Shopify admin, go to "Online Store" and select "Themes."
  • Under the "Actions" dropdown, click on "Edit code" for the Debut theme.
  • In the theme editor, navigate to the "Sections" directory and open the file called 'product-template.liquid'.
  • Look for the section of code where the price and color selection are being displayed. This section might vary depending on your theme version, but it could be something like:
{% section 'product-template' %}
  • Inside that section, find the appropriate location to add your text. You can add the following code snippet to display your 5 benefits:
<div class="product-benefits">
  <h3>Benefits:</h3>
  <ul>
    <li>Benefit 1</li>
    <li>Benefit 2</li>
    <li>Benefit 3</li>
    <li>Benefit 4</li>
    <li>Benefit 5</li>
  </ul>
</div>
  • Adjust the styling of the added text using CSS. You can do this by going to the "Assets" directory and opening the 'theme.scss.liquid' file. Add the following CSS code snippet at the bottom of the file:
.product-benefits {
  margin-bottom: 20px;
}

.product-benefits h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-benefits ul {
  list-style-type: disc;
  margin-left: 20px;
}
  • Save your changes and preview your product page to see the added text.

By following these steps, you should be able to add the desired text below the price and above the color selection in your product field on the Debut theme. Make sure to adjust the content and styling to fit your specific needs. 

If you need any additional assistance, please don't hesitate to reach out. I'm here to help you resolve any further issues you may encounter.

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
timotheusb1
Excursionist
23 2 5

 

Hi Moeed,

 

thank you soo much for your help. I am very grateful for it.

 

I implemented the changes in the Code and it almost looks perfect.

I do not find a "Theme.scss.liquid" file in my asset folder, but I think it might not be a problem, because the styling is already just as I wanted it to be. 

Here is how it looks:

timotheusb1_3-1685796515698.png

 

The only small thing I would like to change is: Bringing down the Benefits by 1 Line, so they dont start exactly below the narrow grey arrow above, but 1 Line below that, just as In my example picture:

timotheusb1_4-1685796619962.jpeg

Do I need to make that change in the code or at the styling? 
Could you tell me how to make the text drop by 1 Line?

 

I hope I could articulate my point clearly. Thank you soooo much for your help, I am amazed really.

Kind regards

Tim

 

timotheusb1
Excursionist
23 2 5

Hi @Moeed , just checking if you have seen the message. I forgot to tag you, ups.

I am grateful for any help

Kind regards 
Tim

Moeed
Shopify Partner
3697 932 1166

Hey @timotheusb1 
Kindly share your Store URL and Password if enabled

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
timotheusb1
Excursionist
23 2 5
Moeed
Shopify Partner
3697 932 1166

Hey @timotheusb1 

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-benefits {
    margin-top: 20px !important;
}
</style>

Capture.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 developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
timotheusb1
Excursionist
23 2 5

This is an accepted solution.

Hi Moeed,

 

yes it worked. thank you so much, I am very grateful for your help.

Have a nice day!

Kind regards

Tim

HHloot
Excursionist
20 0 4

Hello, I don't have the same theme but can't seem to find the "product-template.liquid" folder on my editor. Is it because of an update and they replaced the name of the folder ?