Adjust Column Width on Product Page

[pliersandstring]

Hello!

I'm hoping to adjust column width on our product pages – reducing the text column width (decreasing font size to accomodate, natch) and increasing product image size (img is already set to Large option in theme).

I've found only one post seeming to address this but it's 6yrs old. 😕 I've attached screenshots of both our own product page and a reference product page from Tiffany.

As a bonus Q lol – if anyone could give me a hint on how to utilize the blank space above desc., maybe horizontally grouping the diff't product options, that would make life el grandaroonee and sparkly sunshiny indeed.

Thanks in advance!

Ryan

 

 

[Kinjaldavra]

hello @pliersandstring 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

[KetanKumar]

@pliersandstring 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[pliersandstring]

Hi @Kinjaldavra and @KetanKumar, thank you both so much for your offers of help! That's very generous of you.

I'm rather hands on, however, so I'd much prefer learning how to do this myself. 🙂 I know a lot here is theme-specific but also that there are certain universals inherent to Liquid. I figure if I can locate something like col-xs or min/max-width particular to product_ that might do the trick. Pretty much just needed a hint in the right direction lol. So, so new to Shopify!

Update: I think I miiight have found it in product-template.liquid... here:

when 'large'
assign product_image_width = 'medium-up--three-fifths'
assign product_description_width = 'medium-up--two-fifths'
assign product_image_size = '740x'

<!--Theme is Impulse

I'll toy around with his and post here if it does indeed work 🦾

Thanks again,

Ryan

[KetanKumar]

@pliersandstring 

wow that would be great thanks for update

[pliersandstring · Accepted solution]

Hi @KetanKumar! It looks like that did indeed do the trick.

In product-template.liquid (Impulse theme, pre–Shopify 2.0) I simply replaced

when 'large'
assign product_image_width = 'medium-up--three-fifths'
assign product_description_width = 'medium-up--two-fifths'
assign product_image_size = '740x'

with

when 'large'
assign product_image_width = 'medium-up--two-thirds'
assign product_description_width = 'medium-up--one-third'
assign product_image_size = '740x'

Which results in this—

—compared to the default product page relational column width, seen here:

I left the image x dimensions the same, as it appears 740x is slightly oversized in prev snippet compared to how the image is displayed in browser, relying on col widths to "smallify" the img. Note that I'd had the Large option selected in Impulse theme, so the above snippet applies only to that setting; however if Medium or Small, etc. has been selected, the relevant snippets are adjacent to the one I posted here.

Hopefully this helps someone out there!

Cheers,

Ryan

[KetanKumar]

@pliersandstring 

wow that's great