Adding text (benefits) on product page

[timotheusb1]

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.

I want it to look like here:

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

[Moeed]

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

[timotheusb1]

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:

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:

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]

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]

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

[timotheusb1]

Hey @Moeed ,

https://www.bamboostar.de/products/bamboo-star-bambus-socken?variant=42055916880131

Thank you.

kind regards 

Tim

[Moeed]

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>

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

Best Regards,
Moeed

[timotheusb1 · 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