Product page adjustments

Store Design
, , ,
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.