Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2013-01-15
2
Medium Priority
?
448 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 2000 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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

783 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