Solved

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

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

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. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

710 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