Adjust Column Width on Product Page

Solved
pliersandstring
Excursionist
13 2 3

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

Screen Shot 2021-09-15 at 9.12.23 PM.png

Screen Shot 2021-09-15 at 9.12.46 PM.png

Natztech
Shopify Partner
2125 546 1300

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
Shopify Partner
23454 2357 8633

@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.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
pliersandstring
Excursionist
13 2 3

Hi @Natztech 

KetanKumar
Shopify Partner
23454 2357 8633

@pliersandstring 

wow that would be great thanks for update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
pliersandstring
Excursionist
13 2 3

This is an 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—

Screen Shot 2021-09-16 at 5.25.53 PM.png

 

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

Screen Shot 2021-09-16 at 5.26.05 PM.png

 

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
Shopify Partner
23454 2357 8633

@pliersandstring 

wow that's great

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing