Features
Where Can I Get The App
S2L is available on the Mac App Store! Download it from the App Store or on GitHub if you prefer to roll your own.
Learn MoreWhat is S2L
S2L is a macOS app built with Swift. It simplifies converting SVG files into Liquid templates for Shopify themes by allowing you to edit the viewport, class, fill, and prefix attributes as well as the file name and extension.
Who is S2L for
S2L is for Shopify theme owners and developers who need to save time in their workflow.
Why Did I Make S2L
There are workarounds for Liquid not accepting .svg files, but they deviate from Shopify's design structure. Converting 150+ custom icons manually isn't ideal. S2L solves this problem!
Public GitHub Repo
If you prefer to roll your own or want to contribute to the project, the source code is available on GitHub.
Learn MoreHow Do I Get Started?
Visit our documentation to learn how to set up and use S2L effectively. You'll find step-by-step guides and tips.
Learn MoreHelp Guide
Getting Started
- Launching the App: Open SVG2Liquid from your Applications folder.
- Selecting Input Directory: Click on the "Add Your SVG's" section and use the "Browse" button to select a directory containing SVG files. The app will scan this directory and list all the SVG files found.
- Selecting Output Directory: Click on the "Select Output" section and use the "Browse" button to choose a directory where the converted Liquid files will be saved.
Using the File List View
- Viewing Files: The main interface displays a list of all SVG files found in the input directory.
- Editing Files: You can modify the viewport settings, add a class, change the fill settings, and add a prefix to the file name.
- Removing Files: Use the "Remove" button next to any file to exclude it from the conversion process.
Bulk Editing
- Opening Bulk Edit: Click on the "Bulk Edit" button to open the bulk edit modal.
- Applying Changes: Enter the desired attributes for viewport, class, fill, and prefix. Click "Apply" to update these attributes for all selected files.
- Canceling Bulk Edit: Click "Cancel" to close the bulk edit modal without making changes.
Converting Files
- Starting Conversion: Once all files are configured, click the "Convert" button. The app will process each file, convert it to a Liquid file, and save it in the specified output directory.
- Viewing Results: After conversion, a feedback modal will display the results, including any errors or successful conversions.
- Check Results: After conversion, we suggest ensuring your new file is rendering correctly. Complicated SVG files might need more tweaking.
FAQ
Support
If you need help or want to report an issue, you can reach out to us through the following channels: