Existing Websites - Customising your embeds

Shoprocket offers total control over the appearance of your code embeds via the code generator in your dashboard.

Select which embed type you'd like (single product widget, full page product, multiple products or shopping cart) and then enable/disable the elements you'd like to include, as well as customise the sizes, styles & behaviours.

Once you have made changes ot your embed code, you will need to copy & paste it into your website where you'd like it to appear. (if you make future changes, you will need to copy & paste the code again)

You can also click "Save as default settings" in the left hand menu to store your embed settings, so that all future embed codes you generate will start with the same settings.



Options

The following options are available from the "Options" section in the left hand menu:

Products to display - Choose to show all products, or only products from specific categories
Product size - Set the sie of the embedded items (small, medium or large)
Image fit - Define whether the product images should be cropped to the available size, or scaled down (cropped will keep all images the same size and more uniform)
Image width - Set the width of the image
Image height - Set the height of the image
Button style - choose between "Standard" (rectangular buttons with text) "Minimal" (circle buttons with icons) or "On Hover" (circle buttons with icons which only appear when hovering over the product)
Default Sorting Order - Define the sort order that products will be listed by default (Default, Newest First, Name: A-Z, Name: Z-A, Price: Low-High, Price:High-Low)
Products per page - Specify how many products to load into the view
Hide out of stock products - Choose whether or not to completely hide products that are out of stock, or show them with an "Out of stock" message

Includes

You can also specify which elements to include, such as the "view product" button, and the "Ribbons"

The following includes are available from the "Includes" section in the left hand menu:

Search box - Displays the "search" field above your products embed (only available on multiple products embed)
Sort box - Displays the sort order dropdown menu (only available on multiple products embed)
Limiter per page box - Displays the items per page dropdown menu (only available on multiple products embed)
Currency box - Displays the currency dropdown for customers to view prices in their preferred currency (currencies must be enabled first in your store settings)
Langauge box - Displays the language dropdown for customers to switch languages (Store texts must be setup first in your settings)
Categoy box - Displays the category dropdown, allowing customers to filter products by category (only available on multiple products embed)
Product name - Displays the product name
Product price - Displays the product price
Product image - Displays the product hero image
Product summary - Displays the product summary text
View product button - Displays the button to open the full product details in a modal
Add to cart button - Displays the button to add the item to cart (options will appear above on hover, products that require more advanced options/variations will open the view producrt modal on click)
Min/max order quantity - Displays the minimum & maximum order quantities available, if set in your product
Free shipping ribbon - Displays the "Free Shipping" ribbon on your product if free shipping is applicable
New product ribbon - Displays the "New" ribbon on products added within the last 20 days
Digital download ribbon - Displays the "Digital Download" ribbon on products that include a downloadable file on purchase

View Product Popup

For products that have the "view product" option enabled, you can customise which of the following elements to display in the modal:

Product name - Displays the product name
Product price - Displays the product price
Quantity select - Displays the quantity select field (if disabled, only 1 can be added to the cart at a time)
Product image - Displays the product image gallery
Image thumbnails - Displays the image gallery thumbnails
Product reviews - Displays the product reviews
Product summary - Displays the product summary text
Product description - Displays the product description
Product SKU - Displays the product stock keeping unit (SKU)
Product categories - Displays the products linked categories
Social sharing icons - Displays buttons allowing for 1 click share of the product to social media channels
Related products - Displays the related products
Min/max order quantity - Displays the minimum & maximum order quantities available, if set in your product

You can also choose from the following options:

Image fit - Define whether the product images should be cropped to the available size, or scaled down (cropped will keep all images the same size and more uniform)
Image width - Set the width of the images
Image height - Set the height of the images
Thumbnail layout - Position the image gallery thumbnails horizontally below the image gallery, or vertically to the left
Variation style - Choose between standard "dropdown" menus to choose from, or "plain" text menus

Styles

You can customise the following colours via the generator:

Product title
Product price
Product summary
Buy button background
Buy button text/icon
View product button background
View button text/icon
View cart button background
View cart button text
Basket widget colour
Basket background
Basket text colour
Product item background

For those with coding skills, you can of course use your own CSS rules to style the embeds as much as you like, we don't use iFrames so all of the content rendered into your page is part of the DOM and can be styled with your own CSS.

Just make sure that your CSS rules are more specific than ours.

For example, we have this rule:

.sr-filters-wrap div {
background: #fff;
}


to override that, create your own CSS rule with a parent elements prepended, such as:

body .sr-filters-wrap div {
background: #000;
}


Because you added the "body" elements before our rule, it will be more targetted than ours, and take priority.

You can also make changes directly in the code embed generator if you're more comfortable with that.
Was this article helpful?
Cancel
Thank you!