Customization notes on product pages

Shopify Discussion

Topic summary

A user successfully added an optional “Special Requests” note field to product pages in the Craft theme, which carries through to cart and orders. They need help with two customization issues:

1. Selective Template Display:
Wants to control which product templates show the custom note section and which don’t. BSS-Commerce indicated this requires store access to suggest a solution based on the store’s specific logic.

2. Margin Adjustment:
The note section currently touches the “add to cart” button with no padding. BSS-Commerce provided a CSS solution:

  • Navigate to: Online Store > Theme > Edit code > Assets > section-main-product.css
  • Modify lines 463-465 by adding margin-top to .product-form__buttons
  • Suggested code:
.product-form__buttons {
  width: 100%;
  margin-top: 1.5rem;
}

Another user asked for clarification on where to input the original liquid code in the main-product.liquid section. The discussion remains open with the margin solution provided but template-specific display still requiring store access to resolve.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

I’m using the Craft theme and was able to add an optional note to my product pages where customers can input “Special Requests” and those notes carry through to My Cart and the Order as well. Two things I’m hoping someone out there can help with:

  1. How can I code it so I can choose which product templates have the custom note section and which don’t?

  2. How can I add an adjustable margin after the custom notes section. Right now, it touches the “add to cart” button, there’s no padding

The notes are almost perfect otherwise. I input the following code in the main-product.liquid section:

Special Requests

Thanks so much!

2

Hi @sashalynne

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

Thanks so much. It’s carmelgardensfloral.com

4

Hi @sashalynne

  1. This is related to your store logic. Can you kindly provide the access store so we can better suggest this part?

  2. You can adjust the margins of the custom notes section by styling the tag in the CSS file in the Edit Code. You can try it by going to Online Store > Theme > Edit code > Assets > selecting the file section-main-product.css. In lines 463 to 465 you can change with the following CSS code:

.product-form__buttons {
    width: 100%;​​​​​​
    margin-top: 1.5rem;
}​​​​​​

You can reasonably change the value of the margin-top. Save and check the result.

The result will be as follows:

view - 2023-02-07T144934.319.png
view - 2023-02-07T144934.319.png1894×962 165 KB

I hope that this can help you solve the issue.

5

Where did you input this code? I found the main-product.liquid section but where in that code should I try it?