Adding a featured product with a custom order form to your Shopify home page is a game-changer for improving customer engagement and driving sales. By showcasing your best-sellers alongside a form for custom requests, you create a personalized shopping experience that meets your customers’ unique needs. In this guide, we’ll show you how to seamlessly integrate a featured product section and a custom order form into your Shopify store, boosting both functionality and aesthetics. Get ready to elevate your online store and provide your customers with a tailored shopping journey!
Benefits of Adding a Featured Product with a Custom Order Form in Shopify
- Enhanced Customer Engagement
Displaying a featured product grabs visitors’ attention immediately, while a custom order form invites them to interact with your store, fostering a deeper connection. - Increased Sales Opportunities
Highlighting a product and offering customization options caters to diverse customer preferences, boosting the likelihood of conversions and upselling. - Personalized Shopping Experience
Allowing customers to submit specific requests via a custom order form provides a tailored experience, enhancing satisfaction and building brand loyalty. - Streamlined Order Management
Collecting detailed information about customer needs directly through your Shopify store helps streamline communication and order fulfillment. - Improved Store Aesthetics
A well-designed featured product section and an intuitive custom order form add visual appeal and professionalism to your home page. - Boosted Brand Trust
Offering customization demonstrates your commitment to meeting customer demands, positioning your store as reliable and customer-focused.
Implementing this feature not only makes your store stand out but also creates a seamless path for your customers to find exactly what they’re looking for.
custom-order-form.liquid
- Access Your Shopify Theme Code:
Go to your Shopify Admin → Online Store → Themes → Actions → Edit Code. - Create a New Section:
Under the Sections folder, create a new section file. For example, name itcustom-order-form.liquid. - Add the Code:
Below is the full code for the section.
<div class="custom-order-section">
<!-- Image Section -->
<div class="custom-order-image">
{% if section.settings.image != blank %}
<img src="{{ section.settings.image | img_url: '1024x1024' }}" alt="Custom Order Image" />
{% else %}
<p>Please upload an image in the section settings.</p>
{% endif %}
</div>
<!-- Form Section -->
<div class="custom-order-form">
<h2>{{ section.settings.form_heading }}</h2>
<p>{{ section.settings.form_description }}</p>
<form method="POST" action="/contact" enctype="multipart/form-data">
<!-- Name -->
<label for="name">Name:</label>
<input type="text" name="name" id="name" placeholder="Your Name" required>
<!-- Email -->
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="Your Email" required>
<!-- Message -->
<label for="message">Message:</label>
<textarea name="message" id="message" placeholder="Your Custom Order Request" required></textarea>
<!-- File Upload -->
<label for="file_upload">Upload File:</label>
<input type="file" name="file_upload" id="file_upload" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
<!-- Submit Button -->
<button type="submit">Send Request</button>
</form>
</div>
</div>
<style>
.custom-order-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
}
.custom-order-image img {
max-width: 100%;
border-radius: 8px;
}
.custom-order-form {
flex: 1;
}
.custom-order-form h2 {
margin-bottom: 10px;
}
.custom-order-form form label {
display: block;
margin: 10px 0 5px;
}
.custom-order-form form input,
.custom-order-form form textarea,
.custom-order-form form button {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
.custom-order-form form button {
background: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
.custom-order-form form button:hover {
background: #0056b3;
}
</style>
Settings Schema for Customization
Add this schema to the bottom of the custom-order-form.liquid file for customization in the Shopify Theme Editor.
{% schema %}
{
"name": "Custom Order Form",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Upload Image"
},
{
"type": "text",
"id": "form_heading",
"label": "Form Heading",
"default": "Send Us Your Custom Order Request"
},
{
"type": "textarea",
"id": "form_description",
"label": "Form Description",
"default": "Fill out the form below and let us know your requirements. We will get back to you shortly!"
}
]
}
{% endschema %}