Product pages - Get customization information for products

Highlighted
New Member
2 0 0

Can someone update the code as this is not updated to work and the comments are still not working for me.  Thank you! 

0 Likes
Highlighted
New Member
2 0 0

Hello, I am using the Debut theme and not finding the "submit" in my code to be able to add customization.  I also want to be clear on what info I am removing when added the new code under Sections.  Thank you!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
8 0 3

Hi @minniebox it's tough to add a tutorial that works for every theme because every theme is different. I downloaded the most recent version of Debut, and I found the type="submit" in the "sections/product-template.liquid" theme file (within the Sections folder here):

 

 

For context, I can see that the product template is rendering two section files with the following code (within"layouts/product.liquid"):

{% section 'product-template' %}
{% section 'product-recommendations' %}

 

That's why I searched for type="submit" in the "sections/product-template.liquid" theme file :)

2 Likes
Highlighted
New Member
2 0 0

Hello,

 

I made it work on my product page and I can see the "Engraving" Section on my product page however, after receiving the order, I cant see it in my order details so I dont know where does this section locate to when customers fill it in. 

Can anyone help me with that as well ? 

 

P.s. I have done everything with the Carts and updated the necessary codes.

Best,

Abdulkadir

 

0 Likes
Highlighted
New Member
2 0 0

I am having this same issue.  How can I make the field the same size as the "Size" field in the example picture provided?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
8 0 3

@coollyguy assuming the engraving option has been added to the product form correctly, and engraving information is provided before adding the item to the cart, the line item properties will show up in the Order screen (in the Admin > Orders section) under each item that has been "engraved" :)

0 Likes
Highlighted
Shopify Staff
Shopify Staff
8 0 3

@anywilldo the form inputs that you add to the product template are styled with CSS classes. You'll need to add the right class from your existing theme to the new inputs if you want them styled the same. Every theme is different, so I can't provide a blanket answer here, but you can see what classes and styles are being used within your existing product template, or within your browser's developer tools. Here's a beginner's guide for web developers on changing the webpage with CSS where you can inspect the class of the existing form elements.

 

If that's a little too advanced, I'd suggest reaching out to a Shopify Expert who can ensure the line item properties are properly coded, stored on each order and styled with the rest of your theme :)

0 Likes
Highlighted
New Member
2 0 0

THANK YOU @stratify ! I was able to accomplish what I need with the following butttt I don't understand why I have to have the product-form__item class at the div level and the product-form__input at the object level (select and input).  Is there a cleaner way to do this?  I'm using the Debut 16.4.0 theme

 

<div class="product-form__controls-group">
<div class="selector-wrapper product-form__item">
<label for="options"</label>
<select id="options" name="properties[Options]" required class="required product-form__input">
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
</select>
</div>
<div class="selector-wrapper product-form__item">
<label for="line1"></label>
<input id="line1" type="text" name="properties[Line 1]" maxlength="11" class="product-form__input required" required placeholder="Line 1">
</div>
<div class="selector-wrapper product-form__item">
<label for="line2"></label>
<input id="line2" type="text" name="properties[Line 2]" maxlength="11" class="product-form__input" placeholder="Line 2 (optional)">
</div>
</div>

0 Likes
Shopify Staff
Shopify Staff
8 0 3

I'm happy to help! Every theme is different and therefore has a specific structure that should be followed. The reason you're seeing specific elements within elements is because most Shopify themes follow the BEM (Block, Element, Modifier) naming convention, which is very helpful for scaffolding reusable theme files and elements. You can always add your own CSS styles to whatever elements you'd like! But it's best to follow the existing CSS/HTML structure, to avoid styles overlapping and causing some unexpected, hair-pulling frustration...

0 Likes
Highlighted
New Member
2 0 0

Not really a CSS question, however having successfully added the file upload functionality to a specific product template, it now then blocks out the variant options once a file is selected to upload. Not sure what/why this is triggered. I have moved the upload file option lower down the page to hopefully get user to make selections, however it is frustrating that once a file is uploaded, the variant options are then not available to be altered. https://www.catfishdesigns.com.au/products/greatnessheatherteels

0 Likes