How do I centre align the product media in Dawn?

How do I centre align the product media in Dawn?

StevenAllen1396
Visitor
3 0 0

How can I move the image of the book so it is below the title and above the price and centre aligned?

 

Obviously I want to edit the default podcut page template css so it is the same for all my products.

 

StevenAllen1396_0-1718802516056.png

 

Replies 5 (5)

Moeed
Shopify Partner
4351 1121 1375

Hey @StevenAllen1396 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
StevenAllen1396
Visitor
3 0 0

Thanks for picking this up Moeed.

 

URL: https://quillford.com/products/from-couch-to-marathon-your-ultimate-guide-to-running-26-2-miles

 

I've just removed the password.

Bontalexel31
Shopify Partner
23 1 1

Hey @StevenAllen1396,

Could this be what you are looking for? Please let me know if you need more help.

Screenshot from 2024-06-19 17-25-24.png

Show Variant Options as Text or Colored Swatches with Add to cart Button on Home and Collection Page
Install it now for free!
Swatch Display: https://apps.shopify.com/swatch-display
Bontalexel31
Shopify Partner
23 1 1

I added some changes to make the content centered on the page. it looks now like this. Let me know if this is what you need by leaving a like or a reply or setting this reply as a solution. I will insert the CSS code below the picture.

Screenshot from 2024-06-19 17-39-56.png

the CSS code goes like this:

```const originalNode = document.querySelector('#GalleryViewer-template--22707358040387__main');

const cloneNode = originalNode.cloneNode(true);

const parentNode = document.querySelector('#ProductInfo-template--22707358040387__main');

parentNode.insertBefore(cloneNode,parentNode.children[2]);

originalNode.remove();

```

Show Variant Options as Text or Colored Swatches with Add to cart Button on Home and Collection Page
Install it now for free!
Swatch Display: https://apps.shopify.com/swatch-display
StevenAllen1396
Visitor
3 0 0

Hi thanks for this. I have copied your CSS code into the Custom CSS in the block editor and it doesn't appear to be working for me.

I would also like the title and descript text, and images not to be squashed into a narrow column of the page. But to take up around 75% of the page.