Solved

Need help customizing CSS for product detail page on Shopify-based website

Posted on 2013-01-15
2
394 Views
Last Modified: 2013-01-16
I have a client who is insisting on having a completely different layout for her product detail pages (on a Shopify based website) when viewing it on a mobile device:

http://testing2connect.myshopify.com/collections/frontpage/products/the-ideaboard-original-backer-pricing

Using this example product detail page as a reference  -- what she'd like is to have it so that when you view the page on a mobile device (ie: iphone in portrait mode), .. the different modules would be re-ordered as follows:

1) Product name & price
2) Quantity field & Add to Cart button
3) Product image(s)
4) Product description
5) Product reviews
6) Related products
7) Etc, etc.

I tried explaining to her that responsive web design requires that you think in terms of "individual columns of content wrapping underneath eachother as needed" .. but she didn't seem to understand what I was taking about.

I'm looking to find out if a completely different layout is even possible to achieve within this context, and if so, ... how.  

If it is NOT posssible to achieve a completely different layout within this context, I need to be able to provide a logical, technical explanation as to why it is not possible.  

Please advise.

Thanks,
- Yvan
0
Comment
Question by:egoselfaxis
2 Comments
 
LVL 8

Accepted Solution

by:
wal_toor earned 500 total points
ID: 38782159
Hi Yvan,

I am not familiair with shopify, so I do not know how the structure of the template files are. But I think this can be done, but not by using only CSS.

Do you have access to the templates, maybe it is an option to load a different template (custom build) when a user is on a mobile device (or when the screen resolution is smaller than a specific width). I think this would be the easiest way to do this.

But this takes time and knowledge of the language in which the site was build (php, smarty).

There are some ways to reorder elements using Jquery. I have found a simple example that illustrates this: http://jsfiddle.net/2DUXF/ So if you have access to the javascript files you can try this?

Hope this is something you can use.

greetz,
walter
0
 

Author Closing Comment

by:egoselfaxis
ID: 38782372
That should work -- thanks!

- yg
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Read about how to choose the best possible content marketing agency to suit your needs. Content marketing has become an integral part of running a successful tech business, so it is wise to be informed.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question