Product pages - Get customization information for products

Store Design
101

Thank you so much for the complete answer Paul, being extremely new to coding I only understood half of what you said.

Do you think you can tell me, if my line codes are outside the “form”

Thank you again :slight_smile:

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign current_variant_sale = false -%}
{% if current_variant.compare_at_price > current_variant.price %}
{%- assign current_variant_sale = true -%}
{% endif %}
{% assign featured_media = current_variant.featured_media | default: product.featured_media %}

{% comment %}

Product Featured Media

{% endcomment %}

{% assign variant_media_ids = '' %}

{%- unless product.has_only_default_variant -%}

{% for variant in product.variants %}
{% assign variant_media = variant.featured_media %}

{%- if variant_media -%}

{%- if variant_media_ids contains variant_media.id -%}
{% continue %}
{%- endif -%}

{% assign variant_media_ids = variant_media_ids | append: variant_media.id | append: ’ ’ %}
{% assign featured = false %}
{%- if featured_media == variant_media -%}
{% assign featured = true %}
{%- endif -%}

{% include ‘product-preview-image’ with media: variant_media, featured_media: featured, gallery_type: ‘media’, data_image: ‘data-variant-media-image’ %}
{%- endif -%}

{% endfor %}
{%- endunless -%}

{% unless featured_media and variant_media_ids contains featured_media.id %}
{% include ‘product-preview-image’ with media: featured_media, featured_media: true, gallery_type: ‘media’, data_image: ‘data-variant-media-image’ %}
{%- endunless -%}

{% include ‘shopify-xr-button’ %}

{% comment %}

Product Form & Description

{% endcomment %}

{% if section.settings.show_vendor %}
{{ product.vendor }}
{% endif %}

{{ product.title }}

{{ ‘products.product.sale_price’ | t }}
{{ ‘products.product.price’ | t }}
{{ current_variant.price | money }}

{{ ‘products.product.regular_price’ | t }}
{{ current_variant.compare_at_price | money }}

{% include ‘product-unit-price’, variant: current_variant %}

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}

{%- if shop.taxes_included -%} {{ 'products.product.include_taxes' | t }} {%- endif -%} {%- if shop.shipping_policy.body != blank -%} {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }} {%- endif -%}
{%- endif -%}
{{ product.description }}
Votre prénom

{% include ‘product-form’ %}
{% if section.settings.show_share_buttons %}
{% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}

{% include 'social-sharing', type: "product", links: 'bottom' share_title: product.title, share_permalink: product.url, share_image: featured_media %}
{% endif %} {% endif %}

{% comment %}

Product Share Buttons

{% endcomment %}
{% if section.settings.show_share_buttons %}
{% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}

{% include 'social-sharing', type: 'mobile', share_title: product.title, share_permalink: product.url, share_image: featured_media %}
{% endif %} {% endif %}

{% comment %}

Product Media Gallery

{% endcomment %}
{%- if product.media.size > 1 -%}

{% comment %}
If we are hiding variant media which are displayed at the top of the
page, then find total number media not set as a variant media or as the
featured media.

We need the total number of media to be displayed so that we know what
arrangement the media need to be positioned in, i.e. rows of 3 or 2
media.
{% endcomment %}

{%- if section.settings.hide_variant_media -%}
{% assign variant_media_ids_array = variant_media_ids | split: ’ ’ %}
{% assign total_media = product.media.size | minus: variant_media_ids_array.size %}
{%- else -%}
{% assign total_media = product.media.size %}
{%- endif -%}

{% comment %}
Insert images into rows of 3 and/or 2 depending on the total number of
images.
{% endcomment %}
{% assign total_modulus = total_media | modulo: 3 %}

{% if total_media == 1 %}

{% endif %}

{% for media in product.media %}

{% unless variant_media_ids contains media.id and section.settings.hide_variant_media %}
{% capture data_image %}
data-parent-fit=“cover”
{% endcapture %}

{% include ‘product-preview-image’ with media, featured_media: false, gallery_type: ‘submedia’, data_image: data_image %}

{% endunless %}
{% endfor %}

{% if total_media == 1 %}

{% endif %}
{% endif %}

{% comment %}

Product Slideshow

{% endcomment %}
{% unless product.media.size == 0 %}

{% include 'icon-close' %}
{% for media in product.media %} {%- capture product_media_wrapper_class -%} product-slideshow__slide slider__slide{%- if forloop.first %} slider__slide--active {%- endif -%} {%- endcapture -%}

