SE Storefront for Shopify shows the products from your Shopify store on your Joomla site. Products, prices, variants and collections are copied into Joomla and refreshed automatically, and product images are copied to your own server. When a visitor buys, the Buy button takes them to your Shopify store to check out.

Contents

1. Requirements
2. Installation
3. Quick start
4. Options
5. The shop page (menu item)
6. The products module
7. The dashboard
8. Keeping products up to date
9. Product images
10. Search engines and sharing
11. Styling
12. Licence and updates
13. Languages
14. Permissions
15. Troubleshooting
16. Uninstalling
17. Support

Requirements

• Joomla 5.0 or later
• PHP 8.1 or later
• MySQL or MariaDB
• Your server must be able to make outbound HTTPS requests (to your Shopify store)
• The images folder of your site must be writable, so product images can be copied there
• A Shopify store that is open to the public, or a Storefront API token (see Product source)

The installer checks the Joomla and PHP versions and stops with a clear message if either is too old.

Installation

1. In Joomla, go to System > Install > Extensions.
2. Upload pkg_seshopify_v1.2.2.zip.

This installs the package, which contains:

To update, install the newer package over the top. Your settings, product choices and images are kept.

Quick start

1. Go to Components > SE Storefront for Shopify and click Options.
2. On the Store tab, enter your Shopify store URL, for example https://shop.example.com or https://yourshop.myshopify.com. Use the address only, with no path after it.
3. Set the Currency symbol and Currency code to match your store, for example £ and GBP, or € and EUR.
4. Click Save & Close.
5. On the dashboard, click Sync now. Your products appear in the product list.
6. Click Fetch images if the dashboard shows images still waiting. Large stores may need a few presses, or let the automatic refresh finish them.
7. Go to Menus, add a new menu item, and choose SE Storefront for Shopify > Shop (product grid) as the type. Save it.
8. Visit the new menu item on your site. You should see your products.

Options

Open Components > SE Storefront for Shopify > Options.

Store

Product source

There are two ways to read products from Shopify:

• Public feed. Every Shopify store publishes its products at /products.json. Nothing needs setting up apart from the store URL. It doesn't work if the store is password protected (for example, before launch) or if the feed has been turned off.
• Storefront API. Shopify's official route. It needs an access token.

The default, Public feed, then Storefront API if the feed fails, uses the feed and only falls back to the API when the feed fails and a token is entered. Choose Storefront API only if your store is password protected, or if Shopify keeps rate-limiting your server (see Troubleshooting).

Getting a Storefront API access token

Shopify issues Storefront API tokens through its free Headless sales channel:

1. In your Shopify admin, install the Headless channel from the Shopify App Store.
2. Click Create storefront.
3. Open the storefront and find its Storefront API access tokens.
4. Copy either the public access token or the private access token. The extension works out which kind you entered.
5. Paste it into Storefront API access token in the options, and save.

If you ever need to replace the token, generate a new one in Sales channels > Headless, update it in the options, then revoke the old one.

Display

Pick colours with enough contrast between background and text so everything stays readable. The same button colours are used for the module's "See all products" button.

Licence

Permissions

Standard Joomla permissions for the component. See Permissions.

The shop page (menu item)

Create a menu item of type SE Storefront for Shopify > Shop (product grid). The shop page shows:

• Category filter buttons, with a product count on each. Only categories with visible products are shown.
• Sort buttons: Featured, Newest, Price low to high, Price high to low, Name A to Z.
• The product grid, with image, name and price. Badges show Sold out or Sale (a variant priced below its compare-at price).
• Pagination when there are more products than fit on one page.

Clicking a product opens its product page, which shows:

• An image gallery. Click a thumbnail to swap the main image.
• The name, categories and price, or a price range if variants are priced differently.
• The Buy button, which goes to the product in your Shopify store.
• For products with several variants, a list of every variant with its price and stock, and a Buy this option link for each one. That link opens the product in Shopify with that variant already selected.
• The product description.

Menu item options

On the menu item's Shop options tab you can override the component options for this page:

You can create several shop menu items, for example one per category.

The products module

Go to Content > Site Modules > New and choose SE Storefront Products for Shopify. Assign it to a position and to the pages where it should appear.

About the slider:

• Visitors can swipe or scroll it, or use the left and right arrows. The arrows hide when every product already fits.
• Automatic sliding pauses while the pointer or keyboard focus is on the slider, and stops once a visitor uses it.
• Automatic sliding never runs for visitors whose device asks for reduced motion.

The Button link only accepts web addresses and paths on your own site. Anything else, such as a javascript: link, is ignored and the button links to the shop page instead.

The dashboard

Components > SE Storefront for Shopify opens the dashboard.

Status

• Shopify store URL: the connected store, or a warning if none is set.
• Last successful sync: when products were last refreshed, and how many were found.
• Last sync failed: shown when the most recent sync failed, with the reason.
• Showing on the site: how many products are visible, out of the total.
• Images: how many images are copied to your site, waiting, or failed.
• Cron URL: the address for scheduled syncs, once a cron key is set.

Licence

Shows whether a licence key is entered and confirmed, the plan, and the date updates run until.

Toolbar

Product list

Every product from the store, with its image, name, categories and price.

• Thumbnail: choose which of the product's images is used in the grid and the module.
• Hide: tick to keep a product off your site. Hidden products don't appear in the shop or the module, and their product pages return "not found".

Click Save after changing either.

Sync log

