Increase space between product images and product description on debut theme

zaymala
Tourist
8 0 0

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

Replies 4 (4)

dmwwebartisan
Shopify Partner
12282 2546 3694

@zaymala 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
zaymala
Tourist
8 0 0

www.magicmassagegun.com.au

Password: vawlea

Thank you

dmwwebartisan
Shopify Partner
12282 2546 3694

@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

 

Hope this works.

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
zaymala
Tourist
8 0 0

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

  <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.media_size }}-media{% endif %}">
    <div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group>
      {%- 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?