Dawn Theme - Product Page Formating

Dawn Theme - Product Page Formating

starpaint
Tourist
13 0 1

Hello I want to fix the formatting of the product page in the Dawn Theme.  
I have already changed the size of the main image and the column width but there are somethings in formatting I want to do to fix it without a page builder unless there is one for free. (I come from 20 years Wordpress designer new at Shopify)

 

Reference this product https://starpaint.de/products/einbrennofen-superdry-elektro

 

Fixes

  1. You see the product gallery  images are all different sizes, I want all as thumbnails same size underneath the main product image maybe with arrows if there is more than 2 or three images example http://starpaintde-staging.infy.uk/produkt/electron-pulverpistole-master-m-multi/   
  2. Or as an alternative the main product image and down in the right corner 1/3 or how many photos with arrows to go back and forth like this https://www.kleinanzeigen.de/s-anzeige/elektrischer-pulverofen-pulverabsaugung-foerdersysteme/240437...
  3. Then I want to add a request a quote / inquiry button under the pay buttons
  4. Last I want the description text underneath the the two columns above

I hope this is possible I referenced an idea as a 

shopify product layout-.jpg

 

If this is not possible can you recommend a free product page builder that is free ? 

 

Thanks

Replies 2 (2)

starpaint
Tourist
13 0 1

Ok this is how I am doing:  Learning liquid code and customizing the product page

 

#1. and 2. I installed a app to make the product image gallery as I wanted. this is good for now


#4. I hid the product description and created below the product information

</> Custom Liquid  and put 

<div  style="padding-left:100px;padding-right:10px">  {{ product.description }} </div>

 but on mobile it is not working so good and on desktop the left needs to be another 200px in, but then on mobile or tablet it sucks, maybe there is a class I can use ?

 

#3. I have not figured out how to put a custom button to request a quote or inquire yet

 

Anyone that can help in coding I would appreciate it.

 

starpaint
Tourist
13 0 1

Update:  I have got everything now except 

#4. I hid the product description and created below the product information

</> Custom Liquid  and put 

<div media="screen and (min-width: 750px)" style="padding-left:50px;padding-right:10px">  {{ product.description }} </div>

but the alignment is not good, maybe is a class=  I can use to keep it with the others or something else? 

 

and 

#3. I   figured out how to put a custom button to request a quote or inquire but I want to have the same size as the paypal button on desktop