This final section guides you through configuring the template's components to reflect your brand's content and live product data. The landing page contains two primary types of components: those that pull data dynamically from your Shopify store, and those that rely on manual, static inputs.

Component Data Types

• Shopify Data Components: These items display live product, collection, or menu information retrieved directly from your Shopify store. To configure them, you must provide a valid handle or menu name in the component's settings (usually located in the Interactions Panel).
• • Collection Carousel
  • Featured Product
  • Related Items
• Static Content Components: These items are updated manually. You edit text, upload images, and set links directly within the Shipcode editor.
• • As Seen In
  • FAQ
  • Footer
  • Header Logo
  • Review
  • Section Intro
  • Value Proposition
• Reusable Components: Some static components in this template are set up as Reusable Components. Reusable Components are central to building scalable, consistent, and maintainable applications in Shipcode (learn more about Reusable Components here). They function as a single source of truth for a design pattern, enabling you to design one modular UI element and reuse it across multiple locations in your project.
• • Section Intro
  • Value Proposition

Dynamic Data Components (Shopify Data)

These components require configuration using your Shopify product or collection handles to display live data.

Featured Product

Description

This component uses live data to feature a single product. It displays product variant selections, the product description, a "buy now" option that directs users to checkout, an image gallery modal, and a "view more details" button that links to the product page on your main site.

Shopify Prerequisites

No setup is required in your Shopify store other than locating the product handle for the item you want to feature.

To find a handle: In your Shopify Admin, navigate to the product, scroll to the Search engine listing preview section, and locate the URL/handle field.

Shipcode Configuration

1. Select the Featured Product component in the Structure Panel.
2. Go to the Interactions Panel in the right sidebar.
3. Enter your product handle into the Product Handle field.
4. The component will automatically display the product’s information.

How to Customize

Loading State

• Select the component in the Structure Panel.
• In the Interactions Panel, toggle on Simulate Loading State.
• Style the loading state using the Appearance Panel, or use the pre-designed option.
  

"Product Not Found" State

• Select the component.
• In the Interactions Panel, temporarily delete the value in the Product Handle field.
• Style the state with the Appearance Panel or use the pre-designed option.
• Re-add your product handle when finished.

Free Shipping Message

• By default, the component includes static text under the product variants: “free shipping + easy returns.”
• To update: Select the Free Shipping Text layer and edit it to reflect your brand’s actual shipping/return policy.

Upgrade Paths

The current image gallery leverages Shopify’s default functionality. If you prefer a more standard gallery experience, customizations can be made in Shopify. Please contact us for details.

Navigation Carousel

Description

This component displays sub-collections (Level 2) from a selected or inherited primary collection (Level 1), helping users dive deeper into your catalog. Each collection is shown as a linked card with an image and title.

Shopify Prerequisites

The carousel pulls its sub-collections from a Shopify menu, so you must configure a menu specifically for your category carousels.

1. Go to Content -> Menus.
2. Click Create Menu and name the new menu (e.g., ‘Navigation Carousel’).
3. Add the L1 Menu Item (your primary collection) for the carousel.
4. Add L2 menu items nested underneath your L1 menu item.
5. Add an image for each collection in Shopify.
6. Save your menu in Shopify.
7. Take note of the L1 collection handle and the Menu Handle; you will use both in Shipcode.

Shipcode Configuration

Add your menu handle

• With the Navigation Carousel selected:
• • Navigate to the “Interactions” panel in the right sidebar
  • Locate the field labeled “Menu Handle” 
  • If you named your menu Category Carousel, the menu will be automatically applied. 
  • If you named your menu something else, you can update it with yours
  • The menu handle is found in the Shopify menu right under the name field

Add your Collection Handle

• With the Category Carousel selected:
• • Navigate to the “Interactions” panel in the right sidebar
  • Locate the field labeled “Collection Handle”
  • Update it with the L1 menu item you set up in Shopify
  • • To find your collection handle in Shopify, go to Products → Collections and select the L1 Collection 
    • Scroll to the bottom of the page, and look for the Handle at the end of the URL under “Search engine listing.”
    • Alternatively, the handle appears in the URL after /collections/ when viewing the collection in your store’s website.
    • For example, in this URL, https://field-thread.myshopify.com/collections/outdoor-living, the handle is “outdoor-living” 

