Increase space between product images and product description on debut theme

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

0 Likes
Shopify Partner
3695 821 1028

@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.
Do you need custom changes on store ? Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Do you want drag-and-drop Advanced Shopify Page Builder to customize your pages? check here PageFly App
This will help you grow conversion rate and sales for your e-Commerce business.
0 Likes
Tourist
8 0 0

www.magicmassagegun.com.au

Password: vawlea

Thank you

0 Likes
Shopify Partner
3695 821 1028

@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.
Do you need custom changes on store ? Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Do you want drag-and-drop Advanced Shopify Page Builder to customize your pages? check here PageFly App
This will help you grow conversion rate and sales for your e-Commerce business.
0 Likes
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?

 

0 Likes