Solved

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

Posted on 2013-01-15
2
398 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Can't get js include to work in html file 8 20
Alert after MVC form submitted 1 22
removing a class in javascript 4 48
Ouput in html in powershell 2 19
Learn about the eCommerce marketing trends for the year ahead.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

856 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