Content
Snipcart
-
Get API key
-
Get Generated HTML code to embed to WordPress theme
-
Whitelist your domain name and Shifter’s domain (
SITE-ID.static.getshifter.net
,getshifter.io
)
WordPress
-
Install and setup Advanced Custom Field plugin
-
Install and setup Custom Post UI plugin
-
Modifying theme files (e.g.
header.php
,single-snipcart_product.php
,archive-snipcart_product.php
)
Also refer to
-
Snipcart’s official support document : WordPress Integration: An Easier Way to Manage Products
-
Scotch’s tutorial: Full E-Commerce Integration of Snipcart with WordPress
Phase 1: Setting up Snipcart account
We should do are:
-
Sign up
-
Get API key and HTML code to WordPress integration
Sign up to Snipcart
Make sure [TEST] is activated
![](/wp-content/uploads/2024/03/210319543-90c6d2b8e814b4db8d543a35.png)
Click Account icon top of right of page
![](/wp-content/uploads/2024/03/210363075-3bfc217f626df520379947a8.png)
Click [API KEYS]
![](/wp-content/uploads/2024/03/210364322-b3145eeb0db1b8e8ca5e3e92.png)
Copy HTML code contains API key
This code will be paste to WordPress theme’s file.
![](/wp-content/uploads/2024/03/210366119-5b5ffe27aaaf34ec456ca8ad.png)
Whitelist domains
Navigate to [DOMAINS & URLS] under [ACCOUNT] menu
![](/wp-content/uploads/2024/03/210961620-0018aaf504e243e658cea2b3.png)
Set default website domain
Choose [https] from [PROTOCOL] and input your domain name (e.g. www.example.com, getshfter.io) to DOMAIN field.
![](/wp-content/uploads/2024/03/210960517-86879234d3a2ff945d41db16.png)
Click [Save] to apply changes
![](/wp-content/uploads/2024/03/210962681-570f0aaf72646f797915fef6.png)
Phase 2. Install set up plugins on WordPress
Todos on WordPress
-
Install required plugins (Advanced Custom Field and Custom Post UI) and set them up
-
Modifying theme files (e.g.
header.php
,single-snipcart_product.php
,archive-snipcart_product.php
) -
Confirm Snipcart wroks
-
Generate and deploy
Start WordPress
Login to Shifter dashboard
![](/wp-content/uploads/2024/03/204307792-368f0f14bc25487b6ae7e6bc.png)
Start WordPress and login to it
![](/wp-content/uploads/2024/03/108776026-7ef52d024730847812ac3ba1.png)
Setting up Custom Post UI plugin
Install Custom Post UI plugin
![](/wp-content/uploads/2024/03/210370807-c6429c21787ce697899c8897.png)
Add new post type
For sample
Post Type Slug: snipcart_product
Plural Label: Product
Singular Label: Product
![](/wp-content/uploads/2024/03/210374109-61321ff5240883821a919837.png)
Setting up Advanced Custom Field
Install Advanced Custom Field
![](/wp-content/uploads/2024/03/210375114-bf13fac4b6f74a82a4847383.png)
Add new field grop
![](/wp-content/uploads/2024/03/210375313-9e76c44890bede643d88adc0.png)
Title: Snipcard Product
Rules: [Post Type
] is [equal
] [ Product
]
![](/wp-content/uploads/2024/03/210375471-37da37ef43f1b5d74b1ac571.png)
Click created Field Group
In here, it’s Snipcard Product.
![](/wp-content/uploads/2024/03/210649372-d2eaa42298f30aac4052b6de.png)
Click [ + Add Field] button to add some requirements
![](/wp-content/uploads/2024/03/210649711-5a07e1311a6be7c8a7609077.png)
(1) Name
Field Label: Name
Field Name: snipcart_name
Field Type: Text
![](/wp-content/uploads/2024/03/210650954-d52c09082b863428069c9eb3.png)
(2) Price
Field Label: Price
Field Name: snipcart_price
Field Type: Number
![](/wp-content/uploads/2024/03/210651318-5b964702b963a00d594783a0.png)
(3) Short Description
Field Label: Short Description
Field Name: snipcart_ḍescription
Field Type: Text Area
![](/wp-content/uploads/2024/03/210651892-4ac6396662f31a5417270dbd.png)
(4) Image
Field Label: Image
Field Name: snipcart_image
Field Type: Image
Return Format: Image URL
![](/wp-content/uploads/2024/03/210652903-7253c0cb6fdb761a5371f386.png)
Click [Update] to save changes
![](/wp-content/uploads/2024/03/210657674-98f145924f657273330e43c2.png)
Phase 3. Edit Theme files
We recommend using Shifter Github Theme/Plugin Installer for modifying theme files.
Refer to our support document: Developing WordPress site on Shifter with GitHub.
All sample code below are quoted from Snipcart’s official document: WordPress Integration: An Easier Way to Manage Products.
header.php
Insert copied HTML code contains API key to header.php
For example
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" id="snipcart" src="https://app.snipcart.com/scripts/snipcart.js" data-api-key="{YOUR_API_KEY}"></script>
<link type="text/css" id="snipcart-theme" href="https://app.snipcart.com/themes/base/snipcart.css" rel="stylesheet" />
Note: jQuery code can be trimmed if theme already calls it.
Copy and rename single.php
to single-snipcart_product.php
them modify it to set Snipcart buy button.
For example
<div id="product" class="site-content">
<img src="<?php the_field('snipcart_image') ?>" />
<button class="snipcart-add-item"
data-item-id="<?php echo $post->ID ?>"
data-item-name="<?php the_field('snipcart_name') ?>"
data-item-url="<?php echo get_permalink(); ?>"
data-item-price="<?php the_field('snipcart_price') ?>"
data-item-description="<?php the_field('snipcart_description') ?>"
data-item-image="<?php the_field('snipcart_image') ?>">
Buy now for <?php the_field('snipcart_price') ?> $
</button>
</div>
Create archive-snipcart_product.php under your theme directory to list your products.
Note: To usearchive-snipcart_product.php
, Has Archives
is set to True
is required when creating the custom post type.
The code would be like below.
<h1>Products</h1>
<?php if ( have_posts() ) : ?>
<table>
<thead>
<th>
Name
</th>
<th>
Price
</th>
</thead>
<tbody>
<?php while ( have_posts() ) : the_post(); ?>
<tr>
<td>
<a href="<?php echo get_permalink(); ?>">
<?php the_field('snipcart_name') ?>
</a>
</td>
<td>
<?php the_field('snipcart_price') ?> $
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<?php endif; ?>
Phase 4. Add new Products
Back to Shifter and WordPress.
Navigate to [Products] menu
![](/wp-content/uploads/2024/03/210692963-9c52c766d90a9bc234243a62.png)
Click [Add New] button
![](/wp-content/uploads/2024/03/210692799-a26852a179bca0961b7a5155.png)
Add product name, price, descriptions, image then publish
![](/wp-content/uploads/2024/03/210694375-fc077265758d710c0100ea8b.png)
Confirm product will be displayed on running WordPress
![](/wp-content/uploads/2024/03/210693812-6446deb63537f7f7843dc555.png)
![](/wp-content/uploads/2024/03/210729419-8afcadad65ab7c5f0446d8a8.png)
![](/wp-content/uploads/2024/03/210729513-a2b229632d422ab591e13a78.png)
![](/wp-content/uploads/2024/03/210960602-3ca019bad2e216ce8fb3cd51.png)
Phase 5. Generate and deploy an artifact
Back to Shifter Dashboard and generate an Artifact
![](/wp-content/uploads/2024/03/201516932-b872b0e5fe12458583c504e3.png)
Then, access your Product’s page and confirm it works
![](/wp-content/uploads/2024/03/210729419-8afcadad65ab7c5f0446d8a8.png)
![](/wp-content/uploads/2024/03/210729513-a2b229632d422ab591e13a78.png)
![](/wp-content/uploads/2024/03/210960602-3ca019bad2e216ce8fb3cd51.png)
Never forget to check test order.
Navigate to ORDERS on Snipcrt’s Dashboard.
![](/wp-content/uploads/2024/03/210964142-1098dee86c66b4af25bd4c91.png)
That’s all!