The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 09-17-2015, 03:48 PM
Body PLURfection's Avatar
Body PLURfection is offline
 
Join Date: Sep 2015
Posts: 1
Default

Anyone know how to move the position of the product description? so that it's above the checkout box and under the main product image for mobile only?


Anyone know how to move the position of the product description? so that it's above the checkout box and under the main product image for mobile only?
  #2  
Old 09-21-2015, 10:06 PM
Cyril D's Avatar
Cyril D Cyril D is offline
Ecwid Team
 
Join Date: Feb 2015
Location: Ecwid HQ
Posts: 530
Default

Hello,

Thanks for reaching us out!

If you want to change the position of some Ecwid elements, you have a couple of options here.

1. Using CSS (Cascading Style Sheets)

Cascading Style Sheets or CSS is a stylesheet language used for describing the look and formatting of a document written in a markup language like HTML—and you know that websites are all about HTML.

Ecwid has a section in the control panel where you can add CSS codes or rules that will make your Ecwid storefront look different. Where? Follow this way: the Ecwid Control Panel → Settings → Design → Custom CSS.

Most of the elements/group of elements of Ecwid storefront have their unique names called CSS classes. The blocks you want to move, the main image thumbnail, the description and the right panel with the checkout buttons, have class names as follows:

Code:
.ecwid-productBrowser-details-thumbnail
.ecwid-productBrowser-details-descr
.ecwid-productBrowser-details-rightPanel
Note that dot at the beginning of each class name—this thing tells a browser that it's CSS class and not something else.

Basically, to change the position of these elements you should add CSS code that looks like:

Code:
.ecwid-productBrowser-details-descr { position: relative !important; top: -250px; } 
.ecwid-productBrowser-details-rightPanel { position: relative !important; top: 150px; }
You can move the elements up and down using the "top" parameter. Just decrease or increase its value in pixels. However, if you add these rules to your custom CSS theme in the control panel, you'll see that it works fine with one screen width and not works others. As you may notice, when you change the width of a browser window (simulating different screen widths), Ecwid rearranges the elements due to its responsiveness and mobile-friendly nature. Yep, this is why Ecwid looks cool on any device.

Ecwid has special CSS classes that indicate such states of Ecwid layout and that depend on the browser's window width:

Code:
.ecwid-lte-768px
.ecwid-lte-600px
.ecwid-lte-480px
.ecwid-lte-400px
.ecwid-lte-320px
So you can change the positioning of needed elements for each of these states. Just add the class name to the begging of CSS rules mentioned above. For example:

Code:
.ecwid-lte-400px .ecwid-productBrowser-details-descr { position: relative !important; top: -250px; } 
.ecwid-lte-400px .ecwid-productBrowser-details-rightPanel { position: relative !important; top: 150px; }
This method has one drawback, though. If the height of your product descriptions is different, after changes, the elements may overlap each other due to their fixed position. That's why I can't provide you with a ready solution that might suit your needs. However, feel free to play around with the values to see how it looks in your store.

Also, you can learn more on managing the Ecwid layout in our articles about changing the Ecwid design and customizing Ecwid CSS. Don't forget to go through special sections in the Help Center and on the Forums.

2. Using JavaScript

JavaScript or JS is a computer programming language commonly used to create interactive effects within web browsers. Without JS the web would look boring.

If with CSS we can change the position of each element, but we can't change their order in an HTML document—and, as you may know, there's no access to Ecwid's HTML due to its SaaS nature, with JS we can do both. In the addition, Ecwid has the JavaScript API that makes this even easier.

Look at the JS code below:

Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page) {
  if (page.type == "PRODUCT" && !isDescriptionMoved) {
    if ($(".ecwid-lte-400px")[0]) {
      $("div.ecwid-productBrowser-details-descr").insertBefore("div.ecwid-productBrowser-details-rightPanel");
      var isDescriptionMoved = true;
      }
    }
});
</script>
Do not worry, there's no need knowing JS language, I'll explain what the script does.

In a nutshell, after Ecwid's completely loaded, it looks for the CSS class mentioned before (ecwid-lte-400px) and if finds it, it takes the description block from its default place and places before the block with the right panel. Why does it look for this particular CSS class? Well, because it means that the store was visited on a mobile.

To make it work, simply copy and paste all the above code and add it below the Ecwid integration code that you added to your website.

Important note for other Ecwid users: the method with JS script won't work if you use the Ecwid Starter Site (what it is) since there's no way to add such scripts. The workaround with CSS will work fine, though.

Hope this helps!
__________________
Cyril D.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.

Last edited by Cyril D; 09-22-2015 at 12:57 AM.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:49 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.