Customizing the embeddable store and categories
In this article, we will go over how to customize the look and operation of the embeddable store widget to use on an external site. If you need help adding the HTML embed code to your site, check out this article for detailed steps.
If you are currently using the Selz store builder and themes to host your store, the following steps do not apply
1. Go to Buttons & Widgets from the main menu on your dashboard. This will display the button and widget editor.
2. Click 'Store' to see a preview of what your shop might look like once added to your existing site
3. You can choose the colors that will be displayed by clicking 'colors' and dragging the color select tool or pasting in a color code. Hit 'Save as defaults' to save time in the future. 4. Toggle the visual components within the 'Style' section of the embed editor. Here you can enable/disable the search bar, choose to show a category drop-down or customize how the pagination is displayed.
You also have the ability to auto-crop your product images so they are all displayed with an even, square crop. Check out how this works in the different images below:
Without square crop:
With square crop:
Use the 'Truncate Titles' toggle to shorten longer product titles to keep the products aligned in a pleasing grid.
5. Select 'Behavior' to choose how you would like your store to behave and if you would like to take advantage of the shopping cart feature.
We recommend keeping the 'Modal' option enabled in this section. This option gives your customers a streamlined checkout process through your website via an overlay pop-up. Otherwise, the link will direct them back to your shop.
6. Navigate to the 'Category' section to add a specific category to each page of your site. This option is extremely helpful for merchants with large, varying inventories. This feature will allow you to add an entire section of your inventory to a page on your website all at once. The best part is that it is still fully integrated to your inventory and will update stock levels in real-time no matter where you add it. This is a much better method for merchants looking to highlight multiple products at a time.
7. Within the 'Search' page, you can pre-fill a searched view to embed on your site. This means that you don't even need to create categories if all you want is to direct a customer to a page with the designated term ready to go in the search field. Check out how I added this on my site below:
8. Once you have your embed just the way you like, copy the HTML code on the right
9. Paste the code into your site (paste into the text, HTML or source tab)
10. And you're done! A beautiful store is ready for your customers.
*Please note that pasting the embed code works differently on every site and we go into detailed steps in the recommended articles listed below.