Placing shortcode on homepage

I hope you are well today and thank you for your questions.

1. How can I change the width?
2. How do I get the search button NEXT to the search box instead of UNDER it?

You can achieve this by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings

#wrapper .is-search-form input.is-search-input {
    width: 100%;
}

#wrapper .is-search-form label {
    float: left;
    display: block;
    width: 500px;
    max-width: 100%;
}

#wrapper .is-search-form span.is-search-icon {
    padding: 5px;
}

3. How do I replace the old search box with the Ivory Search box?

You can just add the below search form shortcode in that page content area.

[ivory-search id="49116"]

4. Is there a possibility to make the live search faster?

Just make sure that you have not configured any unwanted search form options causing the search query to become slow.

5. I selected ‘media’ and ‘attachements’ in the plugin settings, but unfortunately, during the search it’s not showing images.

Could you please share me the screenshot of it where you have selected it so that I can troubleshoot it?

You have to configure the search form as described below.

Search Media Files Or Attachments

Best regards,
Ivory Search Support

1. Images are still not shown during search. See screenshot.

Please make sure that you have configured the search form AJAX settings to display images in the AJAX search results as shown in the attached screenshot.

2. Instead of placing the shortcode in the content on the homepage, how can I place the search box as ‘hard-code’ CSS?

I am not sure what you meany by placing the search box as hard code CSS so could you please describe it a bit more?

See screenshot, I have selected ‘images’, but still not working.

Have you set the images as featured images for those posts?

Actually, I want to place the searchbox not as a shortcode on my homepage, but integrate it as CSS. Which class-form should I use? This one for example:
.data-form-id=”49116″

I am not sure how you are integrating it with the CSS so could you please describe it a bit more and tell me exactly what you are trying to achieve?

Yes I did, however, those images are loaded from an external link. Maybe that’s causing the issue?

Yes, you are right, therefore, it is not displaying.

I know have another search box on my home page. Called: .aws-container
See screenshot
I want this .aws-container to replace with your Ivory Search box.

I understood your requirements now but you are following the wrong path to achieve it.

It is not display using CSS code so you don’t need to edit CSS code.

You have to edit the page and in the content area of it you will see aws shortcode that you have to replace with Ivory Search shortcode.