Configure Linking

• With the Category Carousel selected:
• • Navigate to the Interactions Panel in the right sidebar.
  • Locate the field labeled Canonical URL.
  • Update this field to match your store’s linking structure, leaving off the actual product name.
  • • Example:
    • • If your store URL is: https://field-thread.myshopify.com/products/product-name
      • Enter everything up to, but not including, the product name: https://field-thread.myshopify.com/products/

Styling

Defining Carousel Items

• With the ‘Carousel with Images’ layer selected:
• • Navigate to the “Appearance” panel in the right sidebar
  • Scroll to the bottom of the panel and expand the ‘Other’ editor
• Observe the Items Per Page prop has values for each breakpoint
• • Items Per Page determines how many cards are visible per breakpoint
• Observe the Peek Size prop has values for each breakpoint
• • Peek Size determines how much of the next card is visible at a breakpoint
  • Setting a value of 0 will not show another card
  • Setting a value higher than 0 will show a peek at the next card
• The combination of Items Per Page + Peek Size is how the carousel determines how many cards to show across different device sizes
• Open focus mode by clicking the target icon on the top right corner of the layout. Click between the different breakpoint/device icons so you can see what the setting of the carousel look like across all 5 breakpoints
• • Setting a value at a breakpoint will apply that value to that specific breakpoint.
  • Mobile values propagate up to the higher breakpoints until an override is made. 
  • When an override is made that value will apply to that breakpoint and higher unless the value is changed again at a higher breakpoint
  • To remove override values, click the prop label with the blue dot to open the override context menu, then click the trash icon next to the breakpoint value you want to remove
• Edit the values of Items Per Page and Peek Size to be higher or lower depending on your unique needs. 

Styling the Category Cards

• Inside of the ‘Content with Images’ layer you will see two links layers—one for the image and one for the text.

• Select the ‘Image’ layer and navigate to the Appearance panel in the right sidebar
• • Scroll down to the Size editor and click to expand
  • Locate the Aspect Ratio prop and change the value to fit your asset

• • • To determine the aspect ratio of your images, divide width by height. For example, if an image is 1920 pixels wide by 1080 pixels high, you would divide 1920 by 1080 to get approximately 1.78
    • This value usually doesn’t change so its a best practice to make the edit at the mobile breakpoint so it applies to all higher breakpoints as well

Related Items

Description

This component displays a small product listing section featuring a subset of products from a specified Shopify collection. It includes the product’s image, title, price, and available color variants, and links directly to the corresponding product detail page.

Shopify Prerequisites

No setup is required in your Shopify store other than locating the collection handle for the collection you want to feature.

• To find a collection:
• • In your Shopify Admin, go to Products > Collections and select the collection you’d like to use.
  • Scroll to the Search engine listing preview section.
  • The handle will appear in the URL field and is typically the last part of the URL (lowercase with hyphens).

Shipcode Configuration

1. Select the Related Items component in the Structure Panel.
2. Go to the Interactions Panel in the right sidebar.
3. Enter your collection handle into the Collection field.
4. The component will automatically display the product’s information.

Configure Linking

1. Locate the Canonical URL field in the Interactions Panel.
2. Update this field to match your store’s product linking structure.
3. • Example: If your store URL is https://your-store.myshopify.com/products/product-name, enter https://your-store.myshopify.com/products/.

Static Content Components

These components are updated by manually editing text and changing assets directly within the editor.

As Seen In

Description

This component showcases press features, brand mentions, or partner highlights using a title followed by a row of logos. It builds credibility by showing recognition from well-known sources.

How to Customize

• Update the title: Select the “Title” layer in the Structure Panel and update the title text if needed.
• Swap the logo(s):

• 1. Select the “Logo List” layer in the Structure Panel.
  2. In the Settings Panel, you will see fields for each logo's image URI and accessibility label.
  3. To replace a logo, upload the image to your Assets section (found in the left sidebar).
  4. Get the image’s URI from its settings icon > URI > Copy, and paste it into the URI field in the Settings Panel. Repeat for all logos.

FAQ

Description