{% include ‘media’ with media,
section_type: ‘slideshow’,
parent_fit: ‘contain’,
featured_media: true,
data_image: ‘data-product-slideshow-image’,
product_media_wrapper_class: product_media_wrapper_class,
product_media_wrapper_data: ‘data-product-slideshow-slide’,
image_class: ‘fade-in’
%}
{% endfor %}

{% include ‘shopify-xr-button’ %}

{% unless product.media.size == 1 %}

{% include ‘icon-arrow-left’ %}
{{ ‘general.pagination.previous’ | t }}

{% include ‘icon-arrow-right’ %}
{{ ‘general.pagination.next’ | t }}

{% for media in product.media %} {{ 'sections.product_template.slide' | t: number: forloop.index }} {% endfor %}
{% endunless %}
{% endunless %}

{% comment %}

Product Data

{% endcomment %}

102

When pasting code there is an “insert code” formatting button, please avoid pasting very big files, and files in their entirety that belong to a theme.

The keyword here is form if you have a similar issue be sure to look in all related included snippets|files inside the product template for the relevant form tags

@Saeadamas

Fortunately I knew what to look for with ctrl+f so didn’t have to read that whole thing :wink:

You’ve been putting the line item properties in the product page template, aka the PDP, but not in the product form itself which is a snippet:

**{% include 'product-form' %}**

