Hello,
We are currently working on Refresh 11, and would like to change the design and orientation of our product section/page to a new design for specific products.
We created a custom template of the product page, so we are unclear where the changes need to be made: theme.liquid, the product section itself, or the new product template’s file.
Here is the current design of the page, very similar to the default layout:
and here is the new layout that we would like to be using. I made this by dragging the elements around in MS Paint, since I’m unclear how to code these changes.
Notably, the style on mobile is completely fine, so we are looking to limit the changes almost entirely to desktop view.
Our store is a games and trading card store, so its important for us to list the details in the same view as the product media and the title, price, add-to-cart, variants, etc. for readability and accessibility on desktop.
Specifics on the desired changes:
-
Title height in-like with top of the product media
-
Title and subtitle centered spanning the width of 2 columns below
-
2 equal width columns on the right 2/3 of the page: description and purchase information
-
1 column on the left featuring product media and gallery, with the top in-line with the top of the title