Help with full width content on Artisan Theme product page

Highlighted
Shopify Partner
9 0 0

I have a client with a large catalog and we have tables with multiple columns (10-12). When I make the table the content in smashed to the left. I thought if I could open up the product description to be full width I would have the option of creating the large table or inserting a large jpeg that runs the width of the page. PS, if I insert the jpeg currently it sizes it to the left and smashes it so it's not legible, there also isn't a scroll bar...  PSS, we have 5,000 products so I don't want to have to manipulate code on every product page.  Is there a code I can put in once and have it be set to the theme? Or do you have a plug in that has been effective?  I've looked at several and still have isssues with either the jpeg being cut off or the table not spanning with a slider bar...help?

 

Current View:

Screen Shot 2019-02-21 at 11.06.02 AM.png

Table as Jpeg which would be ideal so the table doesn't need to be recreated in Shopify:testagain.png

0 Likes
Tourist
6 1 1

Hi There,

 

Have you tried editing the description code on the product template page?

 

That would apply the change to all product description. Let me know if that helps.

0 Likes
Astronaut
875 104 193

If you can post a link to the page you're having an issue with it would and a password if it's password protected, it would help the forum members be better able to help you.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Partner
9 0 0

Thank you.  Do you happen to know the code snippet I should use? 

0 Likes
Shopify Partner
9 0 0

Thank you.  I have them hidden since they look so bad.  I put screen grabs in the thread. 

0 Likes
Shopify Partner
9 0 0

Hi, Do you happen to have the code for this fix?

0 Likes
Astronaut
875 104 193

I understand you have it hidden because you don't like the way it looks, but there's no way that anyone on the forums is going to be able to help you without being able to look at your html or the liquid code. Screenshots only show us what it looks like, not how it's put together. There isn't a catch all code that's going to be copy and paste for you because everyone's code is a little different.  If you're just trying to use that JPEG though, it should be relatively easy to get it to be the full width of your page, but again I wouldn't be able to tell you how to do it unless I could see it live on the site. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Partner
9 0 0

I understand.  The site is now live: https://www.aquaticed.com/ 

0 Likes
Shopify Partner
9 0 0

aquatic-equipment-design.myshopify.com

0 Likes
Astronaut
875 104 193

Okay well the picture you provided and the webpage sent are a little different. You showed the product description aligned to the left, on the store you provided the product description is aligned to the right, so I don't know if you made changes or not. But based on the store link you gave me, and using the image of the table you provided, you can get a full width image underneath your product description if you place it after the div with the class "product__details productText" so you'll be looking for that in your product.liquid file in the templates folder. If you see something like "{% include 'product-item' %} or include anything at all, the HTML may be housed inside an external snippet called "product-item.liquid". Anyway, once you locate 

<div class="product__details productText">
Product contents here
</div>

You will want to put your img tag inside a div underneath that closing div tag:

 

<div class="product__details productText">
Product contents here
</div>
<div class="product_table">
<img src="/c/image/serverpage/image-id/2177i0BA6EDE5C107DA67/image-dimensions/2500?v=1.0&amp;px=-1">
</div>

Then in the css you can set a style to that image at the bottom of style.scss.liquid in your assets folder:

 

.product_table img {
    width: 100%;
}

This will give you a full width image. However, this will still be undreadble on mobile. An option would be to create an alternative image that you swap out based on the screen size which could be viewed on mobile. Here's an image of me implementing it on your site

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes