Adjusting Theme Settings for Products

The Products settings make global changes to the way customers view and interact with your products. This includes the details in product listings (brands, links, etc.) and the quickshop feature.

Adjusting theme settings for products in Safa

Use the theme editor to display the vendor, add product image borders, adjust the product grid, include an add-to-cart button, display second image on cursor hover, adjust product image sizes, and enable the quickshop.

Access Products Settings

To make changes to these settings, go to Customize > Theme settings > Products.

Display the Vendor

Enable Show vendor to include a vendor label for the products. Vendor information can be added via the Products portion of your Shopify admin.

Add Product Image Borders

To add a border to your product images, enable Show product image borders.

Adjust the Product Grid

The product grid refers to the card-like layout of products in features such as the collection page, certain home page sections, product recommendations, and more.

Include an Add-to-Cart Button

To feature an add-to-cart button for each product on the product grid, enable Show add-to-cart button.

Display Second Image on Cursor Hover

To reveal a second product image with hover interaction, enable Show secondary image on hover.

To display the product information (price and title) with hover interaction, enable Show product info on hover.

Adjust Product Image Sizes

Select a Slideshow aspect ratio that best suits the orientation of your product images. For best results, product images should be consistent in dimensions — 2000 x 2000px is recommended.

Uncropped Options

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

  • Natural — Original image dimensions preserved
  • Short — Shorter aspect ratio with white space padding
  • Square — Square aspect ratio with white space padding
  • Tall — Taller aspect ratio with white space padding

Cropped Options

Using a cropped setting will crop your images to fit the selected ratio.

  • Short — Shorter cropped ratio
  • Square — Square cropped ratio
  • Tall — Taller cropped ratio

Enable the Quickshop

By enabling quickshop, customers can view and select products without leaving the page they’re browsing — creating a fast and seamless shopping experience.

Confirm that Enable quick shop is checked, then choose a Variant options style.

Quickshop Options

Use the checkboxes to customize information in quickshop windows:

  • Show quantity selector
  • Show email link
  • Show variant SKU
  • Enable dynamic checkout button — Sends customers directly to checkout, skipping the cart
  • Enable cart redirection — Sends customers to the cart page after adding an item
  • Show social sharing buttons

Configure Quickshop Images

To allow customers to zoom in on product images, select Enable image zoom.

Select the Product thumbnail position from the dropdown. This refers to the additional images of your product that appear with the main image:

  • Left of main image — Thumbnails displayed in a column to the left
  • Right of main image — Thumbnails displayed in a column to the right
  • Below main image — Thumbnails displayed in a row below

Add a Fitting Guide Link to Quickshop

To include a page link for your store’s product fitting guide, click Select page and locate the page in the dropdown. Select one of the available icons to pair with the link: Ruler, Info, or Shirt icon.