Product Page Problem

Store Design
, ,
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