Solved

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

Posted on 2013-01-15
2
427 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

617 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