Instructions for product management on Francois & Co.'s shopify website.
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.
Once clicked, the font will change to a monospace font and all the selections up top will disappear.
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.
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.
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>
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>
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> </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"
Step 2: Setting Variants and Inventory
Scroll down to see the Variants section and click the checkbox.
Enter the options for Material and Size.
Set the price, quantity available and sku (if applicable) for all variants.
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 -->
Step 4: Save
Don't forget to save!
How to add material variants
From the admin panel, click Online Store then Themes.
Under the Actions tab, Click Edit Code. Don't worry, you won't need to code anything.
Scroll down to the Assets section and click Add a new asset.
An upload window will appear. Click Choose File. *See note about file naming below before clicking Upload asset.
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
Go to your product page and add the newly uploaded material as a Variant option.
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.
Copy and paste the h2 tag and paste after the url tag.
<img src="url" style="width: 100%;"> <h2> Add you caption here...!</h2>
And as always, click save.
The caption will look like this when added correctly.