Debut Theme: How to Left-Align Product Page Elements

Technical Q&A
1

Hi,

We have a customer who would like to position the Title, Price, Description, Add to Cart button on the left side. Currently, these elements are centered on the page. We don’t want to change other page elements, only the product page. I’d appreciate any suggestions on how to go about doing this.

Here’s the current site: Shop – Miss Careful

2

Here are the relevant css changes:

.index-section--featured-product-slider .description-content {
    text-align: left;
}

.index-section--featured-product-slider .price__regular {
    margin: 0;
}

.index-section--featured-product-slider .product-form__item--no-variants {
    margin: 0 0 0 -6;
}

Test with out-of-stock and discount price scenarios to make sure you like the way things look.

The first change aligns the text, the second change aligns the price and the third aligns the ‘Add to Cart’ button.

3

Thank you for the code.

I tested the first and second css code on a backup copy of the store and didn’t see any changes. These changes are to be done in the theme.scss.liquid yes?

4

I recommend creating a new css file and adding the styles there. Just make sure that the new css file is loaded after theme.css.

These changes will also work inline with the style attribute.

Hope this helps.