Dawn Theme - help with Product Page customization

Store Design
, ,
1

Hi

I am new to Shopify coming from Wordpress

I customized the shop product page so that the description is under the the two columns but I need help fixing two things ref: https://starpaint.de/products/einbrennofen-superdry-elektro

</> Custom Liquid and put the code

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

  1. I want to change the alignment on the left and right side - the text is too stretched out I want it to be the same like https://starpaint.de/collections/superdry-einbrennofen and I want it to work nice on mobile and tablets

  2. I added a request a quote button but I can’t figure out how to get it to be the same size as the paypal (on mobile it is ok) I used a large button setting

2

Hi @starpaint

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
a.button.button--full-width.button--primary {
    max-width: 44rem !important;
}
.section-template--24147421069649__custom_liquid_pxaywX-padding div, .section-template--24147421069649__custom_liquid_pxaywX-padding div h2,.section-template--24147421069649__custom_liquid_pxaywX-padding div p {
    text-align: left !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

3

Thanks for your help

The button looks great

but the text is still too wide - I like it to be aligned on the left like this page and other pages https://starpaint.de/collections/superdry-einbrennofen

I appreciate your response

4

Hi @starpaint

Please follow these steps

  1. Replace their Custom Liquid code with the following:
  {{ product.description }}

Result: https://prnt.sc/k_oB6U3YF-mz

  1. Use the following code to fix the issue on mobile:
@media screen and (max-width: 768px) {
  .product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
    max-width: 100% !important;
    padding-left: 0 !important;
  }
}

Result: https://prnt.sc/Z30BwIacPxyN

I hope this helps

Best,

Daisy

5

Thank you very much this works perfect