Change the product page width columns

This change will make both columns 50%. As a result, your product image area will be reduced thus making the image smaller. The product description area will be increased from 33% to 50%.

To widen the right column on a product page, you'll need to modify this file:

These two lines will need to be modified:

Change both values to be large--one-half. Use the following code to replace both lines:

    {%- assign product_image_width = 'large--one-half' -%}
    {%- assign product_description_width = 'large--one-half' -%}

Result:

Save the file.

Keep in mind that the select and add to cart elements will now be much larger:

The select options can be resized to 67% using this code:

Option 1: Reduce size of Select dropdowns only

/* -- code to make product select options smaller -- */
@media screen and (min-width: $medium) {
.template-product select {
    max-width:67%;
    }
}
/* - end - */

Option 2: Reduce size both Add to Cart button and Select dropdowns

To make the add to cart smaller, use this code instead of the above:

/* -- code to make product select options smaller -- */
@media screen and (min-width: $medium) {
.template-product select, .template-product .add-to-cart__wrapper button {
    max-width:67%;
    }
}
/* - end - */

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Step 2:

Pipeline 4 and higher: Edit snippets/product-form.liquid:

Earlier version of Pipeline before Pipeline 4: Edit snippets/product.liquid:

Use the Find feature (Command-F on Mac or Control-F in Windows) and search for (1):

add-to-cart__wrapper

When you find the right line (2), change the entire line to:

<div class="add-to-cart__wrapper text-center">

Example: