How to enable clean URLs in your Ecwid store

Ecwid now offers the ability to generate clean URLs in your Ecwid store. In this post, you will learn how to enable this feature in your store.

Getting started

Before we get started, I want to let you know that this is going to be a little tricky. Unlike other .htaccess tutorials, I don't have a generic block of code that you can paste into your file. Make sure you follow the steps below closely. Read through the whole post before you make any adjustments.

What you'll need

For Ecwid (Premium): make sure the Main widget in the Storefront widgets is at least V9
- Updates are sent out via email. Check your spam folder or contact me at john@j-26.com if you did not receive the update.
For Ecwid (Free): make sure the Storefront widget is at least V4

What to add to `.htaccess`

Add this to the beginning of your .htaccess file (it might already be there).

RewriteEngine on

Generate rewrites

Once the code above has been added to your .htaccess file, enter the URL of your store into this generator. Copy and paste the generated code into your .htaccess file. This is the code that my store uses:

RewriteRule ^[^.]+$ .
RewriteCond %{REQUEST_URI} ^(.*)\/store\/(.+)css\/(.*)$ [NC]
RewriteRule ^ %1\/store\/css\/%3 [R=301,L]
RewriteCond %{REQUEST_URI} ^(.*)\/store\/(.+)script\/(.*)$ [NC]
RewriteRule ^ %1\/store\/script\/%3 [R=301,L]
RewriteCond %{REQUEST_URI} ^(.*)\/store\/(.+)assets\/(.*)$ [NC]
RewriteRule ^ %1\/store\/assets\/%3 [R=301,L]
RewriteCond %{REQUEST_URI} ^(.*)\/store\/(.+)images\/(.*)$ [NC]
RewriteRule ^ %1\/store\/images\/%3 [R=301,L]

The above code is just an example. The code you'll use will likely look a little different.

Adaptive layouts

If your website uses multiple layouts (i.e. tablet and phone layouts) then you'll need to add the code to the .htaccess file of each layout. To do that, simply open the tablet or phone folder, and paste the code into the .htaccess file of that folder. If there isn't an .htaccess file in the folder, you can copy and paste the original .htaccess file.

What to change in Adobe Muse

This is the easy part. The free and premium version both have a new section labeled Clean URLs. Toggle on the Enable Clean URLs feature, and publish your site.

Points to keep in mind

Once this feature is enabled and you've published your website, everything will appear to work. However, if you have not added the rewrite to your htaccess file, direct links to products and reloading pages will result in a 404 error.

Disqus Comments