RTL support

Sign Customiser is designed to follow the RTL (right-to-left) direction of your store's theme. This guide explains how to check for RTL compatibility, configure your theme, and enable RTL for Shopify and Universal platforms.

RTL direction does not work in preview mode. You must check it on your live site or by customizing your theme.

Checking for RTL Support in Your Theme

To determine if your theme supports RTL:

Inspect Your Storefront by right-clicking on your storefront and selecting "Inspect".
Open the "Elements" tab and check for the attribute dir="rtl" . If dir="rtl" is present, your theme supports RTL, and the app should display correctly.

Enabling RTL in Shopify

If you cannot find the dir="rtl" attribute in your theme code, you can add it manually.

Please note that this will affect your entire store.

Edit Your Theme Code by navigating to Sales Channels > Online Store > Themes in your Shopify dashboard.
Click on the "..." next to the "Customize" button and choose "Edit code"
Open the theme.liquid file from the left-hand menu.
Locate the <html> tag near the top of the file, which looks like this:
Add dir="rtl" to the html tag. The result will look like this:
<html class="no-js" lang="{{ shop.locale }}" dir="rtl">

RTL Support for Universal Platform Users

To enable RTL direction for Universal platforms:

Verify Theme Compatibility by consulting your theme’s specifications or inspecting its code (see "Checking for RTL Support in Your Theme" above) to ensure the theme supports RTL.
Update Your HTML Code by appending ?rtl=true to the end of your customiser ID within the <iframe> tag you added to your site. This ensures the customiser displays in RTL design.
Example:
<iframe src="https://web.signcustomiser.com/embed/YOUR_CUSTOMISER_ID?rtl=true></iframe>