The last 50 syncs, showing when each started, what triggered it (Automatic, Manual or Cron), whether it worked, how many products were found, and any message, such as which source was used and how many images were copied.

Keeping products up to date

Automatic refresh

When a visitor opens the shop, a product page or a page with the module, and the stored products are older than Refresh every (minutes), a refresh runs. It runs after the page has been sent to the visitor, so nobody waits for Shopify. Only one refresh runs at a time, however many visitors arrive.

If a refresh fails, the shop keeps showing the last good copy, and the next automatic attempt waits 5 minutes.

On a brand new install with no products yet, the first refresh runs straight away so the shop isn't empty.

Scheduled refresh (cron)

For quiet sites, or to keep images flowing on large stores, add a cron job:

1. In Options > Store, enter a Cron secret key (letters and numbers only) and save.
2. Copy the Cron URL from the dashboard. It looks like this:

   https://example.com/index.php?option=com_seshopify&task=cron&key=YOURKEY

3. In your hosting control panel (for example, cPanel > Cron Jobs), add a job that calls it, for example every 30 minutes:

   */30 * * * * curl -s "https://example.com/index.php?option=com_seshopify&task=cron&key=YOURKEY" > /dev/null

The cron URL replies with plain text:

Keep the key private. Anyone with the full URL can start a sync, although they can't change anything else.

Product images

Images are copied from Shopify to your site so visitors' browsers never contact Shopify. This helps with GDPR, particularly for visitors in the EU.

• Images are stored in images/seshopify/ in your Joomla site.
• Each image is saved at up to three widths (480, 960 and 1600 pixels). Smaller originals are never enlarged.
• Up to 12 images are kept per product.
• Only JPG, PNG, GIF and WebP files of up to 8 MB are accepted, and only from Shopify's image servers or your store's own address.
• Images are copied in batches. Each sync and each Fetch images press copies as many as time allows, and the rest follow on the next run.
• An image that fails three times is marked failed. Sync now and Fetch images try failed images again.
• When a product or image is removed from Shopify, its copies are deleted on the next sync.
• Until an image has been copied, the product shows without it. Nothing is ever loaded from Shopify's servers instead.

Search engines and sharing

• Product pages have readable addresses based on your shop menu item and the product handle, for example /shop/blue-cotton-tee.
• Each product page sets the page title (following Joomla's "Site Name in Page Titles" setting), a meta description from the product description, and a canonical link.
• Product information for search engines (schema.org) includes the name, description, images, brand (vendor), price range and stock. Prices are only included if a Currency code is set.
• Sharing tags (Open Graph) give Facebook, LinkedIn and others the product's title and image.
• The shop menu item's own Meta Description and Robots settings are applied to the shop page.

Styling

The extension takes its fonts and text colours from your template, and uses neutral greys by default so it fits most sites.

Colours in the options

The quickest way to match your brand is Options > Display:

• Buy button: background, text, and hover colours. These are also used for the module's "See all products" button.
• Accent colour: the Sale badge, focus outlines, and the Buy button if you haven't set button colours.
• Category and sort buttons: normal and selected colours, each with a text colour.
• Product image background: behind transparent images.

Leave any of them empty to keep the default. The colours apply to the shop page, product pages and the products module.

CSS variables

For anything else, such as spacing, rounded corners or the muted text colour, add CSS variables to your template's custom CSS file (for Cassiopeia, media/templates/site/cassiopeia/css/user.css):

.sebc,
.sebc-module {
    --sebc-radius: 6px;                  /* rounded corners */
    --sebc-gap: 1.25rem;                 /* space between products */
    --sebc-surface: rgba(0, 0, 0, 0.04); /* default image background */
    --sebc-border: rgba(0, 0, 0, 0.12);
    --sebc-muted: rgba(0, 0, 0, 0.6);    /* prices and small print */

    /* The colour options can also be set here instead: */
    --sebc-accent: #1f2937;
    --sebc-accent-contrast: #ffffff;
    --sebc-pill: #f3f4f6;                /* category and sort buttons */
    --sebc-pill-text: #1f2937;
    --sebc-pill-light: #1f2937;          /* selected button */
    --sebc-pill-active-text: #ffffff;
}

Colours chosen in the options take priority over the same variables in your CSS.

Licence and updates

There is no free or Pro version: every feature works without a licence key. A valid licence key is what lets your site receive updates.

1. Enter your Licence key in Options > Licence and save.
2. On the dashboard, click Check licence. The key is checked with the SE24MEDIA licence server.
3. Once confirmed, the dashboard shows Licensed, and updates appear in System > Update > Extensions as normal.

The key is also kept in step with Joomla's download key for the update site, so you don't need to enter it under System > Update Sites.

If the licence expires or is suspended, the dashboard shows Expired. Everything keeps working, but no new updates are offered until it is renewed. To move the licence to another site, click Remove licence check on the old site.

Languages

The extension is translated into English, Spanish, Portuguese, German, French, Italian and Dutch. It uses whichever language your site and administrator are set to.

To change any wording, use Joomla's language overrides (System > Manage > Language Overrides). Search for the text you want to change.

Permissions

Set these in Options > Permissions.

Troubleshooting

Uninstalling

Go to System > Manage > Extensions, find SE Storefront for Shopify (type Package), and uninstall it. This removes the component, the module, the product tables and the copied images in images/seshopify/.

Support

Email support@se24media.co.uk or visit https://se24media.co.uk.

Shopify is a trademark of Shopify Inc. This extension is not made or endorsed by Shopify.