The FAQ component provides a space to answer common questions about your brand, products, or services using a title and a list of collapsible accordion items.

How to Customize

• Update the title: Select the “Title” layer in the Structure Panel and update the title if needed.
• Update the accordion content:
• 1. Select the “Accordion List” layer in the Structure Panel.
  2. Navigate to the Settings Panel on the right.
  3. Each accordion item has unique fields for “Title” (the question label) and Body (the answer content).
  4. Click into each field to update the text.

Footer

Description

The Footer component provides a simple site footer with links to your key policies and a copyright notice, reinforcing brand trust and meeting basic compliance requirements.

How to Customize

• Update copyright text: Select the text layer with the copyright line and update the year or customize the copy to reflect your brand’s legal preferences.
• Update the links:
• 1. Select the “Legal Links” layer in the Structure Panel.
  2. Navigate to the Settings Panel on the right.
  3. Each link item has fields for Name (the link label) and Link URL (the destination).
  4. Click into each field to update the content.

Header Logo

Description

This component acts as a mini header for your landing page. The logo helps anchor the design so users immediately recognize your brand, ensuring trust and continuity with your main site.

How to Customize

• Swap the logo:
• 1. Select the Logo layer in the Structure Panel.
  2. In the Settings Panel, locate the Source Type dropdown.
  3. Choose your preferred source type (URI, Asset, or Upload) and provide the image file.

• Restyle: You can adjust the appearance using the Appearance Panel. If your logo is being cropped, adjust the variable aspect ratio by navigating to Themes in the left panel navigation, locating the size variables, and editing the logo aspect ratio value.

Review

Description

The Review component is a single customer testimonial, including a star rating, the testimonial text, and the customer’s name. This section adds credibility through an authentic voice.

How to Customize

• Update the quote: Select the “Quote” layer in the Structure Panel and update the text with your 5-star customer review.
• Update the customer name: Select the “Reviewer” layer and update the name.

Reusable Components

Reusable Components are central to building scalable, consistent, and maintainable applications in Shipcode. They function as a single source of truth for a design pattern, enabling you to design one modular UI element and reuse it across multiple locations in your project. Learn more about Reusable Components here.

This architecture provides two core benefits:

• Consistency: A reusable component guarantees a unified appearance. If the style (like color, font, or spacing) is updated on the primary component, the change is instantly inherited by every instance across your entire template.
• Efficiency: They eliminate repetitive work. You only need to build and style a component once, significantly speeding up development and deployment for new pages or global updates.

How to Edit Reusable Components

Understanding how to edit these components is crucial, as changes affect different areas of your project:

• Global Changes (Styling): To make changes that affect all instances of the component across your project (like global styling), you must edit the primary component level. Click the component in the Structure Panel and choose “edit main” from the Appearance Panel.
• Local Changes (Content): To make changes that only affect the content of the component in this specific location (like unique titles or links), you edit it directly in the layouts mode.

Section Intro

Description

The Section Intro component is a flexible block including a title, subcopy, and a button. It introduces a page section, sets context, and provides a clear call-to-action.

How to Customize

• Content:
• • Title: Select the title text layer and replace it with your headline.
  • Subcopy: Select the subcopy text layer and enter supporting text.
  • Button: Select the button label layer, and update the label if needed.
• Linking:
• 1. Ensure you have the “primary button” layer selected in the Structure Panel.
  2. Navigate to the Settings panel in the right sidebar.
  3. Locate the “Link To” field and enter your destination URL.

Value Proposition

Description

The Value Proposition component showcases your brand's unique value using a bold brand message followed by three curated sections, each with an image, supporting copy, and a button.

How to Customize

• Update your Copy: Update the Brand Message, Intro Copy (the single unique value proposition), Subcopy, and Button text by selecting the respective text layers and editing the content.
• Linking:
• 1. Ensure you have the “secondary button” layer selected in the Structure Panel.
  2. Navigate to the Settings panel in the right sidebar.
  3. Locate the “Link To” field and enter your URL. Repeat for all three buttons
• Update your Images (pictured):
• 1. Select the image layer in the Structure Panel.
  2. In the Settings Panel, locate the Source Type dropdown and provide the new image (via URI, Asset, or Upload).