Product Page Problem

Store Design
, ,

Topic summary

Color and size selectors on a product page are appearing below the description/images instead of alongside the product information. The goal is to place the color and size options next to the details; screenshots are provided to show the layout issue.

Proposed fix (Shopify theme):

  • Edit the product template: Online Store > Themes > Edit Code, open product.liquid or sections/main-product.liquid.
  • Move the variant selector code (e.g., {{ product.options }}) into the section with the title/description, near {{ product.description }}, to control placement.

Styling adjustment:

  • In assets/theme.css or assets/style.css, apply a horizontal layout with flexbox (e.g., a .product-options container using display: flex and gap). Optionally set the selectors (e.g., .variant-selectors) to flex: 1 for proper sizing. Save and preview.

Status: No confirmation from the original poster; the suggested steps are unverified. The thread remains open, and images are central to visualizing the problem.

Summarized with AI on December 14. AI used: gpt-5.
1

Hi Everyone,

On my product page I’ve loaded in the 2 colour-ways of my garments and then the sizes for the garments, but they’ve dropped to a different section below the description and where the image will go, But I want the colour and sizes to be next the information. Can anyone help me out I’ve tried Youtube but couldnt specifically find someone solving this issue,

Thanks in Advance,

Will

size and colour.png
size and colour.png1853×703 41 KB

website product.png
website product.png1632×688 37.9 KB

2

Hi @PRGMD ,

1: Locate the Product Template1. Go to Online Store > Themes > Edit Code.

  1. Open the file controlling your product page layout, typically product.liquid or sections/main-product.liquid .### 2: Adjust the HTML Structure

    Find the code for the variant selectors (color and size options). It might look like this:

{{ product.options }}

Move this code block into the section containing the product title, description, and other information, likely near:

{{ product.description }}

3: Update the CSS (if needed)

To align everything horizontally:

  1. Open the assets/theme.css or assets/style.css file.
  2. Add or update styles to ensure the layout is side-by-side:
.product-options {
    display: flex;
    gap: 10px; /* Adjust spacing between elements */
}

.product-options .variant-selectors {
    flex: 1; /* Ensures the color and size selectors fit properly */
}
​

save and preview .

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt