Shopify themes, liquid, logos, and UX
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
Please share your website URL and password if any. I will check and provide a solution here.
Thanks!
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.
Hope this works.
Thanks!
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?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024