✓ In this article, we'll cover the steps for integrating a creation into your page template from the Shopify theme editor.
After making the necessary changes to your creation in Kehio Editor, head over to your Shopify store's theme editor to integrate the creation to the desired page.
Make sure that the settings in Kehio Editor's integration section have been correctly configured, as they establish the connection between the Kehio Editor application and your Shopify theme. Proper configuration ensures that the design will display correctly on your site.
Find out more about the integration section
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 Creation Widget.
Step 2: Connect the creation
Select the creation number you defined earlier. Make sure the number corresponds to the creation you wish to display.
ℹ️ Important notes
Always use block 1 for a full-page section : If your design takes the entire width of the page, use block 1.
Multiple blocks for custom sections : Use blocks only when you have two different creations to build a section (one creation on the left and one on the right). Block 1 will always be on the left and block 2 on the right.
Connecting two creations in the same section
In block 1, select your first creation.
Repeat for block 2 with your second creation.
You can manage the percentage of space each block occupies in the section. In general, each block takes up 50% of the space.
ℹ️ Note: Block margins, padding and gaps are always managed from Kehio Editor.
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 Creation Widget 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
To add a border to a creation in Kehio Editor, click on "Add a block" and select the "Border Top" or "Border Bottom" app extension. Select "Top" to create a border at the top of your section, or "Bottom" to add one at the bottom.
For a default section of your theme, click on "Add a section" and select "Border Top" or "Border Bottom". Then place the section above or below the section on which you want the border to appear.
ℹ️ Note:
Section created with Kehio Editor: You can directly add a block to add the SVG border to the section of your creation.
Default section in your theme: You need to create a new section and add the border extension, then place it above or below your existing section and, if necessary, use the “Crop” function to fit the border perfectly into 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.
If you need any further help, please don't hesitate to contact us by e-mail or live chat. We're always happy to help.