How to enable clean URLs in your Ecwid store

Learn more about the How to enable clean URLs in your Ecwid store Adobe Muse widget

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.

Table of contents

  1. Getting started
    1. What you'll need
  2. What to add to .htaccess
    1. Generate rewrites
      1. Adaptive layouts
  3. What to change in Adobe Muse
  4. Points to keep in mind
  5. Discussion

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.

Discussion