Debut Theme - product page layout

[grayneandco]

On the product page the shipping calculated at checkout/product size/quantity/ and are all at the top right and the product description is underneath it.  Is there a way that I could remove the "shipping calculated at checkout" as well as switch around the product size/quantity and product description?  I have attached a photo to show what it is like now.  Thanks in advance.

[Bo]

Hey there, @grayneandco 

Bo here from Shopify Support!

Thank you for reaching out, that is a great question and is most definitely something that can be achieved with just a little bit of coding. I was just curious, why do you want to achieve moving the description above the call to action buttons? Our design team recommends having the call to action buttons at the forefront of the page as it actually has proven to improve conversion - customers sometimes want to add to cart immediately and if they have to scroll to do so, they can be dissuaded. 

This tutorial is specific to an unedited version of the Debut theme, version 12.2.1. We cannot guarantee results for themes that have been modified with custom coding and/or apps. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial, or wish to make any variations to this tutorial.

To get rid of the shipping and taxes text you will first need to go to the theme editor.

• Go to Online Store > Current Theme > Actions > Edit Code.
• From here you will open the Sections folder > product-template.liquid. You are going to look for:

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}

• You should be able to find this on line 121. Right before this line add {% comment %}.
• You will then need to scroll down to line 130 and add {% endcomment %} to the end of that line. The finished code should look like this:

 {% comment %}   {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            <div class="product__policies rte">
              {%- if shop.taxes_included -%}
                {{ 'products.product.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            </div>
          {%- endif -%} {% endcomment %} 

• Click Save.

Now, to move the description we will be working on the same theme file so you can remain in the product-template.liquid. 

• Search for the following code in your theme and cut it:

        <div class="product-single__description rte">
          {{ product.description }}
        </div>

• Paste it right after the code we edited to get rid of the tax and shipping disclaimer, right before  {% capture "form_classes" -%}. The code should look like this once we are done: 

       {% comment %}   {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            <div class="product__policies rte">
              {%- if shop.taxes_included -%}
                {{ 'products.product.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            </div>
          {%- endif -%} {% endcomment %} 
        
 <div class="product-single__description rte">
          {{ product.description }}
        </div>
        
          {% capture "form_classes" -%}
            product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
          {%- endcapture %}

• Click Save.

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

All the Best,

Bo

[grayneandco]

Thank you for your reply. I never thought about it that way as I see most
underneath the description.

I will work on editing the code and will let you know if I require any more
help.

Thanks
Laura 😊

[grayneandco]

Hi Bo, I have another question.  

When it comes to the logo in the header, I have increased the size to the largest it lets me but it still seems a bit small to me.  It is hard to read the smaller writing.  Is there a way I can change how much larger I would like it to be and if so how would I know how many pixels the pic should be to have the right clarity?

Thanks

Laura

---

[Bo]

Hey again, @grayneandco 

That is a great question! What you will want to do is add a little code to the end of your theme.scss.liquid. 

NB When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code.

• Go to Online Store > Themes > Current Theme.
• Once in the theme editor open the Assets folder > theme.scss.liquid.
• At the very bottom of the file add the following code:

.site-header__logo-image img {
max-width: 500px !important;

}

• Click Save.

You can now take a look at your theme and the logo! You can, of course, adjust the 500px to whatever number you would like, larger or smaller, to your liking. 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

All the Best,

Bo

[grayneandco]

Hi Bo

Thanks for the info. I went in there and added the code and nothing has
changed. I also added the css to the bottom and then it gave me an error
code so I removed it but when I had that in there I could see that it made
my main screen extremely large

Laura

[Bo]

Hey there, Laura 

I am sorry to hear that this has not worked for you. Can you please confirm what version of Debut you are using? It may be best if I escalate this to our theme team, to do so I will need to email you, would that be ok with you? 

All the Best,

Bo

[grayneandco]

Hi Bo

The version I am using is 12.0

Here is my email address for contact. laura@grayneandco.ca

thanks
Laura :)

[Bo]

Thank you for that, Laura! 

I have just gone ahead and reached out via email. If you could respond there, that would be great! 

All the Best,

Bo

[Nyfter]

That's a great solution!
I got an additional question.
Because I moved the product description up, I have no space to put some text beneath it. 

How do I add a textfield below? In the best case I would like to be able to edit rich text into it and not just blank html.