Looking to move variants on mobile product page

Technical Q&A
,
1

Hi, I have the Impact Theme and I want to move the variants only on mobile to above the description and below the title, so they are easier to see/use on the smaller screen (ie not so deep in the scroll). Thanks!

1 Like
2

Hey @brigid_2

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

The URL is submaterial.com.

1 Like
4

Alright so as I expected, it’s not only possible by CSS and will require additional coding in your theme files so I would be happy to help you out. Feel free to share your collaborator request code in my private messages and I’ll sort that out for you.

Cheers,
Moeed

1 Like
5

Actually, it is possible with CSS.
Here is the code:

safe-sticky.product-info {
  display:  flex;
  flex-direction: column;
  gap: 1rem;
}

.product-info > * {
  margin: 0;
  order: 5;
}

[data-block-id="price"],
[data-block-id="title"],
[data-block-id="badges"] {
  order: 1;
}

@media (min-width:1000px) {
[data-block-id="description"] {
  order:3;
}
}

[data-block-type="selector"],
[data-block-type="liquid"],
[data-block-type="variant-picker"] {
  order:4;
}

The code changes visible order of blocks in product info section.
First – price, title and badges,
then, only on desktop – description
then selector, variants picker and custom liquid.

Then the rest, including description on mobile.

Not sure “Custom CSS” in section settings will accept it, Theme Settings=> Custom CSS seem to accept.

Finally, can always use “Custom liquid” block/section and add the code wrapped with <style> and </style>

1 Like