Full width description in Debut

David007
Shopify Partner
1 0 3

I think others may have posted similar, but cant find an answer. I would like to set my product pages as full width. I will attach the codes below

 

 

Replies 16 (16)

motorcitypc
Tourist
7 0 1

I have the same issue. Did you get any resolution with this problem?


@David007 wrote:

I think others may have posted similar, but cant find an answer. I would like to set my product pages as full width. I will attach the codes below

 

 


 

sehrish
Visitor
1 0 0

Hi

i want to download google shopping app but unable to find it in shopify. can you please help me 

Bemestar
Excursionist
17 1 17

Then what would you have a product picture in the middle and description bellow it?

Im also interested in doing something about how it looks but more interesting would be to have the product image follow the scrolling action and always be visible. That would be great!

Misfit_Code_Dev
Shopify Partner
289 22 56

Hey Everyone.

 

If you can make a mockup and provide your store link I would be happy to send an invite from my partner account to take a look at your store.  Based on your description I do not think it would be to hard to do.  As such, I would not charge you anything for it.

 

Best Regards,

Duncan.

Isle of Misfit Code & Development

Best Regards,
Duncan.
Isle of misfit code & development
http://ecomdev.ca
Joan-Carnegie
Visitor
3 0 0

Hello Dear Shopify Developers.

 

I use the minimal theme , 

I like it so much , but I would like to add some preferences on the store I have opened , 

 

would you help me with the codes and exact line to touch , and the file ..

this is what I would like to do

 

1> the slide show , I would like to have some more pixels for my slide pictures to show very well  as I wold really like that spirit be shared with the visitors of my stores to buy my products ,, quietness and so on , I would like to have some more pixels in   height,

 

2> the second thing is ,, I would like to have a slideshow button , as on the ``Brooklyn them`` ,, so that I could use that opportunity to have my clients buy directly using a link right upon the slide show rather than having them to produce any extra effort to go to the products ,to buy ,, a sort of call to action right in front ,,,

 

3> on the phone ,,``mobile`` display of my theme ,, ``Minimal ``,, the menu become ``superposed`` what I would like to avoid ,,because I think online clients are already so focused on many others of their person details on the net , not only , and the scarcity of time for many details of the numerical time we live in ,, they don`t care to give any utility in searching to scroll down menus to read them all and so on,, I have somehow noticed that the features ,,or here the ``menus`` right in-front helps solve for us all that problem whiteout and increases ``conversion`` better ,,so ,, this is my question ,, how would I on the minimal theme customize or retouch my codes to make the mobile display have its menu ,,``the home menus`` not be superposed but look as on the computer display ,, I mean ``a menu after an other ,,using the empty space after the logo in the header instead of going in the announcement bare and be superposed ,,

 

dear Guru ,, I love your helps so much , they have so so so much helped out here ///

so ,, Thanks for all the answer you`ve given already in many others post of yours,, 

 

socialfundfordevelopment77@gmail.com

 

questilar
Excursionist
21 1 13

I use the Debut theme and I had shopify do the change for me. After looking at the code I feel like an idiot for not even trying this. Super simple edit!!

 

this is the default.

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

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
    </div>
  </div>
</div>

Basically we are going to move the <div class="product-single__description rte"> below the end if and two divs. 

        

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
    </div>
  </div>

{% comment %}  moved product description to be full width {% endcomment %}
  <div class="product-single__description rte">
    {{ product.description }}
  </div>

</div>

This is the easiest change and it works like a charm!!

Katherine5
Visitor
2 0 3

This was soooo helpful! Thanks for the code - worked perfectly :-))

plehner93
Visitor
1 0 0

thank you for the code, this is perfect 🙂 

i have only one issue, if I do this my product.description text is on the right edge, and in the mobile version I can't read the first 2 letters on the lift side. 
do you know how to fix this issue? 

best regards, 
Patrick

questilar
Excursionist
21 1 13

It automatically works for me. Could you send me your code and I can help to see what's wrong?

NiOO
Tourist
4 0 1

Hello, I'm been trying all sorts of things to do this! So this sounds ideal but I'm really slow with the coding side, can you please explain where this code goes and show what the result looks like? THANK YOU.. 

 


@questilar wrote:

I use the Debut theme and I had shopify do the change for me. After looking at the code I feel like an idiot for not even trying this. Super simple edit!!

 

this is the default.

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

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
    </div>
  </div>
</div>

Basically we are going to move the <div class="product-single__description rte"> below the end if and two divs. 

        

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
    </div>
  </div>

{% comment %}  moved product description to be full width {% endcomment %}
  <div class="product-single__description rte">
    {{ product.description }}
  </div>

</div>

This is the easiest change and it works like a charm!!



@questilar wrote:

I use the Debut theme and I had shopify do the change for me. After looking at the code I feel like an idiot for not even trying this. Super simple edit!!

 

this is the default.

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

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
    </div>
  </div>
</div>

Basically we are going to move the <div class="product-single__description rte"> below the end if and two divs. 

        

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
    </div>
  </div>

{% comment %}  moved product description to be full width {% endcomment %}
  <div class="product-single__description rte">
    {{ product.description }}
  </div>

</div>

This is the easiest change and it works like a charm!!


 

questilar
Excursionist
21 1 13
I can definitely help you get this done.

We are going to go to edit theme code and find the product-template.liquid file in the sections theme.

On line 239 you will see the div class product-single__description. See image below.
[cid:image001.png@01D5E30A.3438E660]
We are going to move the div and place it on line 245 before the last closing div.
[cid:image002.png@01D5E30A.95290810]
That makes the description full width.
NiOO
Tourist
4 0 1

YOU ARE AMAZING!!

 

Thank you for your help. Worked a treat!

 

I don't suppose you know how to add tabs to the product page to or dynamic text which is product variant specific? 

 

Thanks again 🙂

airop
Visitor
1 0 0

Hi there. I think this is what we're all talking about.... I'm using the District theme

Here's the page

https://air-opportunity-adventure-co.myshopify.com/pages/adventures

 

I'm trying to get the 4 square images side by side instead of stacked. Any help greatly appreciated!

MiriCork
Visitor
1 0 0

Hey there everyone! I would like to do the same thing, putting the description full width but I am not good with code. 

I have tried myself but not sure what I am doing wrong. 

Here is a screenshot, if anyone could help I would appreciate it very much.

Thank you

Nadia

screenshotscreenshot

tyrone3
New Member
10 0 0

I would like to narrow the margins on my home page by half. making the background space smaller

 

please help. thank you


@David007 wrote:

I think others may have posted similar, but cant find an answer. I would like to set my product pages as full width. I will attach the codes below

 

 


 

elenasers
Visitor
1 0 0


Hello, I believe this is the topic of discussion. I'm currently using the District theme.

Here's the specific webpage: https://air-opportunity-adventure-co.myshopify.com/pages/adventures
My objective is to arrange the four square images next to each other horizontally, instead of having them stacked vertically. I would greatly appreciate any assistance with this!