How to Sell Shopify Products on Joomla in 2027: Embed a Minishop Step by Step

Joomla still powers a huge number of company websites, community portals and content-heavy sites. If you also run a Shopify store, you have probably wondered how to sell those products on your Joomla site without rebuilding your catalog, installing a heavy e-commerce extension or sending visitors away with plain links.

In 2027 the simplest answer is a Shopify minishop: a small, embeddable storefront that shows a Shopify collection on any web page, with quick view, a cart and secure Shopify checkout. This guide walks you through the whole process with Hura Product Showcase Builder, from creating a minishop for a Perfume collection to publishing it on a Joomla article. We tested every step on a live Joomla 6 site.

Why use a minishop on Joomla?

• One catalog, one inventory. Products, prices, stock and discount codes stay in Shopify. Nothing to sync or import into Joomla.
• Real shopping, not just links. Visitors can open a quick view, pick a variant, add several products to the cart and check out.
• Always up to date. A collection minishop updates automatically when you add or remove products in Shopify.
• No Joomla extension to maintain. You paste one embed code into an article or a Custom module, and that’s it.

What you need before you start

• A Shopify store with Hura Product Showcase Builder installed.
• A Shopify collection to sell (we use a Perfume collection).
• Administrator access to your Joomla site (Joomla 4 or later; we used Joomla 6).

Step 1: Create a collection minishop in Shopify

In your Shopify admin, open Apps > Hura Product Showcase Builder > Minishop and click Create minishop. The app asks you to choose a type. Pick Collection so new products added to the collection appear in the minishop automatically. (Choose Specific products if you want a hand-picked list instead.) You can’t change the type later.

Give the minishop a name you’ll recognize, such as Perfume Collection Shop, then click Choose collection, tick Perfume and click Select.

The live preview fills with products right away. In the Products section you can set how many products to show per page, the sort order (for example Best selling) and whether to show pagination.

Step 2: Set the layout, product cards and buttons

Scroll down to fine-tune the design. These settings matter most on a Joomla page:

• Layout: Grid with 4 products per row on desktop, 2 on tablet and 1 on mobile fits most Joomla templates, including Cassiopeia. Use 3 per row if your article column is narrow because of sidebar modules.
• Product card: background, border, corner radius, shadow, hover effect and image ratio. Match them to your template’s colors.
• Actions: choose what happens when a product is clicked (open quick view or the product page). Turn on Show button on product cards and set the button text to Add to cart so visitors can buy straight from the grid.

Next, check the Quick view and Floating cart sections. Quick view can show the vendor, description, variant picker and a Buy now button. The floating cart button keeps the cart one click away while visitors scroll your Joomla page. You can also rename every cart label, and use the Market section to show prices for a specific country and language.

Step 3: Save and copy the embed code

Click Save. The page switches to Edit minishop and shows an Embed code box at the top. Click Copy code. The code is a small <div> with your minishop ID plus one <script> tag, and it never needs to change, even when you edit the design later.

Step 4: Let Joomla keep the script tag

This is the step most people miss. Joomla’s default editor, TinyMCE, removes <script> tags when you save an article, even if you paste the code with Toggle Editor. The article saves without errors, but only an empty <div> is left and the minishop never appears.

The easiest fix is to use the CodeMirror editor for your own account. In the Joomla administrator, open User Menu > Edit Account > Basic Settings, set Editor to Editor – CodeMirror and click Save & Close. Other users keep their usual editor.

Two more things to check:

• Your user group must be allowed to save scripts. In System > Global Configuration > Text Filters, Super Users use No Filtering by default. Other groups use the Default Forbidden List, which strips scripts.
• If you have to stay on TinyMCE, a site administrator can remove script from Prohibited Elements in the Editor – TinyMCE plugin. That change applies to everyone who uses that editor set, so only make it if you trust all your editors.

Step 5: Paste the code into a Joomla article

Go to Content > Articles > New (or open an existing article). Add a title such as Shop Our Perfume Collection, write a short introduction, then paste the embed code on its own line where you want the shop to appear.

Tip: CodeMirror auto-closes HTML tags. If an extra </p> appears after the pasted code, delete it before saving. Set the article to Published, click Save & Close, and add the article to a menu item if visitors should find it from your navigation.

Want the shop on several pages, or in a sidebar? Create a Custom site module (Content > Site Modules > New > Custom), paste the same code, choose a module position and assign it to the pages you want.

Step 6: Test the shopping experience

Open the article on your site. The Perfume collection appears as a responsive product grid with prices, compare-at prices and Add to cart buttons, plus a floating cart icon in the corner.

Click a product to open the quick view. Visitors can read the description, choose a size and add the product to the cart or buy it immediately, without leaving your Joomla site.

After adding to the cart, the cart drawer opens with quantity controls, an optional discount field and a Checkout button.

Checkout opens your secure Shopify checkout with the cart already filled in. Payments, taxes, shipping, inventory and order emails all work exactly as they do on your Shopify storefront.

Troubleshooting

The article shows my text but no products

The <script> tag was most likely stripped. Open the article in CodeMirror and check that the full embed code is still there. If only the <div> remains, follow Step 4 and paste the code again.

The grid looks cramped next to my sidebar

Lower Products per row for desktop to 3, or reduce Spacing between products. Save in the app and refresh the Joomla page. You don’t need to paste the code again.

I changed the design but the page looks the same

Clear Joomla’s cache (System > Clear Cache) and any page cache from your host or CDN, then reload the page.

Where do orders appear?

In your Shopify admin, like any other order. Joomla never handles payments or customer card data.

Start selling on Joomla in 2027

With one collection minishop and a single embed code, any Joomla article or module can become a working shop that stays in sync with your Shopify catalog. Create your minishop, switch your editor to CodeMirror, paste the code, and your Joomla visitors can browse, add to cart and check out in minutes.

Ready to try it? Install Hura Product Showcase Builder and create your first minishop today.