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:
-
Display products on your Amaze page
-
Show/hide product data synced from Shopify
-
Customize the position, size and layout of the Product Group
-
Customize styling
-
Customize button style and size
-
-
Modify button click actions
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
-
Open a project onto the Canvas
-
Connect the project to your Shopify store and load products into the Shoplink menu.
-
Click on the Shoplink icon in the top toolbar
-
Scroll through the products until you find the one you want to add.
-
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.
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:
-
Select the product you want to modify by single clicking on the Product Group.
-
Navigate to the Object tab in the Right Inspector.
-
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.
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.
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.
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.
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.
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.
Copying and Pasting Product Groups
You can copy and paste a Product Group to quickly duplicate it. When the entire group is copied and pasted, the data connection with Shopify is maintained.
To copy and paste a Product Group:
-
Select the Product Group you want to copy and press Ctrl+C on Mac and press Ctrl+C on PC.
-
Place your cursor where you want to paste the copied text and press Ctrl+V on Mac and press Ctrl+V on PC.
In contrast, individual Product Group layers are copied and pasted, the data connection is severed when and the copied layers are not be synced with changes made in Shopify.
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)
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.
-
Layout: Modifies alignment, position, size, and rotation.
-
Appearance: Modifies opacity, corner radius, fill color, border color, and stroke width
-
Effects: Modifies drop shadow