How do I add a personalization box to my website code?

Store Design
, ,
1

Hey everyone, I have to origin template version 8.0, and I need a code to add to the website template for the personalization box. Please help!

2

Hello @Hen0722 ,

We are AliReviews - All-in-one reviews solution for all businesses.

To add a personalization box to your product page, you can follow these general steps:

1. Edit the product template:

Online store → Themes → Customize → Edit HTML/CSS → Select the template you want to edit

2. Add the personalization box code:

Inside the product template, look for the code that displays the product information (title, price, etc.) and add the following code below it:


  ### Personalization

3. Style the personalization box:

You can style the personalization box using CSS to make it match your store’s design. You can either add the CSS styles directly to the product template or create a new stylesheet and link it to the template.

.personalization-box {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
  max-width: 500px;
}

.personalization-box h3 {
  font-size: 18px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 10px;
}

.personalization-box label {
  display: block;
  margin-bottom: 5px;
}

.personalization-box input,
.personalization-box select {
  display: block;
  margin-bottom: 10px;
  width: 100%;
  padding: 5px;
}

.personalization-box button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-top: 10px;
  cursor: pointer;
}

.personalization-box button:hover {
  background-color: #555;
}

We hope this helps! Let me know if you have any further questions or if there’s anything else we can assist you with.

Regards,

AliReviews team.

3

Hello and thank you, however this did not work unless I’m not adding it correctly.

4

Hi there,

I’m having the same issue. I’d like to try your suggestion but can’t find any option to Edit HTML/CSS when I go to customize my theme. I’m using Retina. Is this possible? Thanks in advance for your help!

5

Hello @Hen0722 ,

Can you provide us details of how you added the code? Maybe there’s something occur or you may add the code to another file by mistake.

Waiting for your reply.

6

Hello @ElleGemAndTonik ,

You can:

Go to Online Store → Theme → Actions → Edit code

Screen Shot 2023-04-10 at 11.13.01.png
Screen Shot 2023-04-10 at 11.13.01.png1433×764 109 KB

Go to theme.liquid and follow the suggestions we provided above

7

Thanks for your fast reply! This has worked for me using other themes, but unfortunately with the Retina theme there doesn’t seem to be any code in the theme.liquid or product.liquid don’t have any code describing title, price or add to cart info. Could this because the Retina theme isn’t compatible with adding a customization box to product pages?

Thanks again!

8

How would you do this if it’s for a certain product only and not the whole site?