Increase space between product images and product description on debut theme

Store Design
1

Hi. I’ve just started my first Shopify store using the debut theme. I’ve added a product to my page but I’ve noticed that the spacing between the product images and the product description is too thin and that the product description is too far to the right. The product images are on the right of the page and the product description is on the right. Does anyone know which code I need to edit so I can increase the space between the product images and the product description or decrease the space on the left and right of the product images and description? Thank you

2

@zaymala

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

3

www.magicmassagegun.com.au

Password: vawlea

Thank you

4

@zaymala

You need to change grid classes in liquid of your product page.

Goto Online Store-> Themes → Action dropdown → Edit code → Goto sections → Edit product-template.liquid file.

Replace

medium-up--two-thirds

to

medium-up--one-half

Check the screenshot below.

classes-change.jpg
classes-change.jpg924×158 38.4 KB

Hope this works.

Thanks!

5

I searched through product-template.liquid and I couldn’t find any of the code that you wanted me to edit. The closest thing I found was this

{% case section.settings.media_size %}
    {% when 'small' %}
      {%- assign product_media_width = 'medium-up--one-half' -%}
      {%- assign product_description_width = 'medium-up--one-half' -%}
      {%- assign height = 345 -%}
    {% when 'medium' %}
      {%- assign product_media_width = 'medium-up--one-half' -%}
      {%- assign product_description_width = 'medium-up--one-half' -%}
      {%- assign height = 530 -%}
    {% when 'large' %}
      {%- assign product_media_width = 'medium-up--one-half' -%}
      {%- assign product_description_width = 'medium-up--one-half' -%}
      {%- assign height = 720 -%}
    {% when 'full' %}
      {%- assign product_media_width = '' -%}
      {%- assign product_description_width = '' -%}
      {%- assign height = 1090 -%}
      {%- assign enable_image_zoom = false -%}
  {% endcase %}

The only other code that was similar to what you told me to edit was this which was only 2 lines down


    

      {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

It seems to have helped but I’m not sure if I did the right thing?