MOTION THEME - Product - Information / design adjustement

Solved
lion_no
Explorer
55 5 18

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)

Accepted Solutions
Zworthkey
Shopify Partner
2567 309 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

Replies 4 (4)
Zworthkey
Shopify Partner
2567 309 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

lion_no
Explorer
55 5 18

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
2567 309 641

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

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

Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
dmwwebartisan
Shopify Partner
9824 2236 3073

@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!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →