Connecting Styla Frontend with Shopware

This article guides you through the connection process for Styla Frontend with Shopware. You will learn how to create a new sales channel, configure the Styla integration, and adjust email settings to sync products and categories, and make links in emails work correctly.

1. Create a new headless sales channel (or rename an existing one):

1. Login into the Shopware backend.
2. In the navigation menu, click the plus icon next to "Sales Channels".
   
   1. Or use an existing channel that's not currently being used
      
3. Choose the "Headless API-only" option
4. Name the new channel "Styla"
   1. Or rename the existing one
5. Enter the correct domain (preview or production domain) to the channel
   1. You should have gotten this domain from your Styla contact - the preview domain should be in this format: {front-name}.preview.styla.eu
6. Configure the rest of the channel settings as desired
7. Set the channel to active
8. Note down the API key for this new sales channel to send to Styla later.
9. Click Save.
10. Open the product tab for this channel
11. Assign the categories & products you want to see in your Styla Frontend.

2. Create a new integration:

1. In the Shopware backend:
2. Go to Settings > System > Integrations. (/admin#/sw/integration/index)
3. Click the "Add integration" button.
4. Name the new integration "Styla" and check the "Administrator" checkbox.
5. Note down the Access Key ID and Secret Access Key to send to Styla. 
   1. Do this before the next step, as you won't be able to access these keys again later
6. Click "Save Integration".

3. Send the access details to Styla

1. Send the follwing information to your contact at Styla:
   1. Channel API Key (From Step 1)
   2. Access Key ID (From Step 2)
   3. Secret Access Key (From Step 2)
   4. Your Shopware Store URL (the URL you use to access your Shopware storefront and admin panel)
2. Styla will confirm when the Styla system is updated with these details.

4. (Optional) Update password reset email configuration in Shopware:

This step is only needed shortly before a go-live. Not needed for trials and tests, as long as password reset emails don't have to work.

1. In the Shopware backend:

2. Go to Settings > Shop > Log-in & sign-up.

3. Select the Styla sales channel.

4. Scroll down to "Password recovery URL"

5. Change the URL to: /forgot_password?token=%%RECOVERHASH%%

6. Remove inheritance

5. (Optional) Update order confirmation email configuration in Shopware:

Unfortunately, it’s not possible to change email templates on a sales channel level. This means this needs to be adjusted after going live and it will break the order link for the original Shopware Frontend within the order confirmation email.

• Go to Settings > Shop > Email Templates.

• Find the "Order confirmation" email template and edit it.

  

• Change the following code in both the HTML and plain text versions:

{{ rawUrl('frontend.account.order.single.page', { 'deepLinkCode': order.deepLinkCode }, salesChannel.domains|first.url) }}

To:

{{ salesChannel.domains|first.url }}/account/orders?deepLinkCode={{ order.deepLinkCode }}

• Make sure to update both the plain text and HTML versions of the email template.

Conclusion

This concludes the connection of Styla and Shopware. Your contact at Styla will confirm once the connection is stable and data is synced. You will be able to see your Products and Categories in Styla Frontend.