Product Page Configuration #

Click here to view demo product page

In this article:

I. Basic configuration

In “Product pages” section:

– Show option with dropdown : enter option name to show in dropdown. Ex : size.
– Show quantity selector : Show/hide quantity input.
– Show social sharing buttons : show/hide social sharing block.
– Enable Size chart : show/hide size chart link. To enter

II. Color & Size


Color and size are the tags of product. You can enter product tag such as red, blue, green,… for color and S, X, XL, … for size.
If you don’t clear about product tags in Shopify, please refer this article.

III. Size chart

Upload size chart for all products

In “General Settings” tab, click “Product Settings”, then tick “Use Size chart for all” and upload your size chart image. However, if a product has itself size chart, the system will display product’s size chart instead of size chart for all.

Upload size chart for each product

To upload size chart for each product, you must install Metafields Editor App. View “Metafields Editor” section to get it.

If you have installed Metafields Editor App, go to Apps. Then click “Metafields Editor”.

You will see a product list, click a product you want to upload size chart. Then click “Add New Metafield” button.

Enter namespace is “cdz“, key is “sizechart“, choose value type is “string“. In value input, enter your size chart image url. You can upload your size chart image first, then copy url and paste to this input. Refer here to get uploading files in Shopify.

Finally, click “Add” button to save your size chart image.

If you have so much products, you can use this app http://excelify.io to export products to Excel file, edit metafields as columns for all your products and re-import to your site all at once.

IV. Restock alert text


To stimulate customers, you can show an alert text such as “159 SOLD. HURRY! ONLY A FEW LEFT!”. To edit the number in this text for each product, you must use Metafield Editor app. Just like size chart, open Metafield Editor app.
Enter namespace is “cdz“, key is “sale“, value type is “integer” and value is the number you want to display.

If you have so much products, you can use this app http://excelify.io to export products to Excel file, edit metafields as columns for all your products and re-import to your site all at once.

V. Count down timer

Enter count down timer for all products

In “General Settings” tab, click “Product Setting”. View “count down” box:

Tick “Enable countdown for all” checkbox and input your timer in “Countdown Express” input.

You must enter with correct format.
Enter count down timer for each product

Just like size chart, you must install and go to Metafied Editor app to enter your count down timer
– Enter namespace is “cdz“, key is “deal“, value type is “string” and value is your count down timer express.

If you have so much products, you can use this app http://excelify.io to export products to Excel file, edit metafields as columns for all your products and re-import to your site all at once.

Count down timer format

There are two formats that carry two different meanings :
– DD:HH:II:SS : enter the number of day, hours, minutes, seconds. The system will count down from now. Ex: 05:03:35:50:00 : the system will count down from now, and end at now + 05 days + 3 hours + 35 minutes + 00 seconds.
– YYYY-MM-DD HH:II:SS : enter a certain day, the system will count down to this day. Ex : 2018-09-10 05:35:00.

VI. Additional tabs

You can add your additional tabs after the main tabs.

Configuration

– Title : Tab title.

– Translate title : translate tab title.

– Content : the content of tab.

VII. Related products

Configuration

– Show Related Products : show/hide related products block.

– Show label : show/hide product label in each item.

– Show wishlist : show/hide wishlist button in each item.

– Show Add to cart button : show/hide add to cart button in each item.

– Show quick shop button : show/hide quick shop button in each item.

– Show compare button : show/hide compare button in each item.

VIII. Secure Checkout image

Configuration

– From your Shopify admin, go to Online Store > Themes. Click Actions > Edit code .

– On the Edit code page , click add new asset in Assets folder, and upload file with the same name “secure_checkout_icon.png”

IX. Grouped product images


Suppose you have a product which has 2 colors, each color has multiple images like this demo https://fastest-fashion-ellyana.myshopify.com/products/claus-coat. How to group product images for each color ? Just follow below steps, you will have a product with product images are grouped by color.
– Step 1 : From your Shopify admin, go to Online Store > Themes. Click “Customize” button of theme you want to edit.
– Step 2 : click Theme Settings > Product Setting. In “group option name” field, declare option name you want to use to group images. If you want to group by color, just add “color” word. If your products do not have color, you can group images by anthor option such as size, style,… Tips : you can use “first” word to groupd images by first option, this will help you group images dynamically. And use “none” word if you want to turn off this feature.

– Step 3 : group product images in editing product page. In Shopify admin, go to products page.

Then click product you want to gorup image. Scroll to “images” and “variants” boxes.

In this tutorial, i will guide you group images by color, but you can do same for other options. As you see above image, this product has 2 colors : “White and Yellow”, and product have 6 images. I want 3 images for “White” and 3 images for “Yellow”.

Now i will use “alt” attribute to group images. But before do that, i have a good news for you. The images are featured image of variant will be grouped to color of corresponding variant.

Wow, i only need to group 4 remain images instead 6 images. Hover mouse and click “alt” of image you want to group.

You will see a popup, just add “group-white” to “Image alt text” field because i am grouping this image for “White” color. We will call “group-white” is “grouping images formula“. General syntax : group-<handle-string-color>.

Handle string color must follow handle strings in Shopify, refer https://help.shopify.com/themes/liquid/filters/string-filters#handle-handleize. Example : you have color is “White”, just add “group-white”, or “group-yellow” for “Yellow” color. But if your color name has many words such as “Dark Blue”, just add “group-dark-blue”.

Notes :
– The images are not featured image of all variants and alt text does not have any “grouping images formula” will be shown in all colors.
– The images which alt contains “group-all” word will be shown in all colors.
Help Guide Powered by Documentor
Suggest Edit