Product page adjustments

Store Design
, , ,

Topic summary

A user requested six specific design adjustments to their Shopify product page for a dental product:

Requested Changes:

  • Remove bold formatting from the price ($129 AUD)
  • Hide the “(1 in cart)” text near the quantity selector
  • Add a bordered box around the quantity section for improved visual appeal
  • Adjust price positioning closer to review stars
  • Reposition the “Add to Cart” button directly under the quantity section
  • Enable natural scrolling for the entire page instead of having a sticky description sidebar

Resolution:
Two community members (LizHoang and WebDeskSolution) provided CSS solutions to implement all requested changes. Both solutions involve adding custom CSS code to the theme’s base.css file, targeting specific elements like price formatting, quantity display, button positioning, and sticky column behavior.

The user confirmed the solution worked successfully. The issue has been resolved with working code provided.

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

Hi guys, here are a few things I would like adjusted on https://hygiadental.com/products/dental-pod page.
Below is 2 images of my page for reference and a quantity button that I like the look of.

Thank you in advance

  1. Change the $129 AUD from BOLD to normal txt.
  2. Remove the (1 in cart) text near quantity area,
  3. Have a box or something nicer to look at for the quantity section. ‘As shown in the picture below, is what I am wanting’.
  4. Move the $price slightly up a few pixels under the review starts.
  5. Move the add to cart button just under quantity section
  6. I would like the entire page to scroll naturally together instead of the right side description.

What I want
What I want442×176 2.31 KB

Things to change
Things to change1244×1330 88.1 KB

2

Hi @Anonymous

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file base.css and add this code at the end of the file
@media screen and (min-width: 750px) {
    .product__column-sticky {
        position: unset !important;
    }
}

span.price-item.price-item--regular {
    font-weight: unset !important;
}

span.quantity__rules-cart span {
    display: none !important;
}

quantity-input.quantity {
    border: 1px solid !important;
}

div#price-template--18361987661924__main {
    margin-top: -15px !important;
}

.product-form__buttons {
    margin-top: -10px !important;
}

Result:

LizHoang_0-1739441217396.png
LizHoang_0-1739441217396.png1407×894 131 KB

Best,

Liz

3

Great thankyou Liz!

4

Hello @Anonymous

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the theme you want to edit and then click Actions > Edit code.

  • Search base.css

  • Insert the provided CSS code at the end of the file and save the changes.

.product__info-container span.price-item.price-item--regular {
    font-weight: 400;
}
.product__info-container span.quantity__rules-cart span {
    display: none;
}
.product__info-container quantity-input.quantity {
    border: 1px solid;
    border-radius: 12px;
}
.product__info-container .price.price--large {
    margin-top: -15px;
}
.product__info-container .product-form__buttons {
    margin-top: 0;
}
@media screen and (min-width: 750px) {
.product .product__column-sticky {
    position: unset;
    }
}

Please hit Like and Mark it as a Solution if you find our reply helpful.