Center product description under photos and product info- dawn 11.0.0

Store Design
, , , ,
1

On my website I had it set up so the description was under the product info and fit across the bottom of the container. It changed at some point and I just noticed now. How do I move it back?

Screenshot (3).png
Screenshot (3).png1614Ă—818 188 KB

1 Like
2

Hi @lilyandtwitch

Could your share your store URL?

3

Hi @lilyandtwitch

Would you mind to share your Store URL website? with password if its protected. Thanks!

4

HI,

We need to customize the product template to move the product description under photos.

5

https://elillustrations.com/

6

EL Illustrations

1 Like
7

Thank you for the information. You can try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product.product--small.product--left.product--thumbnail_slider.product--mobile-hide.grid.grid--1-col.grid--2-col-tablet {
    flex-direction: column;
    align-items: center;
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

8

Thanks but I only want to move the description. The rest I want to stay where it is.

1 Like
9

Oh, Okay only the description you like to center down the product image and info right?

Try this one then.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (min-width: 750px) {
.product:not(.product--no-media):not(.featured-product) .product__description {
    position: relative;
    width: 200%;
    right: 100%;
    margin-top: 160px;
}
.pi {
    text-align: center !important;
}
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

10

@lilyandtwitch

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

.product__description.rte.quick-add-hidden {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pi {
    display: flex;
    align-items: center;
    flex-direction: column;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

11

Its moving it to the left but not increasing the width and it only works in theme.liquid. Also on the customize page it shows centered but on the site its to the left.

Screenshot (5).png
Screenshot (5).png1920Ă—858 223 KB

1 Like
12

I have found the solution:

In main-product.liquid- find

right before that paste:

{%- if product.description != blank -%}
	
		## Description	
		
		{{ product.description }}
		

	

	
{%- endif -%}

Then the description will be below the product photos and info and you can customize it like normal.

Here’s where I found it:

https://ezfycode.com/blog/dawn-theme-show-description-below-images

13

Please add this code.

.product:not(.product--no-media):not(.featured-product) .product__description {
    max-width: 200% !important;
}

Yeah, you can try also to paste in liquid.