Smart Shopify Product
Wordpress plugin
App Details
This WordPress plugin allows add some shortcodes on post to insert Shopify products. Also allow to retrieve/update/remove automatically all products from the shopify store (like a sync function).
Smart Shopify Product
This WordPress plugin allows add some shortcodes on post to insert Shopify products. Also allow to retrieve/update/remove automatically all products from the shopify store (like a sync function).
Shortcodes
- [shopify_basic_product product_id=”ID”]: Allows to insert all product basic information and an add to cart button. This last, change its appearance accordingly the choices of the product variants that customers selects. this view is ideal for a product detail page.
- [shopify_info_product product_id=”ID” product_link=”src_of_product_detail”]: Insert a basic product card with the main image, title and price. Ideal for a collection page.
Button for shopping cart
To get access to the shopping cart you can insert this code on the place of your preference:
Note: You must have Font Awesome to get the fa-shopping-cart icon.
<button class="btn--cart-tab js-prevent-cart-listener"> <span class="btn__counter"></span> <span class="fa fa-shopping-cart"></span> </button>
Shopify Cart
To get a Shopify Cart where to see all products added to cart, you can insert this code on the place of your preference. It’s a good practice to locate it just next to the open <body> HTML tag:
<!-- Shopify Cart HTML --> <!-- ================================================================================== --> <!-- .cart begin --> <div class="cart"> <!-- .cart-section begin // cart header --> <div class="cart-section cart-section--top"> <h2 class="cart-title">Your cart</h2> <button class="btn--close"> <span aria-role="hidden">×</span> <span class="visuallyhidden">Close</span> </button> </div> <!-- .cart-section end --> <!-- .cart-form begin // cart body --> <div class="cart-form"> <div class="cart-item-container cart-section"> </div> <!-- .cart-bottom begin --> <div class="cart-bottom"> <div class="cart-info clearfix cart-section"> <div class="type--caps cart-info__total cart-info__small">Total</div> <div class="cart-info__pricing"> <span class="cart-info__small cart-info__total">CAD</span> <span class="pricing pricing--no-padding"></span> </div> </div> <div class="cart-actions-container cart-section type--center"> <div class="cart-discount-notice cart-info__small">Shipping and discount codes are added at checkout.</div> <input type="submit" class="btn--cart-checkout" id="checkout" name="checkout" value="Checkout"> </div> </div> <!-- .cart-bottom end --> </div> <!-- .cart-form end --> </div> <!-- .cart end --> <script id="CartItemTemplate" type="text/template"> <div class="cart-item"> <div id="cart-item-id" class="hidden"></div> <div class="cart-item__img"></div> <div class="cart-item__content"> <div class="cart-item__content-row"> <div class="cart-item__variant-title"></div> <span class="cart-item__title"></span> </div> <div class="cart-item__content-row"> <div class="cart-item__quantity-container"> <button class="btn--seamless quantity-decrement" type="button"><span>-</span><span class="visuallyhidden"><!-- Decrement --></span></button> <input class="cart-item__quantity" type="number" min="0" aria-label="Quantity"> <button class="btn--seamless quantity-increment" type="button"><span>+</span><span class="visuallyhidden"><!-- Increment --></span></button> </div> <span class="cart-item__price"></span> </div> </div> </div> </script> <!-- END - Shopify Cart HTML --> <!-- ================================================================================== -->
Settings
You can access to the Smart Shopify Product setting through the S. Shopify Product item menu in the WordPress admin menu.
Shopify Tag
On this section you will configure the main params to connect the WordPress website to the Shopify store, through the Shopify API credentials and the number of the app.
- API url: The url of Shopify API for your Shopify app. This look like: https://apikey:[email protected].
- Shop url: The url of your Shopify store. This look like: my-shop.myshopify.com.
- Access Token: This is a long random string of your Shopify app. This is knew as the API Key too.
- App ID Number: Usually this number is 6, for the Buy Button.
Post Type of Product Tag
On this section you will configure the post type in your WordPress website you use to represent a Shopify product. It usually works fine with post types created with Toolset plugin (the free version of this, allow to create this post types :)).
- Post Type Slug: Slug of the Post Type for Products you have had created, using Toolset or another plugin for management of custom Post Type. Eg: product, shopify-product, sh-product.
- Product ID Meta Slug: Slug of the custom field type (or meta) of Shopify Product ID, for the Product Post Type you have had created, using Toolset or another plugin for management of custom Post Type. Eg: product-id, shopify-product-id, sh-product-id. Note: Custom field created with Toolset plugin have a “wpcf-” prefix. Eg: wpcf-product-id.
Shopify fields options Tag
On this sections you will be capable to set some settings about the view of some fields of the Shopify products, like price, buy buttons and variant option selectors.
- Show Shopify price field: Mean that the price of Shopify products will be shown or not.
- Replacing text for Shopify price field: If it’s not empty, the price of the Shopify products will be replaced with your replacing text. It’s ideal when you don’t want to show the prices to users.
- Show card Buy Button: If checked, the Buy Button will be shown on the product cards, for collection views or sections.
- Show details page Buy Button: If checked, the Buy Button will be shown on product detail pages.
- Show Variant Options selector: If checked, the selector of the Variant Options for Shopify products will be shown.
Note: Be careful. If checked and the product that is currently shown has no items available in stock for the first Variant Option, it will cause you not able to choice another variant to make shop.
Refresh function
You can make some kind on sync with the products of your Shopify store. On the setting of the plugin, you will find a Refresh Shopify Product button, it will retrieve all Shopify products and will remove of your website the Shopify products that don’t exist anymore.
* If you check the Publish new products right away (set to Pending Review if unchecked) option, post types created from Shopify products will publish automatically.
Browser Testing
We are using BrowserStack for testing the plugin’s functions in the most popular moders browsers.
With BrowserStack you can automate all web and mobile browser tests. It offers you a chance to keep attention to the real functionalities of your products and to fit the needs of your customers without worrying about browser testings.
Pricing
Starting from $0 per month.
App Info
Rating
Reviewers
No reviews
Tags
Developed By
Yulio Aleman Jimenez
Quick & Easy
Find the Best Wordpress plugins for you
Common Ninja has a large selection of powerful Wordpress plugins that are easy to use, fully customizable, mobile-friendly and rich with features — so be sure to check them out!
Testimonial
Testimonial plugins for Wordpress
Galleries
Galleries plugins for Wordpress
SEO
SEO plugins for Wordpress
Contact Form
Contact Form plugins for Wordpress
Forms
Forms plugins for Wordpress
Social Feeds
Social Feeds plugins for Wordpress
Social Sharing
Social Sharing plugins for Wordpress
Events Calendar
Events Calendar plugins for Wordpress
Sliders
Sliders plugins for Wordpress
Analytics
Analytics plugins for Wordpress
Reviews
Reviews plugins for Wordpress
Comments
Comments plugins for Wordpress
Portfolio
Portfolio plugins for Wordpress
Maps
Maps plugins for Wordpress
Security
Security plugins for Wordpress
Translation
Translation plugins for Wordpress
Ads
Ads plugins for Wordpress
Video Player
Video Player plugins for Wordpress
Music Player
Music Player plugins for Wordpress
Backup
Backup plugins for Wordpress
Privacy
Privacy plugins for Wordpress
Optimize
Optimize plugins for Wordpress
Chat
Chat plugins for Wordpress
Countdown
Countdown plugins for Wordpress
Email Marketing
Email Marketing plugins for Wordpress
Tabs
Tabs plugins for Wordpress
Membership
Membership plugins for Wordpress
popup
popup plugins for Wordpress
SiteMap
SiteMap plugins for Wordpress
Payment
Payment plugins for Wordpress
Coming Soon
Coming Soon plugins for Wordpress
Ecommerce
Ecommerce plugins for Wordpress
Customer Support
Customer Support plugins for Wordpress
Inventory
Inventory plugins for Wordpress
Video Player
Video Player plugins for Wordpress
Testimonials
Testimonials plugins for Wordpress
Tabs
Tabs plugins for Wordpress
Social Sharing
Social Sharing plugins for Wordpress
Social Feeds
Social Feeds plugins for Wordpress
Slider
Slider plugins for Wordpress
Reviews
Reviews plugins for Wordpress
Portfolio
Portfolio plugins for Wordpress
Membership
Membership plugins for Wordpress
Forms
Forms plugins for Wordpress
Events Calendar
Events Calendar plugins for Wordpress
Contact
Contact plugins for Wordpress
Comments
Comments plugins for Wordpress
Analytics
Analytics plugins for Wordpress
Common Ninja Apps
Some of the best Common Ninja plugins for Wordpress
Browse our extensive collection of compatible plugins, and easily embed them on any website, blog, online store, e-commerce platform, or site builder.
Countdown to Download
Use a countdown to download widget that reveals files after the timer ends, builds anticipation, and guides visitors toward higher engagement.
TikTok Slider
Show TikTok videos with a TikTok slider that displays clips in an engaging, customizable slideshow to boost visibility and keep visitors watching.
Image Slider
Showcase visuals with an image slider that displays multiple images in a smooth slideshow, improves design, and keeps visitors engaged.
Visitor Counter
Show real time visitor counts with a visitor counter widget that displays live traffic, builds social proof, and boosts engagement.
Charts & Graphs
Add charts and graphs to your site to present data clearly, help visitors understand insights faster, and support more confident decision making.
Scroll to Element Button
Scroll to element button that improves navigation by letting visitors jump directly to key sections, reducing friction and boosting overall engagement.
Glassdoor Reviews
Show Glassdoor reviews to highlight employee feedback, strengthen employer brand, and help candidates trust your company.
Course Listings
Create course listings with a course catalog widget that displays programs clearly, supports easy organization, and helps visitors explore courses effectively.
Scratch Card
Add an interactive scratch card to engage users, reveal offers, and support lead capture through gamified participation.
YouTube Carousel
Show YouTube videos with a YouTube carousel that displays clips in a smooth, customizable layout to boost visibility and keep visitors engaged.
Engagement Toolbox
Use an engagement toolbox that combines forms, galleries, chats, and interactive elements to increase visitor activity and create a more engaging user experience.
Business Listings
Create business listings with a listings widget that presents companies clearly, supports easy organization, and helps visitors find the right services quickly.
More plugins
plugins You Might Like
Discover Apps By Platform
Discover the best apps for your website
Common Ninja Search Engine
The Common Ninja Search Engine platform helps website builders find the best site widgets, apps, plugins, tools, add-ons, and extensions! Compatible with all major website building platforms - big or small - and updated regularly, our Search Engine tool provides you with the business tools your site needs!
