This Stencil theme enhances your online store's product view page with a dynamic monogram feature. Customers can click the "Customize" button to open a popup window with two sections:
-
Image Section: This displays the product image, serving as a canvas for custom text and color swatches.
-
Text Customization Section: Here, customers can:
- Enter text in an input box.
- Select color swatches from checkboxes.
- Apply the selected color to the entered text, instantly changing its appearance on the product image.
This monogram feature empowers customers to personalize products and provides a more engaging shopping experience.
- Enhanced User Experience: Real-time customization increases engagement and satisfaction.
- Personalization: Customers can add their touch, boosting the likelihood of a purchase.
- Color Swatch Integration: Easy color selection ensures a seamless blend with product design.
- Instant Preview: Product image updates in real-time, offering immediate feedback.
- Access to your online store's Stencil theme files.
- Basic knowledge of HTML, CSS, and JavaScript may help with customization.
###Clone the Repository:**
git clone https://github.com/Rahulkumarbrj/monogram.git
###Move to the dir:**
cd monogram
###Add stencil requirements:**
Stencil init
? What is the URL of your store's home page? <store url>
? What is your Stencil OAuth Access Token? <access token>
? What port would you like to run the server on? (5000) <port>
- assets/js/theme/custom/monogram.js
- templates/components/products/product-view.html
- templates/components/products/options/swatch.html
- templates/components/products/options/input-text.html
- assets/js/theme/product.js
- Add an image for the product with the alt tag "monogram"
- Create two Modifier Options with one
- LABEL "Enter your initials or name to be monogrammed" AND TYPE "TEXT"
- LABEL "Choose your colour" AND TYPE "Swatch"