Once your Shopify store is connected to a project, and products are loaded in the Shoplink menu, you can add products to your design and use the powerful styling tools available in Amaze to create completely custom mobile shopping pages to showcase your products.

In this article, we will cover how to:

1. Display products on your Amaze page
   

2. Show/hide product data synced from Shopify
   

3. Customize the position, size and layout of the Product Group
   

4. Customize styling
   

   1. Customize button style and size
      

5. Modify button click actions
   

How to display a product on your Amaze page

You can add products to your design by dragging them from the Shoplink menu and dropping them onto the Canvas.

To add a product to your design 

1. Open a project onto the Canvas
   

2. Connect the project to your Shopify store and load products into the Shoplink menu. 
   

3. Click on the Shoplink icon in the top toolbar
   

4. Scroll through the products until you find the one you want to add. 
   

5. Single click on the product and drag it to the screen on the Canvas you want to add it to, then release the mouse to place it. 
   

The Product Group

Products are added to the Canvas as a special group which we refer to as the Product Group. The Product Group pulls the product image, title, price and variants directly from your Shopify catalog.

Updating the Product Group with the latest data from Shopify

Product data synced from Shopify cannot be modified in Amaze. Shopify is the source of truth. Any changes made to this information in Shopify will be updated in Amaze the next time the page is loaded. To update a Product Group on the Canvas with the latest data from Shopify, click the Refresh icon in the Shopify Product Group section of the Object tab in the Right Inspector.

DO NOT UNGROUP THE SHOPIFY PRODUCT GROUP

Ungrouping will sever the data connection to Shopify. This cannot be undone. 

How to Show or Hide Product Data

When a Product Group is added to the Canvas, the product image, title price, variants and buy button are displayed by default, but you can show or hide individual product layers based on your design needs.

To hide or show a product layer synced from Shopify:

1. Select the product you want to modify by single clicking on the Product Group.
   

2. Navigate to the Object tab in the Right Inspector. 
   

3. Under the Shopify Product Group section, uncheck the box for the product layer you want to hide. To show it again, recheck the box (a). You can also hide product layers by hovering over the layer in the Left Layer List and clicking the eye icon.
   

The Shopify Product Group is re-rendered on the Canvas each time the Exclude/Include Variants button is clicked, overwriting any manual style changes that you previously made. 

Modify Button Click Action

You can customize the action that happens when the button is clicked by expanding the Buy Action dropdown menu in the Shopify Product Group section of the Object tab in the Right Inspector. 

Add to Cart - Redirects customers to your store’s shopping cart and adds the product. Customers can return to the Famous page to add additional products to their order.

Direct to Checkout - Brings the customer directly to your checkout, where they can purchase the product. Customers aren't able to add additional products to their order.

Customize Product Position, Size and Layout

Resizing and repositioning the Product Group and its layers works like it does for regular layers, giving you complete creative control over the layout of your design.

Resize the Product Group

To resize a Product Group, select it, then click and drag on any of its selection handles. Handles on the sides of the layer will adjust the width, while handles on the corners will adjust the height and width together.

Resizing Product Layers

To resize a layer within the product group, first select the group, then double click on top of the layer you want to resize to select it. Then drag on any of its selection handles. Handles on the sides of the layer will adjust the height or width, while handles on the corners will adjust the height and width together.

You can also resize a Product Group or layer by selecting it and typing its dimensions in the Right Inspector.

Moving Product Groups and layers

To move a Product Group, simply click and drag it. To move a Product Group layer, select the group, then double click on top of the layer to select it and drag.

Customize Text

When you select a text layer in the Product Group, you can edit its style properties in the Right Inspector like you would for regular text layers. Amaze gives you access to a catalog of Google Web Fonts.

In the Text section of the Object tab in the Right Inspector, you’ll find options for:

• Typeface
  

• Size
  

• Character, line and paragraph spacing
  

• Alignment
  

• Transformations (capitalize, uppercase and lowercase)
  

Customize Button Style

You can change the color, size and text of the button to match your design. When you select the button, you’ll see the following options for editing that shape in the Right Inspector.

1. Layout: Modifies alignment, position, size and rotation.
   

2. Appearance: Modifies opacity, corner radius, fill color, border color and stroke width
   

3. Effects: Modifies drop shadow