How to Customize Products in Shopify

Instructions for product management on Francois & Co.'s shopify website.

Jump to:

Intro

How to add a product description

How to add the product PDF

Adding the materials section

Adding products to Collections

Converting a product to e-commerce

How to add material variants

How to add captions to products

Intro

All product details will need to be styled under the HTML editor in the Description. To get there, click the <> button in the top right of the text editor. This will ensure all of the text will be styled correctly.

Fco_HMTL-editor

Once clicked, the font will change to a monospace font and all the selections up top will disappear.

Fco-HMTML-editor-2

 

How to add a product description

Everything below in bold italics needs to be changed per product.

<p class="message">PRODUCT DESCRIPTION</p>

<p class="p1">[Description goes here]</p>

How to add the product PDF

To upload PDFs to Shopify's server, go to Settings > Files.

Fco-settings-2

Click on Upload files and select the PDF to upload. Once uploaded, you can copy the url and paste it in the code snipped between the quotation marks.

Fco_file-pdf-upload

Back in the product's html editor, copy and paste the code below. Everything below in bold italics needs to be changed per product.

<p class="message">DOWNLOAD SPECIFICATIONS</p>

<p><a href="[shopify PDF url]" target="_blank">[Product Title] - Specification Sheet.pdf</a></p>

Adding the materials section

Copy and paste this snippet below for the section title and description.

<p class="message">MATERIALS AND OPTIONS</P>

<p>This product is available for custom order. Learn more about the available materials and options below.</p>

For Scagliola, copy and paste below.

<p><a title="Our Materials | Scagliola" href="https://francoisandco.com/our-materials/scagliola/"><img src="https://cdn.shopify.com/s/files/1/0507/8112/6824/files/scagliola_480x480.png?v=1607778837" alt=""></a>&nbsp;&nbsp;

For Hand-carved, copy and paste below.

<a title="Hand-Carved" href="https://francoisandco.com/materials/architecturals/french-lime-stone/"><img alt="" src="https://cdn.shopify.com/s/files/1/0507/8112/6824/files/handcarved_480x480.png?v=1607778713" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0507/8112/6824/files/handcarved_480x480.png?v=1607778713"></a>&nbsp;&nbsp;

For Metal, copy and paste below.

<a title="Our Materials | Metal" href="https://francoisandco.com/our-materials/metal/"><img alt="" src="https://cdn.shopify.com/s/files/1/0507/8112/6824/files/metal_480x480.png?v=1607778830" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0507/8112/6824/files/metal_480x480.png?v=1607778830"></a>&nbsp;</p>

Adding products to Collections

For the category linking to work, it's important to select a Collection for the product to live within. Collections are located in the right column of the product editor.

To add a new collection, select Collections from the left menu.

Converting a product to e-commerce

The default template is product. To change to e-commerce, select product.custom from the dropdown menu.

Step 1: Change template

Change the template suffix from "product" to "product.custom"

Fco-Template

Step 2: Setting Variants and Inventory

Scroll down to see the Variants section and click the checkbox.

Fco-Variants

Enter the options for Material and Size.

Fco-Variants-22

Set the price, quantity available and sku (if applicable) for all variants.

Fco-Variants-33

Step 3: Add <!-- split --> code to Description

Place the split code snippet after the Product Description and before the Download Specifications. This will make sure the Description is placed above the Size and Materials selections.

<!-- split -->

Fco-split

Step 4: Save

Don't forget to save!

How to add material variants

From the admin panel, click Online Store then Themes.

Francois-Variant-Process-00001

Under the Actions tab, Click Edit Code. Don't worry, you won't need to code anything.

Francois-Variant-Process-00002

Scroll down to the Assets section and click Add a new asset.

Francois-Variant-Process-00003

An upload window will appear. Click Choose File. *See note about file naming below before clicking Upload asset.

Francois-Variant-Process-00004

Before you upload, make sure the materials image is renamed to the below formatting. The material won't work unless it's renamed to match how it will be typed on the Product page.

 

Format the file name: material-name_50x.png

  • Dashes in place of spaces
  • _50x at the end of the name

Francois-Variant-Process-00005

Go to your product page and add the newly uploaded material as a Variant option.

Francois-Variant-Process-00006

Don't forget to save!

Adding captions to photos

For pages like Architectural Accents, scroll down until you see <div class = "mySlides">. The image below this line of code is in the popup gallery. 

Captions

Copy and paste the h2 tag and paste after the url tag. 

<div class="mySlides">

<img src="url" style="width: 100%;"> <h2> Add you caption here...!</h2>

</div>

And as always, click save.

The caption will look like this when added correctly.

Caption-preview