✓ The purpose of this article is to introduce you to Kehio Editor's creation import and export functionality.
📖 If you don't know what a creation refers to, read this article.
Import our pre-configured creations
The Kehio team strives to democratize the design and advanced optimization of your Shopify stores, whatever your level of expertise or budget.
To achieve this, our team of experts in user experience (UX) and user interface (UI) offers you the possibility of integrating into your store sections that are already pre-configured and 100% optimized on all media.
These creations can be adapted to your Shopify store in just a few clicks. This option greatly simplifies the construction of your web pages and makes your experience with Shopify more enjoyable, offering you the following key benefits:
1 - Add sections in just a few clicks:
Explore our demo stores, view the creations that match your needs, then download and integrate them into your store, in just a few clicks.
2- Complex compositions without code or design touch-ups:
Whether you want to create sections including icons, separators or advanced images, every element of your creation is fully editable in just a few clicks thanks to our free editing tools, such as SVG Editor. This allows you to seamlessly integrate our advanced images and achieve a professional result in a matter of clicks.
3- Easy editing:
Modifying our pre-configured creations is straightforward with our editor, which uses Shopify components. This approach simplifies backend management and ensures smooth integration with Shopify.
4- Quick integration into your store:
In just a few clicks, add your creation to your store directly from the Shopify theme editor and start designing unique, professional pages.
How to import our creations
ℹ️ If you decide to import your own creation, go directly to
step 4
Step 1: Activate download
Visit our demo stores and explore the pages to view in real time the creation you wish to import into your store.
Once you've chosen the creation, activate the download link available in the demo store header.
Step 2: Click on download
A link will appear under each creation. Simply click on the link below the creation you wish to import.
Step 3: Rename the downloaded file
The creation is now downloaded to your computer. ( It will appear in your download file with a number and in CSV format ) Remember to rename it for better organization, especially if you're importing several creations.
Step 4: Import the creation
Go to the Kehio Editor dashboard and click on "Import". Then select the downloaded creation file.
Step 5: Rename your creation in Kehio Editor
Once you've imported your creation into Kehio Editor, it's a good idea to rename it before making any changes. This makes it easier to manage your creations and find them later in the editor. Be sure to choose a descriptive name that reflects the use or content of the creation for optimum organization.
Step 6: Assign a number to your creation
Assign a unique number to each creation to link them in your Shopify theme editor. Make sure each creation has a separate number to avoid display conflicts. It's possible to use the same number for two different creations if they are intended for distinct products or pages.
For example, you could assign the number 1 to a banner for product A and use the same number for another banner for product B.
📖 To find out more about efficient management of creation numbers and page templates, see this article.
Step 7: Select your page
Select the pages on which you want to display your creation. Make sure you select correctly to ensure that the creation appears where you want it.
*Remember to save your creation as soon as you've renamed it in Kehio Editor. This ensures that you don't forget this crucial step after you've made any changes.*
Step 8 : Modification
You can now start editing and integrating it into your Shopify store.
Integrating a creation into your site
Once you've made the necessary changes to your creation in Kehio Editor, head over to your Shopify store's theme editor to integrate the creation into the desired page. Make sure that steps 6 and 7 have been correctly configured, as they establish the connection between the Kehio Editor application and your Shopify theme. Proper configuration ensures that the creation will display correctly on your site.
Add a section
Step 1: Add a section to your theme
Go to the theme editor of your Shopify store, click on "Add a section ", select "App ", then choose Kehio Editor.
Step 2: Connect the creation
Select the creation number you defined earlier. Make sure the number corresponds to the creation you wish to display.
Add a block to the product block
Step 1: Product information block
Go to your product's information block section, click on "Add a block " then select the Kehio Editor application.
Step 2: Connect the creation
In the same way as for adding a section, choose the number of the creation you wish to display for this product.
Adding a background color
When you import a creation, if it has a background color, it will appear in the Kehio Editor preview as an indication. The background color preview in Kehio Editor allows you to visualize the color to make it easier to work on your creation live. However, if you wish to add or modify the background color of your creation, these changes will have to be made directly from the theme editor of your Shopify store.
Here's how to do it:
1- Copy the color: If you wish to keep the same background color as the design imported from our demo stores:
Click on the background color and copy the hexadecimal value of the color.
2- Access the Shopify theme editor :
Go to the theme editor of your Shopify store.
3- Apply the color in the theme editor :
Select the section of your creation in the theme editor.
Paste the color into its corresponding field.
From the editor, you can also create a color gradient for the background.
Adding an SVG border
1 .For creation in Kehio Editor:
Click on "Add a block" and select the "SVG Border" application extension.
For a standard section in your theme:
Click on "Add a section" and select the "SVG Border" application extension.
Move this section above or below your section.
Edit your SVG border
In the SVG Border panel, you can customize your border according to your preferences:
Select a default template or import a custom border :
You can choose from one of the default templates or import a custom border from our demo stores or one of your own.
Adjust border width :
Adjust the border width for a perfect visual fit on computer, mobile and tablet.
Adjust border height :
Change the height of the border to fit correctly on computer, mobile and tablet.
Adjust border to fit inside your section :
Choose whether your border should intersect the inside of your section for a better fit, especially for default sections like your theme banner.
Animate your border:
Enable the animation of your border and adjust the speed of this animation according to your preferences.
Why export your creation with Kehio Editor ?
At Kehio Editor, we understand how tedious it can be to have to start each creation from scratch. That's why we've developed a time-saving export function for your creations. Imagine having spent hours designing a perfectly optimized creation and being able to duplicate it in just a few clicks across all your stores. Or having created a superb banner for a specific occasion and being able to reuse it every year. Thanks to Kehio Editor's export function, there's no need to recreate your sections from scratch: simply export them and then import them, just like our pre-configured creations, into your new store.
Exporting a creation
It's really easy: just go to your application's dashboard and click on the export icon.
Note: The creation will be exported to the download file on your computer in csv format, and will bear a series of numbers as its name. Just as when you download a creation from the demo store, we advise you to rename your file directly to make it easier to find later.
If you need any further help understanding how to import or export a creation, please don't hesitate to contact us by e-mail or live chat. We're always happy to help.