Product Options Falling to the Bottom of the Product Image

Store Design

Topic summary

A user encountered a layout issue where product options were displaying below the product image instead of to the right on desktop view. This occurred suddenly overnight, despite the theme editor showing the correct layout.

Resolution:
Another user identified this as a CSS problem and provided a solution:

  • Locate the CSS file containing the .gridlock.row.desktop-5 class
  • Change the width property from its current value to 30%

Outcome:
The original poster confirmed the fix worked successfully, resolving their week-long issue. The problem was purely CSS-related rather than a template code issue.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

I dug into the code, to no avail. All our product options (desktop view) are falling below the product image. It’s supposed to go on the right. Not sure what happened - happened overnight. Any help will be greatly appreciated!

crowdsigns_0-1689002436957.png
crowdsigns_0-1689002436957.png996×1264 93.5 KB

This is what’s showing up in our theme editor (correct layout):

crowdsigns_1-1689002555962.png
crowdsigns_1-1689002555962.png1584×934 131 KB

Here’s the code for this product page:

{% if product.metafields.inventory.ShappifyHidden == “true” %}
Product is not available
{% else %}

    {% for image in product.images %}
  • {{ product.title | escape }}
    • {% endfor %}

{% for image in product.images %}
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

{% if forloop.first %}

{{ image.alt }}
{% endif %} {% endfor %}
{% if product.variants.first.inventory_quantity <= 0 %} {% capture inventory %}{{ product.variants.first.inventory_quantity }}{% endcapture %}

{% endif %}

{% if settings.vendor %}

{{ product.vendor }}

{% endif %}

{{ product.title | escape }}

{% if settings.subtitle %}

{{ page_title }}

{% endif %}

{% if product.available %} {% if product.compare_at_price > product.price %} {{ product.price | money }} {{ product.compare_at_price | money }} {% else %} {{ product.price | money }} {% endif %} {% else %} Out of stock {% endif %}

This page is only for PAID orders that were placed on Etsy.
If you did not order from Etsy, please order on our main page [click here].

{% include ‘short-form-personalizer’ %}

{% include 'social' with product %}

{% if template == ‘product’ %}
{% if settings.popups %}

{{ pages.[settings.popup-one].content }}
{{ pages.[settings.popup-two].content }}
{{ pages.[settings.popup-three].content }}
{% include 'question' %}

{% endif %}
{% endif %}

{{ product.metafields.spr.reviews }}

NEED SOME IDEAS?

{{ product.description }}

Check out the cool custom frame photo props from other CrowdSigns customers!



View More Fan Pics

{% if collection %}
{% include ‘related-products’ %}
{% endif %}

{% if collection %}

Back to {{ collection.title | link_to: collection.url }}
{% if collection.previous_product %} {{ 'Previous Product' | link_to: collection.previous_product }} {% endif %} {% if collection.next_product %} {{ 'Next Product' | link_to: collection.next_product }} {% endif %}

{% endif %}

{% endif %}
2

Hello!

This is a css problem.

Find the css file where you find the class.

Change this property to 30%.

.gridlock .row .desktop-5 {
  width: 30%;
}

Hope this helps

3

Oh wow, thank you! This made our week :slightly_smiling_face: !

4

You are welcome! I’m glad to hear that!