MOTION THEME - Product - Information / design adjustement

Solved

MOTION THEME - Product - Information / design adjustement

lion_no
Explorer
58 6 19

Hello!
I'm trying to figure out how to adjust design choices for the products.

Change placement of text, and if possible 2 different designs.
Currently looks like this:

lion_no_2-1634648658473.png


but would love the option to adjust it like this:

lion_no_3-1634648702474.png


Preview link - https://28x38yzbem51frl6-50647859379.shopifypreview.com/collections/archive?sort_by=created-descendi...

NOTE: Would like this design adjustment for all products, ex. both on frontpage and collection pages, so its likely a change directly on the product configuration

Accepted Solution (1)

Zworthkey
Shopify Partner
5581 642 1577

This is an accepted solution.

Hii, @lion_no 
Paste this code on top of the theme.scss file.

.grid-product__meta {
    text-align: center !important;
}

Thank You.

View solution in original post

Replies 5 (5)

Zworthkey
Shopify Partner
5581 642 1577

This is an accepted solution.

Hii, @lion_no 
Paste this code on top of the theme.scss file.

.grid-product__meta {
    text-align: center !important;
}

Thank You.

lion_no
Explorer
58 6 19

Thanks @Zworthkey !
That seems to have sorted out the placement of the text at least 🙂
(You can see it is now centered in the preview link)

Any idea how I could add a bold text to the product name?

Zworthkey
Shopify Partner
5581 642 1577

@lion_no 
Paste this code on top of the theme.scss file.

.grid-product__title {
    font-weight: bolder !important;
}

Thank You.

christian_russo
Pathfinder
203 1 42

hi! 

 

is it also possible to make the price bold?

dmwwebartisan
Shopify Partner
12321 2552 3729

@lion_no 

Code for mobile product page.

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

@media only screen and (max-width: 589px){
.product-single__meta {text-align: center;}
.js-qty__wrapper {text-align: center;margin: 0 auto;}
}

Thanks!