Move your code into that file, using my previous solution steps looking for <form… or {%form.. type tags

103

Oh ok I’m Sorry.

So I did move my Code lines on the right section as you directioned me, but now unfortunately I cannot see the Custom Field on my product page anymore

104

I am having trouble with my customization product templates. It shows up for the first variant but disappears for the rest. This is required for my customers, how do I make it appear for all variants?

105

@Saeadamas looked at your site and the code location is unchanged, you may need to reread the directions and find the right location or use the form attribute method.

Goodluck

106

I have implemented this and its all working. Still need to tweak a little to make them mandatory etc.

The issue I am having is with the upload file function. It works, however, when a customer uploads an image and we get it in the order. Its a webp file and is majorly compressed beyond usability. Is there any way to stop the compression etc so we can get a usable image from the customer?

107

@Liam_Elder This is due to a previous advancement https://changelog.shopify.com/posts/online-stores-automatically-serve-webp-images

  1. Do a test order and verify it’s not something the customer is doing unknowingly for the image size.
  2. Normally when you click the thumb, in the orders page, for a file upload image it should then automatically download a normal sized version in WebP format.
  3. If it seems corrupted you may have download the small thumb, outdated software, or just need to use a utility to convert it to png.
  4. If you are clicking the small thumbnail and choosing ‘Save Image as’ what you want to do instead is right click and choose ‘Save link as’ that will let save it as a jpeg if that’s what was uploaded.
    1. Some browsers will also let you change the image type in the save dialog.
  5. Copy the link and append the url with ?format=jpeg
  6. Alternatively use a browser that doesn’t support WebP , such as safari for macOS, and it will just download as a jpeg.

If none of the above work and WebP is compression images too badly then contact shopify support and let them know about this limitation.

Beyond that for the future you will want to make losslessly converting WebP into the desired format part of your image processing pipeline

108

@PaulNewton

Thanks for this. I may have been a Mac problem. Circumnavigated by your ‘Save link as’ Method. It works just fine on Windows both ways.

109

Hi Paul, could you assist on how to have my 3 options to be on the same line? Also, I would like the dropdown box background colour to be #000000 with the words in #FAEBD7. Thank you in advance!

Screenshots:

Untitled.png
Untitled.png973×747 22.2 KB

Code:

			<p class="line-item-property__field">
  			<label>Canned Cocktail #1</label><br>
 			<select required class="required" id="canned-cocktail-1" name="properties[Canned Cocktail #1]">
    		<option value="Orh Huey">Orh Huey</option>
    		<option value="Ju Hua">Ju Hua</option>
    		<option value="Espresso Martini">Espresso Martini</option>
    		<option value="Skittles">Skittles</option>
    		<option value="White Sangria">White Sangria</option>
    		<option value="Red Sangria">Red Sangria</option>
  			</select>
			</p>
          <p class="line-item-property__field">
  <label>Canned Cocktail #2</label><br>
  <select required class="required" id="canned-cocktail-2" name="properties[Canned Cocktail #2]">
    <option value="Orh Huey">Orh Huey</option>
    <option value="Ju Hua">Ju Hua</option>
    <option value="Espresso Martini">Espresso Martini</option>
    <option value="Skittles">Skittles</option>
    <option value="White Sangria">White Sangria</option>
    <option value="Red Sangria">Red Sangria</option>
  </select>
</p>
          <p class="line-item-property__field">
  <label>Canned Cocktail #3</label><br>
  <select required class="required" id="canned-cocktail-3" name="properties[Canned Cocktail #3]">
    <option value="Orh Huey">Orh Huey</option>
    <option value="Ju Hua">Ju Hua</option>
    <option value="Espresso Martini">Espresso Martini</option>
    <option value="Skittles">Skittles</option>
    <option value="White Sangria">White Sangria</option>
    <option value="Red Sangria">Red Sangria</option>
  </select>
</p>
110

@GeraldLee that’s a design issue separate from the customization you’ll want to make a different post in the design forum for extended structural andlstyling help.

.line-item-property__field {
 display:block;
 width: 32%;
 color: #FAEBD7;
}
.line-item-property__field select option { 
 background-color: #000000;
}
111

Hey!

I tried to do this but I couldn’t find type=“submit” in my code. I have a paid app currently to give me this custom text box. Do I need to remove the app and try again?

Thanks

Rainie

112

Hi,

This is awesome.

For whatever reason I am unable to create a test order, but I am curious if I add this property field, fr example in my case I want to have email address associated with a product, once the order is placed where will I as an admin be able to see the email address that the buyer entered on the product page? will it be in the additional information area?

113

Hello @TyW ,

Are you offering a privet service to make this customization in the Shopify site?

Since there are changes in the Shopify temple and I’m not a programmer I wonder if it’s possible to get you or one of your team to create it on my site.

Please, let me know if you’re offering a privet service I’ll be glad to hear from you and I will explain exactly what I need.

If yes, can you please reach me at -boolly@gmail.com, and please let me know here your name so I’ll know to recognize you in my email’s traffic.

Thank you,

Dana

114

I followed this guide to get customization information for products on my product page, but i’d like to get it working on my home page as well.

https://community.shopify.com/c/Shopify-Design/Product-pages-Get-customization-information-for-produ…

Is there any way to do this? Thank you in advance for your help!

115

Hi there,

I’m with Minimal theme. I’ve added customisation on my product but it will not show up in cart even after adding in code that was recommended here.
Please help me

116

Thanks for the reply, but I am trying to put the information in on the seller’s end. We are using multivendor marketplace, and we have multiple sellers. I want to make sure they all include the correct information about their listed products, but I don’t know how to add more fields for sellers to fill out.

117

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.

Please i need help, i don’t know where else to serch to look up

118

Hi

Thank you for such an easy to use tutorial. I am a complete novice to this and found it very straight forward.

However I have an issue. All of the products I will be selling will have completely different personalisation requirements. If I follow your instructions they change the product-template.liquid and it puts the personalisation field exactly were I want it. But if I go to create new product templates I get a screen that looks like below:

{% comment %}

The contents of the product.liquid template can be found in /sections/product-template.liquid

{% endcomment %}

{% section ‘product-template’ %}

{% section ‘product-recommendations’ %}

Which is linked to product-template.liquid the only way I can workout to put in the new personalisation fields is putting it just under {% section ‘product-template’ %} this then puts the personalisation field under the item description and once added to cart it doesn’t show the required personalisation as it does by doing via product-template.liquid.

I hope this makes sense I suspect its me missing something.

Many Thanks

119

Thank you for the tutorial. I am trying to add the customization to the email template. I have 4 line properties for my products. When I add the following code to the templates, all my line properties show us as one line (ie -Line 1: xxxx -Line 2: xxxx -Line 3: xxxx :disappointed_face:

{{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}

How do I break the line properties in the email to show across multiple lines. For example:

-Line 1: xxxx

-Line 2: xxxx

-Line 3: xxxx

Thanks,

Michelle

120

Paul,

I am trying to implement this on a sectioned site using the Supply theme, and it has no effect at all.

This is the code I have:

<p class="line-item-property__field" { display: block; width: 32%; }

What am I missing from this?

I also have a list of checkboxes generated by the UI elements generator that looks terrible on the actual page…
https://www.agreeableagony.com/collections/rope/products/custom-color-mfp-rope?variant=29446781108333

I am struggling to find the right search terms to just go look up the flags and their implementations.