Adding a form on cart page for collecting more information from customer order Shopify codes error.
When whoever added the codes based on Shopify document on some theme. It will error.
Cart page form codes:
<div class="page-container">
<div class="form-container">
<h2>Special Order Instructions</h2>
<br>
<p class="cart-attribute__field">
<label for="name-on-item">Name on item</label>
<input id="name-on-item" type="text" name="attributes[Name on item]" value="{{ cart.attributes["Name on item"] }}">
</p>
<p class="cart-attribute__field">
<label for="name-colour-on-item">Name Colour on item</label>
<input id="name-colour-on-item" type="text" name="attributes[Name Colour on item]" value="{{ cart.attributes["Name Colour on item"] }}">
</p>
<p class="cart-attribute__field">
<label for="font">Font</label>
<input id="font" type="text" name="attributes[Font]" value="{{ cart.attributes["Font"] }}">
</p>
<p class="cart-attribute__field">
<label for="other-colours">Other colours</label>
<input id="other-colours" type="text" name="attributes[Other colours]" value="{{ cart.attributes["Other colours"] }}">
</p>
</div>
CSS:
/* Container for the entire page */
.page-container {
display: flex;
justify-content: flex-end; /* Align content to the right */
padding: 20px; /* Add some padding around the content */
width: 100%; /* Ensure the container spans the full width */
box-sizing: border-box; /* Include padding in the width calculation */
}
/* Container for the entire form */
.form-container {
max-width: 500px; /* Set a maximum width for the form */
padding: 20px;
background-color: #f9f9f9; /* Light grey background for contrast */
border: 1px solid #ddd; /* Subtle border */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
font-family: 'Arial', sans-serif; /* Clean and readable font */
text-align: right; /* Align text to the right within the form container */
width: 100%; /* Full width of the container on small screens */
box-sizing: border-box; /* Include padding in the width calculation */
}
/* Heading styling */
.form-container h2 {
text-align: center; /* Center the heading text */
margin-bottom: 20px; /* Space below the heading */
font-weight: bold; /* Bold text */
font-size: 18px; /* Slightly larger font size */
color: #333; /* Darker color for contrast */
}
/* Styling for form fields */
.cart-attribute__field {
display: flex;
justify-content: flex-end; /* Align items to the right */
margin-bottom: 20px; /* Space below each field */
}
/* Label styling */
.cart-attribute__field label {
font-weight: bold; /* Bold text */
color: #555; /* Slightly lighter than black */
font-size: 14px; /* Appropriate font size */
margin-right: 15px; /* Space between label and input */
text-align: right; /* Align text to the right */
line-height: 1.5; /* Better spacing between lines */
}
/* Input field styling */
.cart-attribute__field input {
padding: 10px; /* Added padding for comfort */
border: 1px solid #ccc; /* Soft border color */
border-radius: 4px; /* Rounded corners */
width: 250px; /* Fixed width for consistency */
box-sizing: border-box; /* Include padding and border in element's total width and height */
font-size: 14px; /* Font size for readability */
color: #333; /* Dark color for text */
background-color: #fff; /* White background */
}
/* Focus state for input fields */
.cart-attribute__field input:focus {
border-color: #007bff; /* Blue border on focus */
outline: none; /* Remove default outline */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue shadow on focus */
}
/* Placeholder text styling */
.cart-attribute__field input::placeholder {
color: #999; /* Light grey color for placeholders */
}
/* Responsive Design for Mobile Devices */
@media (max-width: 768px) {
.page-container {
justify-content: center; /* Center the form on smaller screens */
}
.form-container {
max-width: 100%; /* Full width of the container on small screens */
padding: 15px; /* Reduced padding for smaller screens */
}
/* Adjust input field width for smaller screens */
.cart-attribute__field input {
width: 100%; /* Full width of the container */
}
/* Stack labels and inputs vertically */
.cart-attribute__field {
flex-direction: column; /* Stack labels and inputs */
align-items: flex-start; /* Align items to the start */
}
.cart-attribute__field label {
margin-right: 0; /* Remove margin to stack vertically */
margin-bottom: 8px; /* Space below the label */
}
}
And this's error:
"you can only add this item in increments of"
The codes came from Shopify document:
https://ui-elements-generator.myshopify.com/pages/cart-attribute
(Adding it correctly, still had error)
About the issue above we are using other solution instead.
