Having trouble editing alignment and order of product attributes on collection Page, Brooklyn Theme

Anonymous
Not applicable
0 0 54

Hi,

 

I'm trying to edit the product attributes (Title, Vendor, Price) on Brooklyn theme. The HTML and CSS is so large.

 

Current

Screen Shot 2019-04-14 at 3.28.10 AM.png

Intended 

Screen Shot 2019-04-14 at 3.28.01 AM.png

 

I need it to be aligned to the left.

For each attribute is stacked, and the order to be title, vendor, price like in the second attachment.

To apply in both the collection pages and featured collection widget on the homepage.

 

 

 

 

 

 

0 Likes
Highlighted
Shopify Partner
1785 293 382

Hi,

Send me your store URL so i can check.

Or You can add like bellow css:

text-align:justify;

to align it left

Let me know if you can't 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
Shopify Partner
462 80 94

Go into edit code, open theme.scss.liquid file...

Go at the very bottom of this file, and new line add the following css rules.

 

.grid-product__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	text-align: left;
  .grid-product__title {
    order: 1;
    width: 100%;
  }
  .grid-product__price-wrap {
    order: 3;
    width: 100%;
  }
  .grid-product__price-wrap {
    order: 3;
    width: 100%;
  }
}


Don't forget to enable vendor showing in settings.

screenshot: 0NVYnMR

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes