Dawn Theme: Main page price font size change and product page price/quantitybox center alignment

Store Design
1

Mainpagee Website url: https://monchermoi.com/

Product Page url: https://monchermoi.com/products/croissant-ring-chocolate

One extra question is how to move soldout badge for products on mainpage to top left of image.

best,

MCM

2

hello @iamdawnumcm

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-index .grid .product-item .product-item__link-wrapper .product-item__meta__inner .product-item__price-wrapper {
        font-size: 22px;
}
.template-index .grid .product-item .product-item__link-wrapper .product-item__meta__inner .product-item__sold-out {
    position: absolute;
    top: -50%;
}
3

Hi. Thanks a lot for your reply.

However, there is not a theme.css in Dawn theme.

Can you show me how to do it in Dawn theme?

  1. Main page price font size change smaller comparing to name. (https://monchermoi.com/?_ab=0&_fd=0&_sc=1)
  2. Product page price/quantity box needs to be center alignment.(https://monchermoi.myshopify.com/admin/themes/127341953207/editor?previewPath=%2Fproducts%2Fcroissant-ring-chocolate)

Best,

4

Hi Natztech,

I think it was my mistake to send you the link as the current theme Atlantic.

However, my questions are for the Dawn theme that I am building right now.

I have find out how to share the dev Dawn theme- website. The link is this :https://8cyko4c7mq67317h-42324328597.shopifypreview.com

Thanks again for you patience!

My questions are :

  1. Main page price font size change smaller comparing to name.
  2. Product page price/quantity box needs to be center alignment.

Best,

5

hello @iamdawnumcm

please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

.collection  .price__regular {
      font-size: 14px;
  }
  .product  .product__info-container .price.price--large{
      justify-content: center;
  }
  .product .product__info-container .quantity {
      margin: 0px  auto;
  }
6

Good Evening Natztech,

Those codes work perfectly fine for me!

I have two more questions.

  1. How can I align the sold out button on the main page to the top left corner instead of bottom left corner?

2.How can I have the permanent sticky logo + menu bar header when user scroll down&up?

Sincerely for your patience!

7

Good Evening Natztech,

Those codes work perfectly fine for me!

I have two more questions.

  1. How can I align the sold out button on the main page to the top left corner instead of bottom left corner?

2.How can I have the permanent sticky logo + menu bar header when user scroll down&up?

Sincerely for your patience!