Knowledgebase: Site Design

How do I add ALT tags to my images?

 

For SEO purposes, ALT tags are basically the text that search engines use to recognize, and rank your store's images.

A question we get often is in regards to adding and editing ALT tags for product images.

Fortunately, your Shift4Shop store automatically provides ALT tags for your product images as they are assigned in the store. When you assign images to your products, the Shift4Shop software will take the product name itself and use it for the Alt Tag text.

In the example below, we show the image as it appears on the listing page along with the HTML created for the image reference.

Note how the ALT tag is reflecting the product's name.

Anywhere in the store where product images display will utilize this automatic ALT tagging action. This includes the following:

  • Product Listing page
  • Products on the home page
  • Related and Up Sell products
  • Banner displayed products (Top sellers, recently added, etc)

Additional Information
Please note that the store only automatically generates an ALT Tag for the primary image on a product. For additional images, you will need to set manual ALT Tags (see below).

Additionally, your store will use the following ALT tags for these non-product related images:

  • Store logo
    will use the store name variable (Settings >General >Store Settings | "Store" tab ) for its ALT tag.
  • On Sale
    will use the On Sale variable found in Store Language (Settings >Design >Store Language)
  • Rating stars
    on products will use the "Average Rating" variable found in Store Language
  • Free Shipping
    icon will use the "Free Shipping" variable found in Store Language as well.

Manual ALT Tags

We do also support the ability to configure manually-created ALT tags for certain images on your store.

Product Images

As the system only generates ALT tags automatically for the first image assigned to a product, we allow for merchants to easily set manually-created ALT Tags for product images. You can also customize the ALT Tag used for the main product image.

  1. Go to Products -> Product List
  2. Locate the Product you wish to work with, and go to Edit it
  3. Go to the Images tab
  4. For the main product image, you can modify the ALT tag within the appropriate field. For additional images, you may use the caption field.

Homepage Carousel

As the Homepage Carousel is used for custom banners, the system will not automatically generate ALT Tags for these images. You can, however, set these easily within the module using thte following directions:

  1. Go to Modules
  2. Locate the Homepage Carousel Module, click on Settings
  3. Enter in your tags into the ALT Tag field for each carousel image you are using.


Attachments 
 

Help Desk Software by Kayako fusion