How to put in the left align on the product page?

How to put in the left align on the product page?

VisarK
Pathfinder
95 0 20

Hello Community,hope all are good.I use Dawn theme and in my product page i want the product title,prices,shipping calculated at checkout, and the quantity with selector button to put in the left align.

Screenshot_20240705_175522_Chrome.jpg

Replies 13 (13)

Made4uo-Ribe
Shopify Partner
6841 1634 2014

Hi @VisarK 

Check this one. 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

#shopify-section-template--22723455385903__main {
    text-align: left;
}
.product-form__input .form__label {
    text-align: left !important;
}
.product-form__input .quantity {
    margin-left: 0;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1720195789240.png

     

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
VisarK
Pathfinder
95 0 20

It doesnt work @Made4uo-Ribe 

WizzCommerce_Co
Excursionist
49 8 11

Hi @VisarK , You can follow my instruction below:

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: Click on theme.liquid and paste the code above the </head>

 

 

<style>
.product-card-wrapper .card__information {
    text-align: left !important;
}
.product-card-wrapper .card__heading, .product-card-wrapper .price {
    text-align: left !important;
}
.product-form__input .quantity {
    text-align: left !important;
}


</style>

 

If my answer is working for your store, please let me know by accepting Solution and giving Like !!!

Check here Wizzcommerce App to optimize your store: SnapNoti FOMO Visitor Counter | SnapBundle Volume Discounts | Wizz Flash Sale & Price Edit | BOGO+ | Buy X Get Y Free Gift
Find more support, feel free to contact: support@wizzcommerce.io
If our suggestion is useful for your problem, please let us know by giving Like and Accept Solution !!!
VisarK
Pathfinder
95 0 20

I tried but still doesnt work @WizzCommerce_Co 

Made4uo-Ribe
Shopify Partner
6841 1634 2014

Please, check this one again. Thanks!

.product__title, .jdgm-preview-badge--with-link {
    text-align: left !important;
}
.product-form__quantity .form__label {
    text-align: left !important;
}
quantity-input.quantity {
    margin-left: 0 !important;
}

And Save. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
VisarK
Pathfinder
95 0 20

I tried now doesnt work @Made4uo-Ribe .The word shipping calculated at checkout must be under prices on the left,and quantity also in the left so i tried with this but still is the same quantity in the center and shipping calculated at checkout right side 

WizzCommerce_Co
Excursionist
49 8 11

Hi @VisarK , thank you for posting here!

You can follow my instruction below:

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: Asset folder, open the base.css -> place the code below at the very bottom of the file.

 

#shopify-section-template--22723455385903__main {
    text-align: left;
}
.product-form__input .form__label {
    text-align: left !important;
}
.product-form__input .quantity {
    margin-left: 0;
}

 

If my answer is working for your store, please let me know by accepting Solution and giving Like !!!

Check here Wizzcommerce App to optimize your store: SnapNoti FOMO Visitor Counter | SnapBundle Volume Discounts | Wizz Flash Sale & Price Edit | BOGO+ | Buy X Get Y Free Gift
Find more support, feel free to contact: support@wizzcommerce.io
If our suggestion is useful for your problem, please let us know by giving Like and Accept Solution !!!
VisarK
Pathfinder
95 0 20

Doesnt work @WizzCommerce_Co 

WizzCommerce_Co
Excursionist
49 8 11

Hi @VisarK , You can follow my ANOTHER instruction below:

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: Click on theme.liquid and paste the code above the </head>

<style>
.product-card-wrapper .card__information {
    text-align: left !important;
}
.product-card-wrapper .card__heading, .product-card-wrapper .price {
    text-align: left !important;
}
.product-form__input .quantity {
    text-align: left !important;
}


</style>

If my answer is working for your store, please let me know by accepting Solution and giving Like !!!

Check here Wizzcommerce App to optimize your store: SnapNoti FOMO Visitor Counter | SnapBundle Volume Discounts | Wizz Flash Sale & Price Edit | BOGO+ | Buy X Get Y Free Gift
Find more support, feel free to contact: support@wizzcommerce.io
If our suggestion is useful for your problem, please let us know by giving Like and Accept Solution !!!
VisarK
Pathfinder
95 0 20

I tried also but still the same @WizzCommerce_Co 

VisarK
Pathfinder
95 0 20

My store url is www.pawshubs.com

BSSCommerce-TC
Shopify Expert
206 45 45

Hi @VisarK ,

You can follow these steps

Step 1: Please navigate to Online store > Themes > Edit code and find base.css

Step 2: Insert code at the end file and Save them.

.product__title > h1 {
    text-align: left;
}

.product-form__quantity .form__label {
    text-align: left !important;
}

.product-form__input.product-form__quantity {
    display: grid;
    justify-content: flex-start;
}

 

It like that:

BSSCommerceTC_0-1720212943849.png

 

BSSCommerceTC_1-1720212976626.png

 

We're happy to see that our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution? This can be a reference for other merchants if they have an issue like you.

Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon.

 

Thanks in advance.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
VisarK
Pathfinder
95 0 20

Hi @BSSCommerce-TC Shipping is like in photo,but must be under prices and in the left align also quantity isnt chang