help with my product page

Shopify Discussion

Topic summary

A Shopify store owner is trying to add white box styling around sections on their product page’s right-hand side and make buttons editable to display custom text or dollar amounts. They successfully implemented this design on two sections but cannot replicate it on others.

Current Issue:

  • Cannot remember which code section was modified originally
  • Unable to locate the relevant code to apply the same styling to remaining sections

Solution Provided:
A Shopify expert (rajweb) suggested:

  • Wrapping content in consistent <div> containers with styling classes (background, padding, border-radius, shadow)
  • Using Liquid variables or product metafields to make button text/amounts dynamic
  • Adding theme settings in the section schema for easy editing
  • Implementing reusable Liquid/Section blocks for consistency

Status:
The original poster has offered to provide store access to help identify the correct code location. The discussion remains open as they await assistance with implementation.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

hi im trying to put the white box around the sections on the right hand side and make the button that is there editable to put words or a $$ amount. ive managed to get it to work on 2 sections but not the others. ive attached the screen shot of my page and what im trying to get it to do . any help?

Screenshot_19-5-2025_152614_admin.shopify.com.jpeg
Screenshot_19-5-2025_152614_admin.shopify.com.jpeg1587Ă—887 136 KB

Screenshot_13-5-2025_13496_odinplunge.com.jpeg
Screenshot_13-5-2025_13496_odinplunge.com.jpeg937Ă—1458 104 KB

1 Like
2

Hey @NORDICWELLNESS ,

Thanks for reaching out!

From the screenshots you’ve provided, I can see that you’re aiming to create a clean white box layout on the right-hand side of the product page (similar to the second screenshot), with a customizable button where you can easily update the text or a $$ value like “50% Deposit – $4,475.00 AUD”.

It looks like you’ve successfully achieved this for two sections, but are having trouble applying the same styling and editable button functionality to the other sections.

Steps to Apply White Box Styling to All Sections:

  1. Wrap your content in a container

    with consistent classes that apply the background color, padding, border-radius, and shadow (e.g., bg-white p-6 rounded-lg shadow-md).

  2. Ensure spacing is consistent between these containers using margin classes like mb-6 or mt-4.

  3. Use reusable Liquid or Section blocks so the structure remains consistent across product templates.

  4. Make the button content dynamic using Liquid like this:

You can set a custom metafield (custom.deposit_label) per product to change the button text easily.

For Button Text and Amount:

Either make the button text editable via a theme setting in the schema of the section:

{
  "type": "text",
  "id": "button_text",
  "label": "Button Text",
  "default": "Place Your 50% Deposit Now"
}

Or pull from product metafields, which is better if the price/label changes per product.

If you’d like me to implement this across your theme and ensure all the product pages follow the same clean layout, please feel free to reach out to me anytime. I’d be happy to help set it up.

Thanks and best regards,

Rajat

Shopify Expert

3

hi rajat, thanks so much for that. i cant remeber how i did the other ones and cant seem to find the section in the code to make the ammendments.

4

hi Samuel,

im not to sure because i cant remeber how i did this to start with . i cant remeber which part of the code it is in. did you want me to give you access to see if you know what it is?

5

do you want me to give you access to see which it is?