Using Custom Icons on Shoprocket Buttons

Shoprocket provides a convenient way to customize the appearance of your buy buttons and view product buttons by adding custom icons. In order to achieve this, you'll need to use some custom CSS code. The process may differ slightly depending on whether you have a hosted store or an embedded store.

For Hosted Stores:

1. Log in to your Shoprocket dashboard.

2. Navigate to the "Sales Channels" section and select "Hosted Store."

3. In the "Custom CSS" field, you can add your custom CSS code.

4. Make sure to replace "path-to-your-icon.png" with the URL or path to your custom icon image.

5. Save the changes.

By following these steps, your hosted store's buy buttons and view product buttons will now display the custom icons.

For Embedded Stores:

1. Locate the CSS file that is included on every page of your website.

2. Open the CSS file in a text editor or code editor.

3. Add the following CSS code to the file:

4. Make sure to replace "path-to-your-icon.png" with the URL or path to your custom icon image.

5. Save the changes to the CSS file.

6. Upload the updated CSS file to your website, ensuring that it replaces the previous version.

Following these steps will enable your embedded store's buy buttons and view product buttons to display the custom icons.

With this guide, you should now be able to add custom icons to your Shoprocket buttons. Feel free to adjust the CSS code provided to suit your specific icon dimensions and spacing preferences.