Product Page Problem

[PRGMD]

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

[akshay_bhatt]

Hi @PRGMD ,

1: Locate the Product Template

1. Go to Online Store > Themes > Edit Code.
2. 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