Description
-
Replacing Add to Cart button with Custom Form (see screenshot)
-
The form will automatically fill in Product Name Field (see screenshot)
-
Note: The guide are only used for certain cases, when you hide the Shop Page, and customers can only access it via certain urls you provide.
How to
If you have problems or can’t install it, you can comment below or send a private message, I’m happy to help you install it (no fee)
#1. First you need to create a Form with Contact Form widget, you can choose free version.
Note: Product Name - Use Short Text Field
#2. Setup Parameter
What is this? When you use URLs in a special structure, e.g: yourdomain/store/chicken-cap-blue?name=Chicken%20Cap%20Blue, the Product Name field will automatically fill in the part after name=
You can see detail here: How to pre-fill form fields using URL Parameters - Elfsight Help Center
Settings > Pre-fill with URL Params
Enter name
#3. Get Contact Form widget embed code
Publish your widget to get embed code
#4. Add code to Shop Page Header (page where you want to do this)
If you have multi shop pages and want to apply for all products, you can add code to Website > Website Tools > Code Injection > Footer
Replace red box code with your widget code
<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-3ec63e5a-9410-43ea-98cc-70414bdaa2f0"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
setTimeout(function(){
$('div[id*="eapps-contact-form"]').insertBefore('.sqs-add-to-cart-button-wrapper');
}, 3000);
})
</script>
<style>
div.sqs-add-to-cart-button-wrapper {
display: none !important;
}
[class*="Content__WidgetContainer-"] {
margin-left: 0 !important;
}
</style>
Explain
- Line 01 - Line 02: Your Contact Form widget code
- Line 03 - Line 10: Code to move Contact Form above Add to Cart Button
- Line 12 - Line 14: Remove Add to Cart button
- Line 15 - Line 17: Remove space on left of Contact Form
Done.
#5. Change Product URL
And you need to use a URL like this for Product, so that Product Name will autofill the name.
https://tuanphan.squarespace.com/store-2/p/country-feast-set-y53en/?name=Country%20Feast%20set
Explain
- https://tuanphan.squarespace.com/store-2/p/country-feast-set-y53en/ is product real url
- name is parameter we entered in step #2
- Country%20Feast%20set is the text that will be displayed in the Product Name field. You can see this post to how to use these parameters
#6. Some problems
One problem is how to change the URL of the product on the Shop Page so that the Product Name field can automatically fill in the product name? >> We need to use script code. You can comment below, I will give code
The above guide are only used for certain cases, when you hide the Shop Page, and customers can only access it via a certain url you provide.
