Using Superstore's theme settings: Products

The Products settings include a range of versatile options that help give you more control in how to display your products. 

Access the Products portion of the Theme settings through the theme editor (Customize).

Use the Products settings to adjust aspect ratio for product image, activate the quick shop, enable stock level display, arrange the product grid, select a variant display option, activate social sharing buttons, and show product details.

Adjust aspect ratio for product image

The Product image gallery portion of the Products Theme settings control the appearance and layout for the Product page images.

Select a Gallery aspect ratio that best suits the orientation of your product image. To get the best results, product images should be consistent in dimensions.

These settings only control the appearance of the product image for the Product page.

Uncropped

• Natural
• Short
• Square
• Tall

Cropped

• Short
• Square
• Tall

Using an uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront.

Arrange the layout of the thumbnail images

The thumbnail images are the additional images for the product framed in smaller containers outside the main image. These can be positioned either below the main image or beside it on the left.

Select an option from the Gallery thumbnails position to arrange these images.

Activate the quick shop

The Quick shop feature allows customers to view details about a product without leaving the collection page. 

Go to Customize > Theme settings > Products > Quick shop and click the checkbox beside Show quick shop

Include an add-to-cart button

Include an add-to-cart button in your quick shop by selecting Show “Add to cart” button.

Control device display

Use the "Quick shop" button and "Add to cart" button dropdowns to control these buttons. You can disable them, limit to desktop, or show for both desktop and mobile.

Activate dynamic checkout buttons

Include a Dynamic checkout button in your quick shop by selecting Show dynamic checkout button.

Learn more about dynamic checkout buttons

Enable cart redirection

Enable cart redirection to direct customers to the Cart page when adding the item to the cart.

Some apps require disabling AJAX, which is precisely what Enable cart direction would allow. To disable AJAX, enable cart redirection.

Enable stock level display

Superstore versions 2.2.0 and above feature inventory display options to show the remaining quantity of a particular product for customers.

In the Products Theme settings, scroll down to the Stock levels portion.

Select either Product page and product grid or Product page only to activate the feature.

Product page and product grid will display the inventory levels for the Product page, Collection page, Search results page, and Featured collection section. 

Product page only limits this display to the product page.

Set a low stock threshold

Determine the maximum amount of products needed for this inventory information to display. For instance, if you want it only to display when there are less than ten products, drag the slider pin to 10.

Include a back-in-stock form

If a product is sold out, you can have a special form for a back-in-stock notification. Customers can use this if they are interested in the sold-out product and want to be notified when it is restocked.

To activate this, click the "Back in stock" request form dropdown to select Show below product options.

To disable this feature, select Disable instead.

If a product has multiple variants, the form will only appear when all of those variants are sold out.

Keep track of customers for this feature

When a customer submits their email through this feature, an email is sent to your inbox. Confirm that the correct email is set up for your Customer email field in your General Settings.

The email notification includes the customer's email address, product name, and store URL.

Use this information to create a waitlist for sold-out products.

Arrange the product grid

The Product grid settings control how products appear when displayed on collection pages, certain home page sections, and more.

Adjust product card spacing

Under Product grid, select Enable product card spacing, then use the provided sliders to adjust the spacing for product cards. These cards are used for the Collection page, Search results page, and Featured collection home page section.

These settings only control the spacing and will not change the number of products per row. Control how many products are shown per page by using the Collection page section settings.

Show recently viewed products

Select Enable recently viewed products to display recently-visited products. This will be displayed between the footer and the product page. Customers can erase their recently-viewed queue by clicking Clear recently viewed in the top-right corner.

Show a secondary image on cursor hover

Enable Show second product image on hover to show customers another product image when they hover the cursor over the product card. This feature will only work if there are multiple images for the product.

Emphasize price

Draw more attention to the price by enabling Emphasize price. This will swap the position of the price and product title, as well as expand the font size for the price.

Select a product card aspect ratio

Determine how the product cards display the images with the Product aspect ratio dropdown. There are 7 options, divided into 2 categories: Uncropped and Cropped.

Uncropped

• Natural
• Short
• Square
• Tall

Cropped

• Short
• Square
• Tall 

Using an Uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront.

Customize sale badges

Highlight deals and discounted items by selecting Enable sale badges.

These will be pinned to the on-sale products and display a percentage value (Save 10%), an amount value (Save $10), or simply ‘Sale’ depending on the option selected for Sale badge style.

Use the Products portion of the Theme settings to configure this setting.

Select a variant display option

For product variants, select an Option style. The two options are Dropdown or Selectable boxes.

Use the theme editor to access the Products and select either Dropdown or Selectable boxes.

Also, consider using Superstore's color swatches for product variants or color swatches.

Dropdown

Dropdowns collect the variant options and display them in a vertical list when selected.

Selectable boxes

Selectable boxes display the variants in individual buttons that toggle the variant when clicked.

Activate social sharing buttons

Include buttons for customers to share your products to their favorite social media platform by selecting Enable social sharing in the Products portion of the Theme settings.

For more social media topics, check out Social media settings

Show product details

Enable Show vendor and/or Show SKU (stock keeping unit) to include those product details on the product page.

The Vendor and SKU information are entered directly on the product page within the Shopify admin.

Superstore will add these items to the product details or will hide them if you uncheck the boxes.

Visit Shopify's guides: Managing your SKUs and Product Details > Organization