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. Name the new channel "Styla" and configure it as desired.
   1. Or rename the existing one
4. Enter the correct domain (preview or production domain) to the channel
   1. You should have gotten this domain from your Styla contact - it should be in this format: {front name}.preview.styla.eu
5. Set the channel to active and assign the categories & products you want to see in your Styla Frontend.
6. Once created, note down the API key for this new sales channel to send to Styla later.

2. Create a new integration:

1. In the Shopware backend:
2. Go to Settings > System > Integrations.
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 channel API Key, Access Key ID and Secret Access Key that you noted down in steps 1 and 2 to your Styla contact.
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.