Products: Left align product page elements
In Pipeline 3 and 4, the product descriptions are centred. If you prefer to have your elements left aligned, here are a few code snips you can add to change the alignment.
- 1
-
Left align list items
To make your bullet points left aligned, you can use the following code:
Before:
After:
Code to use:
/* -- code to left align bullets -- */
.product-description li {text-align:left;}
/* - end - */
- 2
-
Left align entire product description
Use this code to left align the entire product description:
/* -- code to left align product description -- */
.product-description {text-align:left;}
/* - end - */
- 3
-
Left align variant labels
If you'd like to left align the variant labels, use this code:
/* -- code to left align variant labels -- */
.template-product label { text-align:left; }
/* - end - */
Example result:
- 4
-
Left align variant options
If you'd like to left align the variant options in the drop-down, use this code:
/* -- code to left align variant options -- */
.selector-wrapper select,.product-form__variants {
text-align-last: left;
padding-left: 5px;
}
/* - end - */
Example result:
Example if both aligned left:
- 5
-
Left align vendor link
If you'd like to left align the vendor link, use this code:
/* -- code to left align vendor link -- */
.template-product #productInfo-product p {text-align:left}
/* - end - */
This should be used when also left aligning the product description as the vendor code will also left align the product description paragraph.
- 6
-
Left align Product title
If you'd like to left align the product title, use this code:
/* -- code to left align product title -- */
.template-product #productInfo-product h1 {text-align:left}
/* - end - */
- 7
-
Left align Product price
If you'd like to left align the product price, use this code:
/* -- code to left align product price -- */
.template-product h5.product__price {text-align:left;}
/* - end - */
Example after (price and title):
- 8
-
Left align add to cart button text and quantity heading
If you'd like to left align the product price, use this code:
/* -- code to left align add to cart button text and quantity heading -- */
.template-product .btn {text-align:left;}
/* - end - */
Example after:
Where do I add the code?
Use this link to learn where exactly to add this code snippet: